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
Show 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 @@
<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="./myunits/module.js" type="module"></script>
<link rel="stylesheet" href="./stylesheets/main.css"/>
......@@ -21,7 +20,7 @@
<button id="my_units" class="tablinks active">My Units</button>
<button id="add_units" class="tablinks">Units to Add</button>
</div>
<table id="units_table" class="display my_units"></table>
<table id="data_table" class="display my_units"></table>
</table-wrapper>
<unit-detail>
<image class="unit_img"></image>
......
web/myunits/view.js
View file @ 5356bdd6
......@@ -33,7 +33,7 @@ class MyUnitView extends EventTarget{
this.my_units_add = document.querySelector("#my_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.my_units_tab = true;
this.my_units_add.addEventListener("click", (event) =>{
......
web/navbar/navbar.html
View file @ 5356bdd6
......@@ -10,8 +10,12 @@
<a href="/myunits">My Units</a>
</div>
</div>
<div class="bar-element">
<a onclick="alert('Not implemented yet')">House</a>
<div class="dropdown bar-element">
<p>Houses</p>
<div class="dropdown-content">
<a href="/houses">All Houses</a>
<a>My Units</a>
</div>
</div>
</bar-options>
<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 @@
@import "./table.scss";
@import "./login.scss";
@import "./unit.scss";
@import "./house.scss";
body{
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 {
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 {
font-family: Roboto;
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"}
\ No newline at end of file
{"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
web/units/index.html
View file @ 5356bdd6
......@@ -17,7 +17,7 @@
<script src="/navbar/navbar.js"></script>
<content-body>
<table-wrapper>
<table id="units_table" class="display"></table>
<table id="data_table" class="display"></table>
</table-wrapper>
</content-body>
......
web/units/view.js
View file @ 5356bdd6
......@@ -28,7 +28,7 @@ class UnitTableView extends EventTarget{
constructor(){
super();
this.table_view = new TableView(default_columns);
this.table_view = new TableView($('table-wrapper'), default_columns);
}
drawTable(data){
......
web/views/table_view.js
View file @ 5356bdd6
class TableView extends EventTarget{
constructor(columns, overflow){
constructor(element, columns, overflow){
super();
if(!element)
{
throw Error('No element passed');
}
if(!columns){
throw Error('Columns are needed');
}
this.element = element;
this.columns = columns;
this.table = $("#units_table")
this.table = element.find('#data_table');
this.datatable = this.table.DataTable({
columns: this.columns
});
if(overflow){
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.$overflow_div.append(this.table);
}
const datatable = this.datatable;
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();
view.dispatchEvent(new CustomEvent("row_click", {detail: index}));
})
......@@ -28,7 +35,8 @@ class TableView extends EventTarget{
const data_set = data.map((ele) => {
var d = [];
this.columns.forEach((col) =>{
d.push(ele[col.term]);
const t = ele[col.term] !== undefined ? ele[col.term] : '-'
d.push(t);
})
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