Skip to content

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

Abstracted out table view and some fixes

parent 53b1d3f5
Hide whitespace changes
Inline Side-by-side
Showing with 230 additions and 141 deletions
web/myunits/index.html
View file @ d0d93a48
......@@ -21,7 +21,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" style="max-width: 500px;"></table>
<table id="units_table" class="display my_units"></table>
</table-wrapper>
<unit-detail>
<image class="unit_img"></image>
......
web/myunits/view.js
View file @ d0d93a48
import UnitTableView from "../units/view.js";
import TableView from "../views/table_view.js";
import UnitDetailView from "./detail_view.js"
const unit_columns =[
......@@ -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 UnitTableView(unit_columns);
this.unit_table_view = new TableView(unit_columns, true);
this.unit_detail_view = new UnitDetailView();
this.my_units_tab = true;
this.my_units_add.addEventListener("click", (event) =>{
......
web/sass/main.scss
View file @ d0d93a48
@import "../fontawesome/font_awesome.scss";
@import "./navbar.scss";
@import "./table.scss";
@import "./login.scss";
@import "./unit.scss";
......
web/sass/table.scss 0 → 100644
View file @ d0d93a48
.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{
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
table_component{
margin-top: 50px;
grid-area: content;
grid-template:
"table details"
/1fr 200px
;
}
\ No newline at end of file
web/sass/unit.scss
View file @ d0d93a48
......@@ -2,34 +2,7 @@
#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{
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
margin-top: 10px;
}
.tab2{
......@@ -37,33 +10,44 @@ table.dataTable.display tbody tr.even{
border: 1px black solid;
}
table_component{
margin-top: 50px;
grid-area: content;
.my_units{
background-color: rgb(141, 11, 11);
max-width: 600px;
}
.overflow_table{
overflow: auto;
max-width: 100%;
width: 100%;
}
table-component{
grid-template:
"table details"
/1fr 200px
"table details" 600px
/1fr 600px
;
display: grid;
position: relative;
}
table_wrapper{
table-wrapper{
grid-area: table;
width: 100%;
display: inline-block;
margin-top: 50px;
margin-left: 50px;
margin-right: 25px;
min-width: 300px;
}
unit-detail{
grid-area: details;
text-align: center;
position: relative;
position: absolute;
display: inline-block;
background-color: rgb(27, 27, 27);
height: 600px;
width: 500px;
left: 50%;
width: 100%;
margin-top: 50px;
margin-left: -250px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding-top: 20px;
......@@ -114,4 +98,4 @@ unit-detail{
.delete_button{
background-color: red !important;
border: 2px solid rgb(83, 3, 3);
}
\ No newline at end of file
}
web/stylesheets/main.css
View file @ d0d93a48
......@@ -124,6 +124,40 @@ bar-user .dropdown:hover {
background-color: #5f1a1a;
}
.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 {
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
}
center-div {
text-align: center;
left: 50%;
......@@ -216,64 +250,49 @@ center-div {
#units_table {
color: whitesmoke;
text-align: center;
margin-top: 10px;
}
.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;
.tab2 {
text-align: center;
border: 1px black solid;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
color: whitesmoke;
.my_units {
background-color: #8d0b0b;
max-width: 600px;
}
.dataTables_wrapper {
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.tab2 {
text-align: center;
border: 1px black solid;
.overflow_table {
overflow: auto;
max-width: 100%;
width: 100%;
}
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
table-component {
grid-template: "table details" 600px/1fr 600px;
display: grid;
position: relative;
}
table_wrapper {
table-wrapper {
grid-area: table;
width: 100%;
display: inline-block;
margin-top: 50px;
margin-left: 50px;
margin-right: 25px;
min-width: 300px;
}
unit-detail {
grid-area: details;
text-align: center;
position: relative;
position: absolute;
display: inline-block;
background-color: #1b1b1b;
height: 600px;
width: 500px;
left: 50%;
width: 100%;
margin-top: 50px;
margin-left: -250px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 20px;
......
web/stylesheets/main.css.map
View file @ d0d93a48
{"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;EACA;;;AAGJ;EAGI;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;;;ACvGR;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;;;AAGJ;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EAEA,eACI;;;AAKR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;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;;;AC9GJ;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/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;EAGI;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;;;ACvGR;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
web/stylesheets/table.css 0 → 100644
View file @ d0d93a48
.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 {
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
}
/*# sourceMappingURL=table.css.map */
web/stylesheets/table.css.map 0 → 100644
View file @ d0d93a48
{"version":3,"sourceRoot":"","sources":["../sass/table.scss"],"names":[],"mappings":"AAAA;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;;;AAIJ;EACI;EACA;EAEA,eACI","file":"table.css"}
\ No newline at end of file
web/stylesheets/unit.css
View file @ d0d93a48
#units_table {
color: whitesmoke;
text-align: center;
margin-top: 10px;
}
.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;
.tab2 {
text-align: center;
border: 1px black solid;
}
.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
color: whitesmoke;
.my_units {
background-color: #8d0b0b;
max-width: 600px;
}
.dataTables_wrapper {
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.tab2 {
text-align: center;
border: 1px black solid;
.overflow_table {
overflow: auto;
max-width: 100%;
width: 100%;
}
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
table-component {
grid-template: "table details" 600px/1fr 600px;
display: grid;
position: relative;
}
table_wrapper {
table-wrapper {
grid-area: table;
width: 100%;
display: inline-block;
margin-top: 50px;
margin-left: 50px;
margin-right: 25px;
min-width: 300px;
}
unit-detail {
grid-area: details;
text-align: center;
position: relative;
position: absolute;
display: inline-block;
background-color: #1b1b1b;
height: 600px;
width: 500px;
left: 50%;
width: 100%;
margin-top: 50px;
margin-left: -250px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 20px;
......
web/stylesheets/unit.css.map
View file @ d0d93a48
{"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;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EAEA,eACI;;;AAKR;EACI;EACA;EACA;;;AAGJ;EACI;EACA;EACA;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","file":"unit.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../sass/unit.scss"],"names":[],"mappings":"AACA;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","file":"unit.css"}
\ No newline at end of file
web/units/index.html
View file @ d0d93a48
......@@ -16,8 +16,10 @@
<nav-placeholder></nav-placeholder>
<script src="/navbar/navbar.js"></script>
<content-body>
<table id="units-table" class="display" style="width: 100%;">
</table>
<table-wrapper>
<table id="units_table" class="display"></table>
</table-wrapper>
</content-body>
</body>
</html>
web/units/view.js
View file @ d0d93a48
import TableView from "../views/table_view.js";
const default_columns =[
{title: "ID", term: "id"},
{title: "Name", term: "name"},
......@@ -23,31 +25,14 @@ const default_columns =[
class UnitTableView extends EventTarget{
constructor(columns){
constructor(){
super();
this.columns = columns ? columns : default_columns;
this.table = $("#units_table")
this.datatable = this.table.DataTable({
columns: this.columns
});
const datatable = this.datatable;
const view = this;
$("#units_table tbody").on("click", "tr", function(){
const index = datatable.row(this).index();
view.dispatchEvent(new CustomEvent("row_click", {detail: index}));
})
this.table_view = new TableView(default_columns);
}
drawTable(data){
const data_set = data.map((ele) => {
var d = [];
this.columns.forEach((col) =>{
d.push(ele[col.term]);
})
return d;
});
this.datatable.clear().rows.add(data_set).draw();
this.table_view.drawTable(data);
}
}
......
web/views/table_view.js 0 → 100644
View file @ d0d93a48
class TableView extends EventTarget{
constructor(columns, overflow){
super();
if(!columns){
throw Error('Columns are needed');
}
this.columns = columns;
this.table = $("#units_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.table.detach();
this.$overflow_div.append(this.table);
}
const datatable = this.datatable;
const view = this;
$("#units_table tbody").on("click", "tr", function(){
const index = datatable.row(this).index();
view.dispatchEvent(new CustomEvent("row_click", {detail: index}));
})
}
drawTable(data){
const data_set = data.map((ele) => {
var d = [];
this.columns.forEach((col) =>{
d.push(ele[col.term]);
})
return d;
});
this.datatable.clear().rows.add(data_set).draw();
}
}
export default TableView;
\ 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