JSFiddle - React, Tailwind, and code Playground
by Michael Prosser
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.1/jquery-ui.min.js"></script>
<div class="task-reporting-interface"></div>
CSS
body{
font-family: helvetica, serif;
}
select{
padding: 5px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
font-size: 12px;
}
button.add-element-button{
padding: 6px;
border: solid 1px #ccc;
display: inline-block;
vertical-align: top;
font-size: 12px;
width: 32px;
margin-left: 5px;
cursor: pointer;
}
.confirm-user-selection-window{
position: fixed;
left: 0px;
right: 0px;
top: 0px;
bottom: 0px;
background-color: rgba(0, 0, 0, 0.6);
z-index: 999999;
}
.confirm-user-selection-window>div{
max-width: 420px;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
max-height: 90%;
overflow: auto;
background-color: #202224;
width: 100%;
padding: 20px;
font-family: helvetica;
overflow-x: hidden;
color: #389845;
}
.confirm-user-selection-window>div>h1{
margin: 0px;
margin-bottom: 15px;
color: #fff;
text-transform: uppercase;
font-size: 15px;
font-weight: normal;
background-color: #389845;
padding: 10px;
padding-left: 12px;
margin-left: -20px;
margin-right: -20px;
margin-top: -20px;
text-align: center;
line-height: normal;
}
.confirm-user-selection-window.confirm-delete>div>h1{
background-color: tomato;
}
.confirm-user-selection-window.confirm-delete>div{
color: tomato;
}
.confirm-user-selection-window.confirm-delete>div>p>button.ok{
background-color: tomato;
}
.confirm-user-selection-window>div>p{
font-size: 13px;
}
.confirm-user-selection-window>div>ol{
max-height: 160px;
overflow: auto;
border: solid 1px #999;
margin: 0px;
padding: 15px;
list-style-position: inside;
background-color: #111;
margin-bottom: 10px;
color: #ccc;
}
.confirm-user-selection-window>div>p>button.ok{
background-color: #389845;
color: #fff;
padding: 6px;
padding-left: 32px;
padding-right: 32px;
border: solid 1px #fff;
cursor:...
JavaScript
class TaskReportCard{
constructor(element,types){
let t = this;
t.types = types;
t.element = element;
t.selection_element = $('<select><option value="">Select a task type to configure</option></select>');
t.type_index = -1;
for(let i=0;i<t.types.length;i++){
t.selection_element.append('<option data-index="' + i + '" value="' + t.types[i].id + '">' + t.types[i].name + '</option>');
}
t.configuration_element = $('<div class="grading-configuration"></div>');
t.element.append(t.selection_element);
t.addElement = $('<button class="add-element-button">+</button>');
t.addElement.click(function(){
if(t.type_index > -1){
t.addState();
}
});
t.element.append(t.addElement);
t.element.append(t.configuration_element);
t.selection_element.change(function(){
t.type_index = parseInt($(this).find('option:selected').attr('data-index'));
t.configuration_element.empty();
if(!$(this).val()){
t.type_index = -1;
return false;
} else {
t.type_index = parseInt($(this).find('option:selected').attr('data-index'));
t.configureType();
}
});
}
configureType(){
let t = this;
t.configuration_table = $('<table cellspacing="0"><tbody class="headers"><tr><th>Select Trigger</th><th>Select Condition</th><th>Assigned Score</th></tr></tbody><tbody class="contents"></tbody></table>');
t.configuration_table.find('tbody.contents').sortable({
update: function(){
t.reconfigureType();
}
});
t.configuration_element.append(t.configuration_table);
$('<p class="sorting-helper">Drag the configuration items up or down to sort.</p>').insertBefore(t.configuration_table);
// build the results of...