All units page done with DataTables

web/login/index.html

@@ -5,7 +5,6 @@
         <link rel="stylesheet" href="./stylesheets/main.css"/>
         <script src="sugar.js"></script>
         <script>Sugar.extend()</script>
-        <!-- <script src="/main.js" type="module"></script> -->
         <script src="./login/module.js" type="module"></script>
 
     </head>

web/navbar/navbar.html

@@ -6,14 +6,14 @@
         <div class="dropdown">
             <p>Unit</p>
             <div class="dropdown-content">
-                <a>All Units</a>
+                <a href="/units">All Units</a>
                 <a>My Units</a>
             </div>
         </div>
         <div class="dropdown">
             <p>House</p>
             <div class="dropdown-content">
-                <a>All Units</a>
+                <a href="/units">All Units</a>
                 <a>My Units</a>
             </div>
         </div>

web/sass/login.scss

-content-body{
-    grid-area: content;
-}
-
 center-div{
     text-align: center;
     left: 50%;

web/sass/main.scss

 @import "../fontawesome/font_awesome.scss";
 @import "./navbar.scss";
 @import "./login.scss";
+@import "./unit.scss";
 
 body{
     font-family: monospace;
     background-color: rgb(49, 49, 49);
-    color: whitesmoke;
+    color: whitesmoke !important;
     display: grid;
     grid-template:
         "navbar" 100px
         "content" 1fr
         "footer" 200px
+}
+
+content-body{
+    grid-area: content;
 }
\ No newline at end of file

web/sass/navbar.scss

@@ -42,6 +42,10 @@ bar-options{
     box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
     padding: 12px 16px;
     z-index: 1;
+    a{
+        text-decoration: none;
+        color: whitesmoke;
+    }
     a:hover{
         background-color: rgb(59, 15, 15);
     }

web/sass/unit.scss

+
+#units-table{
+    color: whitesmoke;
+    text-align: center;
+    
+}
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+    color: whitesmoke !important;
+}
+table.dataTable.display tbody tr.odd{
+    background-color: rgb(10, 10, 10);
+
+    .sorting_1{
+        background-color: rgb(10, 10, 10);
+
+    }
+}
+
+table.dataTable.display tbody tr.even{
+    background-color: rgb(37, 37, 37);
+    .sorting_1{
+        background-color: rgb(37, 37, 37);
+    }
+}
+.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
+    color: whitesmoke;
+}
+
+.dataTables_wrapper{
+    margin-top: 50px;
+    padding: 10px;
+    outline: 1px black solid;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+}
\ No newline at end of file

web/stylesheets/login.css

-content-body {
-  grid-area: content;
-}
-
 center-div {
   text-align: center;
   left: 50%;

web/stylesheets/login.css.map

-{"version":3,"sourceRoot":"","sources":["../sass/login.scss"],"names":[],"mappings":"AAAA;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;;AAEA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI","file":"login.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/login.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;;AAEA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI","file":"login.css"}
\ No newline at end of file

web/stylesheets/main.css

@@ -67,6 +67,10 @@ bar-options {
   padding: 12px 16px;
   z-index: 1;
 }
+.dropdown-content a {
+  text-decoration: none;
+  color: whitesmoke;
+}
 .dropdown-content a:hover {
   background-color: #3b0f0f;
 }
@@ -99,10 +103,6 @@ bar-user .dropdown:hover {
   background-color: #5f1a1a;
 }
 
-content-body {
-  grid-area: content;
-}
-
 center-div {
   text-align: center;
   left: 50%;
@@ -167,12 +167,50 @@ center-div {
     opacity: 1;
   }
 }
+#units-table {
+  color: whitesmoke;
+  text-align: center;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+  color: whitesmoke !important;
+}
+
+table.dataTable.display tbody tr.odd {
+  background-color: #0a0a0a;
+}
+table.dataTable.display tbody tr.odd .sorting_1 {
+  background-color: #0a0a0a;
+}
+
+table.dataTable.display tbody tr.even {
+  background-color: #252525;
+}
+table.dataTable.display tbody tr.even .sorting_1 {
+  background-color: #252525;
+}
+
+.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
+  color: whitesmoke;
+}
+
+.dataTables_wrapper {
+  margin-top: 50px;
+  padding: 10px;
+  outline: 1px black solid;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+}
+
 body {
   font-family: monospace;
   background-color: #313131;
-  color: whitesmoke;
+  color: whitesmoke !important;
   display: grid;
   grid-template: "navbar" 100px "content" 1fr "footer" 200px;
 }
 
+content-body {
+  grid-area: content;
+}
+
 /*# sourceMappingURL=main.css.map */

web/stylesheets/main.css.map

