Skip to content

Instantly share code, notes, and snippets.

@zgunz42

zgunz42/demo.html

Last active November 27, 2020 09:32
Show Gist options
  • Save zgunz42/e910f91cb5a6e38fb056f181192e9fea to your computer and use it in GitHub Desktop.
Save zgunz42/e910f91cb5a6e38fb056f181192e9fea to your computer and use it in GitHub Desktop.
Download ZIP
render lesson
Raw
demo.html
<ul>
<li>
<div>
<span>No Class</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="undefined"
class="checkbox_filter checkbox_filter_ws"
value="undefined" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>Tutor</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="Tutor"
class="checkbox_filter checkbox_filter_ws"
value="Tutor" /><span class="checkmark"></span
></label>
</div>
<ul></ul>
</li>
<li>
<div>
<span>Student</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="Student"
class="checkbox_filter checkbox_filter_ws"
value="Student" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>Student Demo</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="123"
class="checkbox_filter checkbox_filter_ws"
value="123" /><span class="checkmark"></span
></label>
</div>
</li>
<li>
<div>
<span>Mong Prototype</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1166"
class="checkbox_filter checkbox_filter_ws"
value="1166" /><span class="checkmark"></span
></label>
</div>
</li>
<li>
<div>
<span>Aslinda Love</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1232"
class="checkbox_filter checkbox_filter_ws"
value="1232" /><span class="checkmark"></span
></label>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div>
<span>Class A</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1"
class="checkbox_filter checkbox_filter_ws"
value="1" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>Tutor</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="Tutor"
class="checkbox_filter checkbox_filter_ws"
value="Tutor" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>Staging Tutor 1</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1228"
class="checkbox_filter checkbox_filter_ws"
value="1228" /><span class="checkmark"></span
></label>
</div>
</li>
<li>
<div>
<span>Staging Tutor 2</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1229"
class="checkbox_filter checkbox_filter_ws"
value="1229" /><span class="checkmark"></span
></label>
</div>
</li>
<li>
<div>
<span>Tutor Demo</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="121"
class="checkbox_filter checkbox_filter_ws"
value="121" /><span class="checkmark"></span
></label>
</div>
</li>
</ul>
</li>
<li>
<div>
<span>Student</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="Student"
class="checkbox_filter checkbox_filter_ws"
value="Student" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>Student Demo</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="123"
class="checkbox_filter checkbox_filter_ws"
value="123" /><span class="checkmark"></span
></label>
</div>
</li>
</ul>
</li>
</ul>
</li>
<li>
<div>
<span>Sample Class</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="9"
class="checkbox_filter checkbox_filter_ws"
value="9" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>Tutor</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="Tutor"
class="checkbox_filter checkbox_filter_ws"
value="Tutor" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>Cahyono Amd</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1230"
class="checkbox_filter checkbox_filter_ws"
value="1230" /><span class="checkmark"></span
></label>
</div>
</li>
<li>
<div>
<span>andibhaon</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1231"
class="checkbox_filter checkbox_filter_ws"
value="1231" /><span class="checkmark"></span
></label>
</div>
</li>
</ul>
</li>
<li>
<div>
<span>Student</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="Student"
class="checkbox_filter checkbox_filter_ws"
value="Student" /><span class="checkmark"></span
></label>
</div>
<ul></ul>
</li>
</ul>
</li>
<li>
<div>
<span>Google Class IT</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="10"
class="checkbox_filter checkbox_filter_ws"
value="10" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>Tutor</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="Tutor"
class="checkbox_filter checkbox_filter_ws"
value="Tutor" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>Cahyono Amd</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1230"
class="checkbox_filter checkbox_filter_ws"
value="1230" /><span class="checkmark"></span
></label>
</div>
</li>
</ul>
</li>
<li>
<div>
<span>Student</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="Student"
class="checkbox_filter checkbox_filter_ws"
value="Student" /><span class="checkmark"></span
></label>
</div>
<ul>
<li>
<div>
<span>andibhaon</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1231"
class="checkbox_filter checkbox_filter_ws"
value="1231" /><span class="checkmark"></span
></label>
</div>
</li>
<li>
<div>
<span>Aslinda Love</span
><label class="container-filter">
&nbsp;<input
type="checkbox"
id="1232"
class="checkbox_filter checkbox_filter_ws"
value="1232" /><span class="checkmark"></span
></label>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
Raw
demo.js
const data = require('./datasheet.json')
const group = (data, parentID = 0) => {
return data.reduce((acc, node) => {
if (node.class_id === parentID) {
const children = group(data, node.id);
node.children = children.length > 0 ? children : undefined;
return [...acc, node];
}
return acc;
}, []);
};
function transStudent(user, target, parentId) {
return {
id: user.id,
label: user.fullname,
checked: checked(user, target, parentId ),
}
}
function transTutor(user, target, parentId) {
return {
id: user.id,
label: user.fullname,
class_id: user.class_id,
checked: checked(user, target, parentId ),
}
}
function checked(targets, inGroup, target) {
for (var a = 0; a < inGroup.length; a++) {
if(targets[a].class_id == target && targets[a].user_id == targets[x] .id){
return 'checked';
}
}
return false;
}
function renderCheckBox(label, id, checked) {
const checkAttr = checked ? 'checked' : '';
return "<div>"+
"<span>" + label +
"</span><label class=\"container-filter\"> &nbsp;<input "
+ checkAttr
+ " type=\"checkbox\" id=\"" + id +
"\" class=\"checkbox_filter checkbox_filter_ws\" value=\"" + id + "\" /><span class=\"checkmark\"></span></label>"
+ "</div>"
}
function renderGroup(group) {
const sUl = "<ul>"
const eUl = "</ul>"
const sli = "<li>"
const eli = "</li>"
const datas = []
group.forEach((group) => {
datas.push(sli);
Object.entries(group).map(([key, val]) => {
if (Array.isArray(val)) {
const name = key === 'tutors' ? 'Tutor': 'Student'
const slim = val.map((val) => [sli, renderCheckBox(val.label, val.id, val.checked), eli].join(''))
const data = [
sli,
renderCheckBox(name, name, false),
sUl
]
data.push.call(data, slim.join(''))
data.push(eUl);
datas.push.call(datas, data.join(''));
} else {
const data = renderCheckBox(val.label, val.id, val.checked)
datas.push(data, sUl);
}
})
datas.push(eUl);
datas.push(eli);
})
return datas
}
function fromatter(data) {
// data
const classes = data.class_list;
// data1
const tutors = data.class_list_tutor;
// data2
const students = data.class_list_student;
// data3
const noTutors = data.no_class_list_tutor;
// data4
const noStudents = data.no_class_list_student;
// data5
const lesson_user = data.lesson_user;
// data6
const lesson_class = data.lesson_class;
const formatted = classes.map((data) => ({
root: {
id: data.class_id,
label: data.class_name,
},
tutors: group(tutors, data.class_id).map((val) => transTutor(val, lesson_class, data.class_id)),
students: group(students, data.class_id).map((val) => transStudent(val, lesson_user, data.class_id))
}))
formatted.unshift({
root: { id: undefined, label: 'No Class'},
tutors: noTutors.map((val) => transTutor(val, lesson_class, 'no_class')),
students: noStudents.map((val) => transStudent(val, lesson_user, 'no_class'))
})
return formatted;
}
console.log('<ul>' + renderGroup(fromatter(data)).join('') + '</ul>');
// renderGroup(fromatter(data)).join('');
Raw
demo.json
{
"class_list":[
{
"class_id":"1",
"class_name":"Class A"
},
{
"class_id":"9",
"class_name":"Sample Class"
},
{
"class_id":"10",
"class_name":"Google Class IT"
}
],
"class_list_tutor":[
{
"id":"1228",
"email":"[email protected]",
"password":"8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92",
"fullname":"Staging Tutor 1",
"profile_pic":"user_placeholder.jpg",
"username":"staging_tutor1",
"contact_no":"98989898",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"tutor",
"last_login_date":"2020-05-22 11:09:42",
"registered_date":"2020-05-22 11:09:42",
"branch_code":"9",
"id_relation":"1",
"class_id":"1",
"user_id":"1228",
"type":"tutor",
"class_name":"Class A",
"subject_id":"2",
"level_id":"1",
"created_date":"2020-06-01 16:19:47",
"created_by":"1",
"branch":"9"
},
{
"id":"1229",
"email":"",
"password":"8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92",
"fullname":"Staging Tutor 2",
"profile_pic":"user_placeholder.jpg",
"username":"staging_tutor2",
"contact_no":"97979797",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"tutor",
"last_login_date":"2020-05-22 11:09:42",
"registered_date":"2020-05-22 11:09:42",
"branch_code":"9",
"id_relation":"4",
"class_id":"1",
"user_id":"1229",
"type":"tutor",
"class_name":"Class A",
"subject_id":"2",
"level_id":"1",
"created_date":"2020-06-01 16:19:47",
"created_by":"1",
"branch":"9"
},
{
"id":"121",
"email":"[email protected]",
"password":"cc9c86bb78460f7b7902744a7aeebba8844fadff8cd6d2a8775b6f64b7b07b16",
"fullname":"Tutor Demo",
"profile_pic":"user_placeholder.jpg",
"username":"tutordemo",
"contact_no":"98219996",
"agency_link":null,
"profession":"6",
"status":"1",
"last_login":"tutor",
"last_login_date":"2020-04-01 04:38:53",
"registered_date":"2018-09-17 02:23:48",
"branch_code":"9",
"id_relation":"5",
"class_id":"1",
"user_id":"121",
"type":"tutor",
"class_name":"Class A",
"subject_id":"2",
"level_id":"1",
"created_date":"2020-06-01 16:19:47",
"created_by":"1",
"branch":"9"
},
{
"id":"1230",
"email":"[email protected]",
"password":"431b3735f40d8d50ed927bf0ff19d56550a74b0b5c35f2894b1f67a2496314c1",
"fullname":"Cahyono Amd",
"profile_pic":"user_placeholder.jpg",
"username":"cahyono5787",
"contact_no":"",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"tutor",
"last_login_date":"2020-08-04 04:01:46",
"registered_date":"2020-08-04 12:01:46",
"branch_code":"9",
"id_relation":"6",
"class_id":"9",
"user_id":"1230",
"type":"tutor",
"class_name":"Sample Class",
"subject_id":"1",
"level_id":"1",
"created_date":"2020-08-04 12:01:46",
"created_by":"27",
"branch":"9"
},
{
"id":"1230",
"email":"[email protected]",
"password":"431b3735f40d8d50ed927bf0ff19d56550a74b0b5c35f2894b1f67a2496314c1",
"fullname":"Cahyono Amd",
"profile_pic":"user_placeholder.jpg",
"username":"cahyono5787",
"contact_no":"",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"tutor",
"last_login_date":"2020-08-04 04:01:46",
"registered_date":"2020-08-04 12:01:46",
"branch_code":"9",
"id_relation":"7",
"class_id":"10",
"user_id":"1230",
"type":"tutor",
"class_name":"Google Class IT",
"subject_id":"1",
"level_id":"1",
"created_date":"2020-08-04 12:01:46",
"created_by":"27",
"branch":"9"
},
{
"id":"1231",
"email":"[email protected]",
"password":"431b3735f40d8d50ed927bf0ff19d56550a74b0b5c35f2894b1f67a2496314c1",
"fullname":"andibhaon",
"profile_pic":"user_placeholder.jpg",
"username":"andibhaon",
"contact_no":"",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"student",
"last_login_date":"2020-08-04 04:01:46",
"registered_date":"2020-08-04 12:01:46",
"branch_code":"9",
"id_relation":"10",
"class_id":"9",
"user_id":"1231",
"type":"tutor",
"class_name":"Sample Class",
"subject_id":"1",
"level_id":"1",
"created_date":"2020-08-04 12:01:46",
"created_by":"27",
"branch":"9"
}
],
"class_list_student":[
{
"id":"123",
"email":"[email protected]",
"password":"33654d087dec46a22e040ff0d09640be161cc616cc96cb85100676a51d261dd8",
"fullname":"Student Demo",
"profile_pic":"student_placeholder.jpg",
"username":"studentdemo",
"contact_no":"",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"student",
"last_login_date":"2020-04-01 04:38:53",
"registered_date":"2018-10-12 06:29:42",
"branch_code":"9",
"id_relation":"2",
"class_id":"1",
"user_id":"123",
"type":"student",
"class_name":"Class A",
"subject_id":"2",
"level_id":"1",
"created_date":"2020-06-01 16:19:47",
"created_by":"1",
"branch":"9"
},
{
"id":"1231",
"email":"[email protected]",
"password":"431b3735f40d8d50ed927bf0ff19d56550a74b0b5c35f2894b1f67a2496314c1",
"fullname":"andibhaon",
"profile_pic":"user_placeholder.jpg",
"username":"andibhaon",
"contact_no":"",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"student",
"last_login_date":"2020-08-04 04:01:46",
"registered_date":"2020-08-04 12:01:46",
"branch_code":"9",
"id_relation":"8",
"class_id":"10",
"user_id":"1231",
"type":"student",
"class_name":"Google Class IT",
"subject_id":"1",
"level_id":"1",
"created_date":"2020-08-04 12:01:46",
"created_by":"27",
"branch":"9"
},
{
"id":"1232",
"email":"[email protected]",
"password":"431b3735f40d8d50ed927bf0ff19d56550a74b0b5c35f2894b1f67a2496314c1",
"fullname":"Aslinda Love",
"profile_pic":"user_placeholder.jpg",
"username":"lyndha.22",
"contact_no":"",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"student",
"last_login_date":"2020-08-04 04:01:46",
"registered_date":"2020-08-04 12:01:46",
"branch_code":"9",
"id_relation":"9",
"class_id":"10",
"user_id":"1232",
"type":"student",
"class_name":"Google Class IT",
"subject_id":"1",
"level_id":"1",
"created_date":"2020-08-04 12:01:46",
"created_by":"27",
"branch":"9"
}
],
"no_class_list_tutor":[
],
"no_class_list_student":[
{
"id":"123",
"email":"[email protected]",
"password":"33654d087dec46a22e040ff0d09640be161cc616cc96cb85100676a51d261dd8",
"fullname":"Student Demo",
"profile_pic":"student_placeholder.jpg",
"username":"studentdemo",
"contact_no":"",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"student",
"last_login_date":"2020-04-01 04:38:53",
"registered_date":"2018-10-12 06:29:42",
"branch_code":"9"
},
{
"id":"1166",
"email":"",
"password":"8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92",
"fullname":"Mong Prototype",
"profile_pic":"student_placeholder.jpg",
"username":"mong_prototype",
"contact_no":"98989898",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"student",
"last_login_date":"2020-04-22 07:33:15",
"registered_date":"2020-04-22 07:33:15",
"branch_code":"9"
},
{
"id":"1232",
"email":"[email protected]",
"password":"431b3735f40d8d50ed927bf0ff19d56550a74b0b5c35f2894b1f67a2496314c1",
"fullname":"Aslinda Love",
"profile_pic":"user_placeholder.jpg",
"username":"lyndha.22",
"contact_no":"",
"agency_link":null,
"profession":null,
"status":"1",
"last_login":"student",
"last_login_date":"2020-08-04 04:01:46",
"registered_date":"2020-08-04 12:01:46",
"branch_code":"9"
}
],
"lesson_user":[
],
"lesson_class":[
]
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment