Browse Source

Automatically build HTML DOM via JS

2xB 2 years ago
parent
commit
35aa7a57db
3 changed files with 75 additions and 42 deletions
  1. 70 9
      viewer/archive/archiveviewer.js
  2. 2 24
      viewer/archive/new_monitor.html
  3. 3 9
      viewer/archive/old_monitor.html

+ 70 - 9
viewer/archive/archiveviewer.js

@@ -48,40 +48,101 @@ function date_to_unix(value) {
 }
 
 class ArchiveView {
-    constructor(mindate, selecttype, dateselector, range_from, range_to, rangespan, commitsSelect, content, token, url, project_id, branch, page_path, index) {
+    constructor(mindate, maindiv, token, url, project_id, branch, page_path, index) {
+       
         this.token = token
         this.url = url
         this.project_id = project_id
         this.branch = branch
         
+        this.maindiv = maindiv
+        
+        var outer_span = document.createElement("span")
+        this.maindiv.appendChild(outer_span)
+        
+        // ---
+        
+        this.selecttype = document.createElement("select")
+        outer_span.appendChild(this.selecttype)
+        
+        var option_date = document.createElement("option")
+        option_date.value = "date"
+        option_date.innerHTML = "Date"
+        this.selecttype.appendChild(option_date)
+        
+        var option_range = document.createElement("option")
+        option_range.value = "range"
+        option_range.innerHTML = "Range"
+        this.selecttype.appendChild(option_range)
+        
+        this.selecttype.addEventListener("input",(() => this.on_selecttype_selected()))
+        
+        // ---
+        
+        outer_span.append(" (" + mindate + " to today): ")
+        
+        this.dateselector = document.createElement("input")
+        this.dateselector.type = "date"
+        
         // Alternative, doesn't allow selecting today in first two hours of day:
         // var maxdate = new Date().toISOString().split("T")[0]
         var maxdate = new Date().toLocaleDateString('en-ca')
-        this.dateselector = dateselector
         this.dateselector.value = ""
         this.dateselector.max = maxdate
         this.dateselector.addEventListener("input",((event) => this.on_date_selected(event)))
         
-        this.range_from = range_from
+        outer_span.appendChild(this.dateselector)
+        
+        // ---
+        
+        this.rangespan = document.createElement("span")
+        outer_span.appendChild(this.rangespan)
+        
+        
+        this.range_from = document.createElement("input")
+        this.range_from.type = "datetime-local"
+        
         this.range_from.value = ""
         this.range_from.min = mindate + "T00:00"
         this.range_from.max = maxdate + "T23:59"
         this.range_from.addEventListener("input",(() => this.on_range_from_selected()))
         
-        this.range_to = range_to
+        this.rangespan.appendChild(this.range_from)
+        
+        
+        this.rangespan.insertAdjacentHTML('beforeend', " – ")
+        
+        
+        this.range_to = document.createElement("input")
+        this.range_to.type = "datetime-local"
+        this.range_to.disabled = true
+        
         this.range_to.value = ""
         this.range_to.max = maxdate + "T23:59"
         this.range_to.addEventListener("input",(() => this.on_range_to_selected()))
+
+        this.rangespan.appendChild(this.range_to)
         
-        this.rangespan = rangespan
+        // ---
         
-        this.selecttype = selecttype
-        this.selecttype.addEventListener("input",(() => this.on_selecttype_selected()))
+        outer_span.append(" | Version: ")
         
-        this.commitsSelect = commitsSelect
+        this.commitsSelect = document.createElement("select")
+        this.commitsSelect.className = "archive commits"
+
         this.commitsSelect.addEventListener("input",(() => this.on_commit_selected()))
+
+        outer_span.appendChild(this.commitsSelect)
+        
+        outer_span.insertAdjacentHTML('beforeend', "<br/><i>Note: Large time ranges can slow the version selection down.</i>")
+        
+        // ---
+        
+        this.content = document.createElement("iframe")
+        this.content.className = "archive content"
+        this.content.height = "100%"
         
-        this.content = content
+        this.maindiv.appendChild(this.content)
         
         this.page_path = page_path
         

+ 2 - 24
viewer/archive/new_monitor.html

@@ -9,23 +9,7 @@
     <header>
         <h1>(New) Status Monitor | Archive</h1>
     </header>
-    <div class="archive main">
-        <span>
-          <select id="selecttype">
-            <option value="date">Date</option>
-            <option value="range">Range</option>
-          </select>
-          (2021-12-21 to today): <input type="date" id="dateselector"/>
-          <span id="rangespan">
-            <input type="datetime-local" id="range_from"/>
-            &ndash;
-            <input type="datetime-local" id="range_to" disabled />
-          </span>
-          | Version:
-          <select class="archive commits" id="commitSelect"></select> <br/>
-          <i>Note: Large time ranges can slow the version selection down.</i>
-        </span>
-        <iframe class="archive content" height="100%" id="content"></iframe>
+    <div id="maindiv" class="archive main">
     </div>
     <footer>
         <a href="../index.html">Overview&nbsp;page</a> |
@@ -37,13 +21,7 @@
     <script>
     new ArchiveView(
         mindate = "2021-12-21",
-        selecttype = document.getElementById("selecttype"),
-        dateselector = document.getElementById("dateselector"),
-        range_from = document.getElementById("range_from"),
-        range_to = document.getElementById("range_to"),
-        range_to = document.getElementById("rangespan"),
-        commitsSelect = document.getElementById("commitSelect"),
-        content = document.getElementById("content"),
+        maindiv = document.getElementById("maindiv"),
         token = "MwoSWmkk76mcyxSGR2Ci",
         url = "nuserv.uni-muenster.de:8443",
         id = 513,

+ 3 - 9
viewer/archive/old_monitor.html

@@ -9,12 +9,7 @@
     <header>
         <h1>Old Status Monitor | Archive</h1>
     </header>
-    <div class="archive main">
-        <span>
-          Date (2021-12-21 to today): <input type="date" min="2021-12-21" id="dateselector"/> | Version:
-          <select class="archive commits" id="commitSelect"></select>
-        </span>
-        <iframe class="archive content" height="100%" id="content"></iframe>
+    <div id="maindiv" class="archive main">
     </div>
     <footer>
         <a href="../index.html">Overview&nbsp;page</a> |
@@ -25,9 +20,8 @@
     </footer>
     <script>
     new ArchiveView(
-        dateselector = document.getElementById("dateselector"),
-        commitsSelect = document.getElementById("commitSelect"),
-        content = document.getElementById("content"),
+        mindate = "2021-12-21",
+        maindiv = document.getElementById("maindiv"),
         token = "9yZWx_AEKEHFS2Rj9Ez7",
         url = "nuserv.uni-muenster.de:8443",
         id = 514,