-{"version":3,"sourceRoot":"","sources":["../fontawesome/font_awesome.scss","../sass/navbar.scss","../sass/login.scss","../sass/main.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAmBF;EACI;IAAK;;EACP;IAAO;;;AC1CX;EACI;EACA;EACA;EACA,eACI;EAGJ;;;AAGJ;EAEI;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAIR;EACI;;AACA;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI;;;AC5ER;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;;AAEA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI;;;AC5DR;EACI;EACA;EACA;EACA;EACA,eACI","file":"main.css"}
+{"version":3,"sourceRoot":"","sources":["../fontawesome/font_awesome.scss","../sass/navbar.scss","../sass/login.scss","../sass/unit.scss","../sass/main.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAmBF;EACI;IAAK;;EACP;IAAO;;;AC1CX;EACI;EACA;EACA;EACA,eACI;EAGJ;;;AAGJ;EAEI;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;;AAIR;EACI;;AACA;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI;;;AChFR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;;AAEA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI;;;AC3DR;EACI;EACA;;;AAGJ;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AC3BJ;EACI;EACA;EACA;EACA;EACA,eACI;;;AAKR;EACI","file":"main.css"}
\ No newline at end of file

web/stylesheets/navbar.css

@@ -38,6 +38,10 @@ bar-options {
   padding: 12px 16px;
   z-index: 1;
 }
+.dropdown-content a {
+  text-decoration: none;
+  color: whitesmoke;
+}
 .dropdown-content a:hover {
   background-color: #3b0f0f;
 }

web/stylesheets/navbar.css.map

-{"version":3,"sourceRoot":"","sources":["../sass/navbar.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA,eACI;EAGJ;;;AAGJ;EAEI;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;;;AAIR;EACI;;AACA;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI","file":"navbar.css"}
+{"version":3,"sourceRoot":"","sources":["../sass/navbar.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA,eACI;EAGJ;;;AAGJ;EAEI;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;;AAIR;EACI;;AACA;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI","file":"navbar.css"}
\ No newline at end of file

web/stylesheets/unit.css

+#units-table {
+  color: whitesmoke;
+  text-align: center;
+}
+
+.dataTables_wrapper .dataTables_paginate .paginate_button {
+  color: whitesmoke !important;
+}
+
+table.dataTable.display tbody tr.odd {
+  background-color: #0a0a0a;
+}
+table.dataTable.display tbody tr.odd .sorting_1 {
+  background-color: #0a0a0a;
+}
+
+table.dataTable.display tbody tr.even {
+  background-color: #252525;
+}
+table.dataTable.display tbody tr.even .sorting_1 {
+  background-color: #252525;
+}
+
+.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
+  color: whitesmoke;
+}
+
+.dataTables_wrapper {
+  margin-top: 50px;
+  padding: 10px;
+  outline: 1px black solid;
+  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+}
+
+/*# sourceMappingURL=unit.css.map */

web/stylesheets/unit.css.map

+{"version":3,"sourceRoot":"","sources":["../sass/unit.scss"],"names":[],"mappings":"AACA;EACI;EACA;;;AAGJ;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;EACA","file":"unit.css"}
\ No newline at end of file

web/units/controller.js

+class UnitTableController{
+    constructor(view){
+        this.view = view;
+
+        this.getAllUnits()
+    }
+
+    async getAllUnits(){
+        try{
+            const units_response = await fetch('/api/unit/all');
+            this.view.drawTable((await units_response.json()).units);
+        }catch(error){
+            console.log(error);
+            alert('Failed to get units')
+        }
+    }
+}
+
+export default UnitTableController;
\ No newline at end of file

web/units/index.html

+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf8"/>
+        <script src="sugar.js"></script>
+        <script>Sugar.extend()</script>
+        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>        
+        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.css">
+        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.21/css/jquery.dataTables.min.css">
+        <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
+        <script src="./units/module.js" type="module"></script>
+        <link rel="stylesheet" href="./stylesheets/main.css"/>
+
+    </head>
+    <body>
+        <nav-placeholder></nav-placeholder>
+        <script src="/navbar/navbar.js"></script>
+        <content-body>
+            <table id="units-table" class="display" style="width: 100%;">
+            </table>
+        </content-body>
+        <script>
+            function changeTab(evt, cityName) {
+                // Declare all variables
+                var i, tabcontent, tablinks;
+
+                // Get all elements with class="tabcontent" and hide them
+                tabcontent = document.getElementsByClassName("tabcontent");
+                for (i = 0; i < tabcontent.length; i++) {
+                    tabcontent[i].style.display = "none";
+                }
+
+                // Get all elements with class="tablinks" and remove the class "active"
+                tablinks = document.getElementsByClassName("tablinks");
+                for (i = 0; i < tablinks.length; i++) {
+                    tablinks[i].className = tablinks[i].className.replace(" active", "");
+                }
+
+                // Show the current tab, and add an "active" class to the button that opened the tab
+                document.getElementById(cityName).style.display = "block";
+                evt.currentTarget.className += " active";
+            }
+        </script>
+    </body>
+</html>

web/units/module.js

+import UnitTableView        from "./view.js"
+import UnitTableController  from "./controller.js"
+
+new UnitTableController(new UnitTableView());
\ No newline at end of file

web/units/view.js

+const columns =[
+    {title: "ID"},
+    {title: "Name"},
+    {title: "Unit Type"},
+    {title: "Stars"},
+    {title: "HP"},
+    {title: "PAP"},
+    {title: "PD"},
+    {title: "SA"},
+    {title: "SD"},
+    {title: "BAP"},
+    {title: "BD"},
+    {title: "PDF"},
+    {title: "SDF"},
+    {title: "BDF"},
+    {title: "Leadership"},
+    {title: "Hero Level"},
+    {title: "Speed"},
+    {title: "Unit Range"},
+    {title: "Ammo"},
+    {title: "Labour"},
+]
+
+class UnitTableView extends EventTarget{
+
+    constructor(){
+        super();
+
+        this.table      = $("#units-table")
+        this.datatable = this.table.DataTable({
+            columns: columns
+        });
+
+        // this.drawTable([{"a":"a",b:"b", c: null, d:null, e:null, f:null, g:null, h:null, i:null, j:null, k:null, l:null, m:null, n:null, o:null, p:null, q:null, r:null, s:null}]);
+    }
+
+    drawTable(data){
+        const data_set = data.map((ele) => Object.values(ele));
+
+        this.datatable.clear().rows.add(data_set).draw();
+    }
+}
+
+export default UnitTableView;
\ No newline at end of file