Skip to content

C
cbdiscord
Commit 5356bdd6 authored by Geovanny's avatar Geovanny
Browse files
Options

Some changes to make TableView more abstract

parent 3fa9e1fd
Hide whitespace changes
Inline Side-by-side
Showing with 170 additions and 14 deletions
web/houses/controller.js 0 → 100644
View file @ 5356bdd6
import Sync from './sync.js';
class HousesController{
constructor(view){
this.view = view;
this.sync = new Sync();
this.getHouses();
}
async getHouses(){
try{
const houses = await this.sync.getHouses();
this.view.drawTable(houses);
}catch(error){
console.log(error);
alert('Failed to retrieve houses');
}
}
}
export default HousesController;
\ No newline at end of file
web/houses/index.html 0 → 100644
View file @ 5356bdd6
<!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">
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="./houses/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-wrapper class="house_table">
<div class="tab">
<button class="join_house">Join House</button>
</div>
<table id="data_table" class="display"></table>
</table-wrapper>
</content-body>
</body>
</html>
web/houses/module.js 0 → 100644
View file @ 5356bdd6
import HousesController from './controller.js';
import HousesView from './view.js';
new HousesController(new HousesView());
\ No newline at end of file
web/houses/sync.js 0 → 100644
View file @ 5356bdd6
class Sync{
async getHouses(){
const houses_response = await fetch('/api/house/all');
const houses = await houses_response.json();
return houses;
}
}
export default Sync;
\ No newline at end of file
web/houses/view.js 0 → 100644
View file @ 5356bdd6
import TableView from "../views/table_view.js"
const house_columns = [
{title: 'ID', term: 'id'},
{title: 'Name', term: 'house_name'},
{title: 'Liege', term: 'liege_username'},
{title: 'Level', term: 'house_level'},
{title: 'Camp Location', term: 'camp_locaiton'}
];
class HousesView extends EventTarget{
constructor(){
super();
this.join_tab = document.querySelector('.tab');
this.join_button = this.join_tab.querySelector('.join_button');
this.houses_table_view = new TableView($('table-wrapper'), house_columns);
}
drawTable(data){
this.houses_table_view.drawTable(data);
}
}
export default HousesView;
\ No newline at end of file
web/myunits/index.html
View file @ 5356bdd6
...@@ -6,7 +6,6 @@ ...@@ -6,7 +6,6 @@
<script>Sugar.extend()</script> <script>Sugar.extend()</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></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.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 type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.21/js/jquery.dataTables.js"></script>
<script src="./myunits/module.js" type="module"></script> <script src="./myunits/module.js" type="module"></script>
<link rel="stylesheet" href="./stylesheets/main.css"/> <link rel="stylesheet" href="./stylesheets/main.css"/>
...@@ -21,7 +20,7 @@ ...@@ -21,7 +20,7 @@
<button id="my_units" class="tablinks active">My Units</button> <button id="my_units" class="tablinks active">My Units</button>
<button id="add_units" class="tablinks">Units to Add</button> <button id="add_units" class="tablinks">Units to Add</button>
</div> </div>
<table id="units_table" class="display my_units"></table> <table id="data_table" class="display my_units"></table>
</table-wrapper> </table-wrapper>
<unit-detail> <unit-detail>
<image class="unit_img"></image> <image class="unit_img"></image>
......
web/myunits/view.js
View file @ 5356bdd6
...@@ -33,7 +33,7 @@ class MyUnitView extends EventTarget{ ...@@ -33,7 +33,7 @@ class MyUnitView extends EventTarget{
this.my_units_add = document.querySelector("#my_units"); this.my_units_add = document.querySelector("#my_units");
this.add_units = document.querySelector("#add_units"); this.add_units = document.querySelector("#add_units");
this.unit_table_view = new TableView(unit_columns, true); this.unit_table_view = new TableView($('table-wrapper'), unit_columns, true);
this.unit_detail_view = new UnitDetailView(); this.unit_detail_view = new UnitDetailView();
this.my_units_tab = true; this.my_units_tab = true;
this.my_units_add.addEventListener("click", (event) =>{ this.my_units_add.addEventListener("click", (event) =>{
......
web/navbar/navbar.html
View file @ 5356bdd6
...@@ -10,8 +10,12 @@ ...@@ -10,8 +10,12 @@
<a href="/myunits">My Units</a> <a href="/myunits">My Units</a>
</div> </div>
</div> </div>
<div class="bar-element"> <div class="dropdown bar-element">
<a onclick="alert('Not implemented yet')">House</a> <p>Houses</p>
<div class="dropdown-content">
<a href="/houses">All Houses</a>
<a>My Units</a>
</div>
</div> </div>
</bar-options> </bar-options>
<bar-user> <bar-user>
......
web/sass/house.scss 0 → 100644
View file @ 5356bdd6
.house_table{
position: absolute;
text-align: center;
left: 50%;
width: 1000px;
max-width: 1000px;
margin-left: -500px;
.join_house{
float: right;
margin: 5px;
color: whitesmoke;
font-size: 15px;
background-color: grey;
border-radius: 3px;
}
}
\ No newline at end of file
web/sass/main.scss
View file @ 5356bdd6
...@@ -3,6 +3,7 @@ ...@@ -3,6 +3,7 @@
@import "./table.scss"; @import "./table.scss";
@import "./login.scss"; @import "./login.scss";
@import "./unit.scss"; @import "./unit.scss";
@import "./house.scss";
body{ body{
font-family: Roboto; font-family: Roboto;
......
web/stylesheets/house.css 0 → 100644
View file @ 5356bdd6
.house_table {
position: absolute;
text-align: center;
left: 50%;
width: 1000px;
max-width: 1000px;
margin-left: -500px;
}
.house_table .join_house {
float: right;
margin: 5px;
color: whitesmoke;
font-size: 15px;
background-color: grey;
border-radius: 3px;
}
/*# sourceMappingURL=house.css.map */
web/stylesheets/house.css.map 0 → 100644
View file @ 5356bdd6
{"version":3,"sourceRoot":"","sources":["../sass/house.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA","file":"house.css"}
\ No newline at end of file
web/stylesheets/main.css
View file @ 5356bdd6
...@@ -352,6 +352,23 @@ unit-detail { ...@@ -352,6 +352,23 @@ unit-detail {
border: 2px solid #530303; border: 2px solid #530303;
} }
.house_table {
position: absolute;
text-align: center;
left: 50%;
width: 1000px;
max-width: 1000px;
margin-left: -500px;
}
.house_table .join_house {
float: right;
margin: 5px;
color: whitesmoke;
font-size: 15px;
background-color: grey;
border-radius: 3px;
}
body { body {
font-family: Roboto; font-family: Roboto;
background-color: #313131; background-color: #313131;
......
web/stylesheets/main.css.map
View file @ 5356bdd6
{"version":3,"sourceRoot":"","sources":["../fontawesome/font_awesome.scss","../sass/navbar.scss","../sass/table.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;EACA;;;AAGJ;EAEI;EACA;EACA;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;;AAKJ;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI;;;ACtGR;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EAEA,eACI;;;AClCR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;EACA;EACA;;AACA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI;;;AAGN;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;ACnFJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;EACI,eACI;EAGJ;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI;;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;AC7FJ;EACI;EACA;EACA;EACA;EACA,eACI;;;AAKR;EACI;EACA;;;AAGJ;EACI;EACA;;AACA;EACI","file":"main.css"} {"version":3,"sourceRoot":"","sources":["../fontawesome/font_awesome.scss","../sass/navbar.scss","../sass/table.scss","../sass/login.scss","../sass/unit.scss","../sass/house.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;EACA;;;AAGJ;EAEI;EACA;EACA;;AACA;EACI;EACA;EAEA;EACA;;;AAIR;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;EACA;EACA;EACA;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACI;EACA;;AAEJ;EACI;;;AAKJ;EACI;;;AAIR;EACI;EACA;EACA;;AACA;EACI;EACA;;;AAIR;EACI;;;AAKA;EACI;;AAEJ;EACI;;;ACtGR;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EAEA,eACI;;;AClCR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EAEA;EACA;EACA;;AACA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;EACA;EACA;EACA;EACA;;;AAGJ;EACI;AAA0B;;;AAG9B;AACA;EACI;IAAM;;EACN;IAAI;;;AAGN;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;;ACnFJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAEJ;EACI;EACA;EACA;;;AAGJ;EACI,eACI;EAGJ;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI;;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGR;EACI;EACA;;;AAEJ;EACI;EACA;;;AAEJ;EACI;EACA;;;ACnGJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;;ACPR;EACI;EACA;EACA;EACA;EACA,eACI;;;AAKR;EACI;EACA;;;AAGJ;EACI;EACA;;AACA;EACI","file":"main.css"}
\ No newline at end of file \ No newline at end of file
web/units/index.html
View file @ 5356bdd6
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
<script src="/navbar/navbar.js"></script> <script src="/navbar/navbar.js"></script>
<content-body> <content-body>
<table-wrapper> <table-wrapper>
<table id="units_table" class="display"></table> <table id="data_table" class="display"></table>
</table-wrapper> </table-wrapper>
</content-body> </content-body>
......
web/units/view.js
View file @ 5356bdd6
...@@ -28,7 +28,7 @@ class UnitTableView extends EventTarget{ ...@@ -28,7 +28,7 @@ class UnitTableView extends EventTarget{
constructor(){ constructor(){
super(); super();
this.table_view = new TableView(default_columns); this.table_view = new TableView($('table-wrapper'), default_columns);
} }
drawTable(data){ drawTable(data){
......
web/views/table_view.js
View file @ 5356bdd6
class TableView extends EventTarget{ class TableView extends EventTarget{
constructor(columns, overflow){ constructor(element, columns, overflow){
super(); super();
if(!element)
{
throw Error('No element passed');
}
if(!columns){ if(!columns){
throw Error('Columns are needed'); throw Error('Columns are needed');
} }
this.columns = columns; this.element = element;
this.table = $("#units_table") this.columns = columns;
this.table = element.find('#data_table');
this.datatable = this.table.DataTable({ this.datatable = this.table.DataTable({
columns: this.columns columns: this.columns
}); });
if(overflow){ if(overflow){
this.$overflow_div = $("<div></div>").addClass("overflow_table"); this.$overflow_div = $("<div></div>").addClass("overflow_table");
$("#units_table_filter").after(this.$overflow_div); this.element.find('#data_table_filter').after(this.$overflow_div);
this.table.detach(); this.table.detach();
this.$overflow_div.append(this.table); this.$overflow_div.append(this.table);
} }
const datatable = this.datatable; const datatable = this.datatable;
const view = this; const view = this;
$("#units_table tbody").on("click", "tr", function(){ this.table.children("#units_table tbody").on("click", "tr", function(){
const index = datatable.row(this).index(); const index = datatable.row(this).index();
view.dispatchEvent(new CustomEvent("row_click", {detail: index})); view.dispatchEvent(new CustomEvent("row_click", {detail: index}));
}) })
...@@ -28,7 +35,8 @@ class TableView extends EventTarget{ ...@@ -28,7 +35,8 @@ class TableView extends EventTarget{
const data_set = data.map((ele) => { const data_set = data.map((ele) => {
var d = []; var d = [];
this.columns.forEach((col) =>{ this.columns.forEach((col) =>{
d.push(ele[col.term]); const t = ele[col.term] !== undefined ? ele[col.term] : '-'
d.push(t);
}) })
return d; return d;
}); });
......
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