12 Jan 2023

1) Updated Bootstrap
2) Updated Material Icons
3) Updated PHP-JWT
4) Cosmetic updates
5) Added import class feature
6) Added Import sample CSV

Author: code-boxx

CB-worker.js

@@ -13,6 +13,7 @@ self.addEventListener("install", evt => {
       "assets/ico-512.png",
       "assets/favicon.png",
       "assets/login.jpg",
+      "assets/forgot.jpg",
       // (A3) COMMON INTERFACE
       "assets/PAGE-cb.js",
       "assets/CB-selector.css",
@@ -28,6 +29,7 @@ self.addEventListener("install", evt => {
       "assets/PAGE-login.js",
       "assets/A-class.js",
       "assets/A-class-attend.js",
+      "assets/A-class-import.js",
       "assets/A-course.js",
       "assets/A-course-import.js",
       "assets/A-course-user.js",

README.md

@@ -5,18 +5,18 @@ I Was Here is a simple PHP Student Attendance Management System. This is not a "
 ## FEATURES
 1) Users management.
 2) Take attendance manually, or let students scan a QR code.
-3) Progressive web app.
+3) Installble progressive web app.
 4) CSV reports.
 <br><br>
 
 ## SCREENSHOTS
 <p float="left">
-  <img width="250" style="inline-block" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-1.png">
-  <img width="250" style="inline-block" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-2.png">
-  <img width="250" style="inline-block" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-3.png">
-  <img width="250" style="inline-block" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-4.png">
-  <img width="250" style="inline-block" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-5.png">
-  <img width="250" style="inline-block" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-6.png">
+  <img width="250" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-1a.png">
+  <img width="250" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-2a.png">
+  <img width="250" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-3a.png">
+  <img width="250" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-4a.png">
+  <img width="250" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-5a.png">
+  <img width="250" src="https://github.com/code-boxx/I-Was-Here/blob/main/assets/iwh-6a.png">
 </p><br>
 
 ## REQUIREMENTS
@@ -54,4 +54,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

lib/0a-dummy-users.csv assets/0a-dummy-users.csvlib/0a-dummy-users.csv renamed to assets/0a-dummy-users.csv

@@ -0,0 +1,5 @@
+ENG-123,2077-01-01 12:00,joe@doe.com,First class
+ENG-123,2077-01-08 13:00,joe@doe.com,Optional description
+ENG-123,2077-01-15 14:00,joe@doe.com,
+ENG-123,2077-02-23 15:00,joe@doe.com,
+ENG-123,2077-02-02 16:00,joe@doe.com,Last class

lib/0b-dummy-courses.csv assets/0b-dummy-courses.csvlib/0b-dummy-courses.csv renamed to assets/0b-dummy-courses.csv

