Skip to content

C
cbdiscord
Commit 4323eed6 authored by Geovanny's avatar Geovanny
Browse files
Options

All units page done with DataTables

parent 80389e09
Hide whitespace changes
Inline Side-by-side
Showing with 244 additions and 20 deletions
web/login/index.html
View file @ 4323eed6
......@@ -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
View file @ 4323eed6
......@@ -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
View file @ 4323eed6
content-body{
grid-area: content;
}
center-div{
text-align: center;
left: 50%;
......
web/sass/main.scss
View file @ 4323eed6
@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
View file @ 4323eed6
......@@ -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 0 → 100644
View file @ 4323eed6
#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
View file @ 4323eed6
content-body {
grid-area: content;
}
center-div {
text-align: center;
left: 50%;
......
web/stylesheets/login.css.map
View file @ 4323eed6
{"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"}
\ No newline at end of file
{"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
View file @ 4323eed6
......@@ -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
View file @ 4323eed6
{"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"}
\ No newline at end of file
{"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
View file @ 4323eed6
......@@ -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
View file @ 4323eed6
{"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"}
\ No newline at end of file
{"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 0 → 100644
View file @ 4323eed6
#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 0 → 100644
View file @ 4323eed6
{"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 0 → 100644
View file @ 4323eed6
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 0 → 100644
View file @ 4323eed6
<!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 0 → 100644
View file @ 4323eed6
import UnitTableView from "./view.js"
import UnitTableController from "./controller.js"
new UnitTableController(new UnitTableView());
\ No newline at end of file
web/units/view.js 0 → 100644
View file @ 4323eed6
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
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment