Grouping subjects by year in menu

main.js

@@ -35,7 +35,7 @@ function info () { return GM_info }
 
 var data // all data, which is in the resource txt
 var addEventListener // add event listener function
-const lastChangeLog = 'Néhány szerkezeti átalakítás, és bugfix. Ha valami elromlott akkor pls report, thanx'
+const lastChangeLog = 'Félév szerinti csoportosítás menüben'
 const serverAdress = 'https://qmining.frylabs.net/'
 
 // forcing pages for testing. unless you test, do not set these to true!
@@ -212,28 +212,50 @@ class Subject {
     this.active = false
   }
 
-  active () {
+  setIndex (i) {
-    this.active = true
-  }
-
-  set index (i) {
     this.index = i
   }
 
-  get index () {
+  getIndex () {
-    return this.index
+    return this.index || -1
   }
 
   get length () {
     return this.Questions.length
   }
 
+  markActive () {
+    this.active = true
+  }
+
+  getIfActive () {
+    return this.active
+  }
+
   AddQuestion (q) {
     assert(q)
 
     this.Questions.push(q)
   }
 
+  getSubjNameWithoutYear () {
+    let t = this.Name.split(' - ')
+    if (t[0].match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{1}$/i)) {
+      return t[1] || ''
+    } else {
+      return ''
+    }
+  }
+
+  getYear () {
+    let t = this.Name.split(' - ')[0]
+    if (t.match(/^[0-9]{4}\/[0-9]{2}\/[0-9]{1}$/i)) {
+      return t
+    } else {
+      return ''
+    }
+  }
+
   Search (q, img) {
     assert(q)
 
@@ -1086,9 +1108,9 @@ function NLoad (resource, cwith) {
 
     for (let i = 0; i < d.Subjects.length; i++) {
       let s = new Subject(d.Subjects[i].Name)
+      s.setIndex(i)
       if (getVal('Is' + i + 'Active')) {
-        s.active()
+        s.markActive()
-        s.index = i
         var j = 0
         for (j = 0; j < d.Subjects[i].Questions.length; j++) {
           var currQ = d.Subjects[i].Questions[j]
@@ -1894,54 +1916,103 @@ function ShowMenuList () {
     tbl.style.width = '98%'
 
     // adding headers ---------------------------------------------------------------------------------------------------------------
-    var subjTable = document.createElement('table')
+    var subjTable = document.createElement('div')
     subjTable.style.margin = fiveMargin
     subjTable.style.textAlign = 'left'
     subjTable.style.width = '98%'
 
-    var tr = subjTable.insertRow()
+    // var tr = subjTable.insertRow()
-    var header1 = tr.insertCell()
+    // var header1 = tr.insertCell()
 
-    var headerSubjInfoParagraph = CreateNodeWithText(header1, 'Tárgynév [darab kérdés]', 'center')
+    // var headerSubjInfoParagraph = CreateNodeWithText(header1, 'Tárgynév [darab kérdés]', 'center')
-    headerSubjInfoParagraph.style.margin = fiveMargin // fancy margin
+    // headerSubjInfoParagraph.style.margin = fiveMargin // fancy margin
 
-    var header2 = tr.insertCell()
+    // var header2 = tr.insertCell()
-    var headerSubjInfoParagraph2 = CreateNodeWithText(header2, 'Aktív')
+    // var headerSubjInfoParagraph2 = CreateNodeWithText(header2, 'Aktív')
-    headerSubjInfoParagraph2.style.margin = fiveMargin // fancy margin
+    // headerSubjInfoParagraph2.style.margin = fiveMargin // fancy margin
 
     if (data && data.length > 0) {
-      // TODO: group here
+      let grouped = data.Subjects.reduce((res, s) => {
-      // let sorted = data.Subjects.sort((x) => {
+        let sName = s.getSubjNameWithoutYear()
+        if (sName) {
+          if (!res[sName]) {
+            res[sName] = []
+          }
+          res[sName].push(s)
+        } else {
+          res.others.push(s)
+        }
+        return res
+      }, {
+        others: []
+      })
 
-      // })
+      let collapsibles = []
-      let sorted = data.Subjects
 
-      sorted.forEach((subj, i) => {
+      Object.entries(grouped).forEach(([subjName, subjGroup]) => {
-        var subjRow = subjTable.insertRow()
+        let b = CreateNodeWithText(subjTable, subjName, 'button')
-        subjRow.style.border = '1px solid #131319'
+        b.style.backgroundColor = '#222d32'
+        b.style.color = '#ffffff'
+        b.style.cursor = 'pointer'
+        b.style.padding = '5px'
+        b.style.width = '100%'
+        b.style.border = 'none'
+        b.style.textAlign = 'left'
+        b.style.outline = 'none'
+        collapsibles.push(b)
 
-        var td = subjRow.insertCell()
+        let content = document.createElement('div')
-        var text = subj.Name
+        content.style.padding = '0 18px'
+        content.style.overflow = 'hidden'
+        content.style.backgroundColor = '#222d32'
+        content.style.borderColor = '#212127'
+        content.style.borderStyle = 'solid'
+        content.style.borderWidth = '5px'
+        let ifGroupActive = subjGroup.some((x) => {
+          return x.getIfActive()
+        })
+        content.style.display = ifGroupActive ? 'block' : 'none'
+
+        subjTable.appendChild(content)
+
+        subjGroup.forEach((subj) => {
+          let tbl = document.createElement('table')
+          content.appendChild(tbl)
+
+          var row = tbl.insertRow()
+          let td = row.insertCell()
+          let text = subj.getYear() || subj.Name
           if (subj.length !== 0) { text += ' [ ' + subj.length + 'db ]' }
+          CreateNodeWithText(td, text)
 
-        var textBox = CreateNodeWithText(td, text)
+          td = row.insertCell()
-
+          let checkbox = document.createElement('input') // new paragraph
-        textBox.style.margin = fiveMargin // fancy margin
-
-        td = subjRow.insertCell()
-        var checkbox = document.createElement('input') // new paragraph
           checkbox.type = 'checkbox'
           checkbox.style.background = 'white'
           checkbox.style.margin = '5px 5px 5px 5px' // fancy margin
           td.appendChild(checkbox) // adding text box to main td
 
           checkbox.checked = subj.active
+          let i = subj.getIndex()
           checkbox.setAttribute('id', 'HelperTextNode' + i)
           checkbox.addEventListener('click', function () {
             var checked = document.getElementById('HelperTextNode' + i).checked
             data.ChangeActive(i, checked)
           }) // adding click
         })
+      })
+
+      collapsibles.forEach((x) => {
+        x.addEventListener('click', function () {
+          this.classList.toggle('active')
+          var content = this.nextElementSibling
+          if (content.style.display === 'block') {
+            content.style.display = 'none'
+          } else {
+            content.style.display = 'block'
+          }
+        })
+      })
 
       var scrollDiv = document.createElement('div')
       scrollDiv.style.width = '100%'