@@ -0,0 +1,115 @@
+var cimport = {
+  // (A) LOAD "IMPORT CLASS" PAGE
+  init : () => {
+    cb.page(1);
+    cb.load({
+      page : "a/class/import",
+      target : "cb-page-2"
+    });
+    return false;
+  },
+
+  // (B) READ CSV FILE
+  read : () => {
+    // (B1) HTML ELEMENTS
+    let hSelect = document.getElementById("class-import-select"),
+    hFile = document.getElementById("class-import-file"),
+    hTable = document.getElementById("class-import-table"),
+    hList = document.getElementById("class-import-list");
+    hSelect.classList.add("d-none");
+    hTable.classList.remove("d-none");
+    
+    // (B2) READ SELECTED FILE
+    let reader = new FileReader(),
+    vMail = new RegExp("[a-z0-9]+@[a-z]+\.[a-z]{2,3}"),
+    vDate = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/,
+    csv = hFile.files[0], row, col, err, valid = false;
+
+    reader.addEventListener("loadend", () => { try {
+      // (B2-1) READ ROW-BY-ROW INTO HTML + CHECK VALID
+      for (let r of CSV.parse(reader.result)) {
+        row = document.createElement("tr");
+        if (r.length != 4) {
+          row.className = "table-danger fw-bold";
+          row.innerHTML = `<td colspan="4">?</td><td>Invalid Row</td>`;
+        } else {
+          err = null;
+          for (let i=0; i<4; i++) {
+            col = document.createElement("td");
+            col.innerHTML = r[i]==null?"":r[i];
+            row.appendChild(col);
+          }
+          if (err==null && (r[0]=="" || r[0]==null)) { err = "Invalid Code"; }
+          if (err==null && !vDate.test(r[1])) { err = "Invalid Date"; }
+          if (err==null && !vMail.test(r[2])) { err = "Invalid Email"; }
+          col = document.createElement("td");
+          col.innerHTML = err==null ? "" : err;
+          row.appendChild(col);
+          if (err==null) {
+            row.className = "valid";
+            valid = true;
+          } else { row.className = "table-danger fw-bold"; }
+        }
+        hList.appendChild(row);
+      }
+
+      // (B2-2) START BUTTON
+      if (valid) {
+        row = document.createElement("tr");
+        row.innerHTML = `<td colspan="5">
+          <button id="class-import-go" class="btn btn-primary" onclick="cimport.go(1)">Start Import</button>
+        </td>`;
+        hList.appendChild(row);
+      }
+    } catch (err) {
+      cb.modal("Error opening CSV file", err.message)
+      console.error(err);
+    }});
+    reader.readAsText(csv);
+  },
+
+  // (C) START IMPORT
+  go : first => {
+    // (C1) BLOCK SCREEN & DISABLE BUTTON ON INIT CALL
+    if (first) {
+      document.getElementById("class-import-go").disabled = true;
+      cb.loading(true);
+    }
+
+    // (C2) IMPORT ENTRY
+    let row = document.querySelector("#class-import-list .valid");
+    if (row!=null) {
+      let col = row.querySelectorAll("td");
+      cb.api({
+        mod : "classes", req : "import",
+        passmsg : false, loading : false, nofail : true,
+        data : {
+          code : col[0].innerHTML,
+          date : col[1].innerHTML,
+          email : col[2].innerHTML,
+          desc : col[3].innerHTML
+        },
+        onpass : () => {
+          row.classList.remove("valid");
+          col[4].innerHTML = "OK";
+          cimport.go();
+        },
+        onfail : msg => {
+          row.className = "table-danger fw-bold";
+          col[4].innerHTML = msg;
+          cimport.go();
+        }
+      });
+    }
+
+    // (C3) ALL DONE
+    else {
+      let btn = document.getElementById("class-import-go");
+      btn.innerHTML = "Done - Go Back";
+      btn.onclick = () => cb.page(0);
+      btn.disabled = false;
+      classes.list(true);
+      cb.loading(false);
+    }
+  }
+};

lib/0c-dummy-course-users.csv assets/0c-dummy-course-users.csvlib/0c-dummy-course-users.csv renamed to assets/0c-dummy-course-users.csv

@@ -2,8 +2,8 @@ var classes = {
   // (A) SHOW COURSE CLASSES PAGE
   pg : 1, // current page
   find : "", // current search
-  list : () => {
-    cb.page(0);
+  list : silent => {
+    if (silent!==true) { cb.page(0); }
     cb.load({
       page : "a/class/list",
       target : "class-list",

assets/0d-dummy-classes.csv

@@ -38,8 +38,8 @@ var cimport = {
             col.innerHTML = r[i]==null?"":r[i];
             row.appendChild(col);
           }
-          if (err==null && r[0]=="") { err = "Invalid Code"; }
-          if (err==null && r[1]=="") { err = "Invalid Name"; }
+          if (err==null && (r[0]=="" || r[0]==null)) { err = "Invalid Code"; }
+          if (err==null && (r[1]=="" || r[1]==null)) { err = "Invalid Name"; }
           if (err==null && !vDate.test(r[3])) { err = "Invalid Start"; }
           if (err==null && !vDate.test(r[4])) { err = "Invalid End"; }
           if (err==null) { if (new Date(r[4]) < new Date(r[3])) { err = "End Earlier Than Start"; }}