Skip to content

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

Added delete unit and some styling

parent 98732fb4
Show whitespace changes
Inline Side-by-side
Showing with 179 additions and 69 deletions
web/myunits/controller.js
View file @ 53b1d3f5
......@@ -12,6 +12,7 @@ class MyUnitsController{
this.view.addEventListener("row_click", (event) => this.changeUnitDetail(event.detail));
this.view.addEventListener("add_unit", (event) => this.addUnit(event.detail));
this.view.addEventListener("modify_unit", (event) => this.modifyUnit(event.detail));
this.view.addEventListener("delete_unit", (event) => this.deleteUnit(event.detail));
this.getMyUnits();
}
......@@ -23,18 +24,29 @@ class MyUnitsController{
this.view.unitAdded();
}catch(error){
console.log(error);
alert('Insertion to update')
alert('Failed to Insert')
}
}
async modifyUnit(data){
try{
await this.sync.modifyUnit(data);
alert('Update Successful')
this.view.unitModified();
alert('Update Successful');
this.view.unitsModified();
}catch(error){
console.log(error);
alert('Failed to update')
alert('Failed to Update')
}
}
async deleteUnit(id){
try{
await this.sync.deleteUnit(id);
alert('Delete Successful');
this.view.unitsModified();
}catch(error){
console.log(error);
alert('Failed to Delete')
}
}
......
web/myunits/detail_view.js
View file @ 53b1d3f5
......@@ -7,16 +7,25 @@ class UnitDetailView extends EventTarget{
this.element = document.querySelector("unit-detail");
this.fields = {
img : this.element.querySelector(".unit-img"),
name : this.element.querySelector(".unit-name"),
level_input : this.element.querySelector("#level-input"),
elite_input : this.element.querySelector("#elite-ckb"),
button : this.element.querySelector(".unit-button")
img : this.element.querySelector(".unit_img"),
name : this.element.querySelector(".unit_name"),
level_input : this.element.querySelector("#level_input"),
elite_input : this.element.querySelector("#elite_ckb"),
delete_button : this.element.querySelector(".delete_button"),
modify_button : this.element.querySelector(".modify_button"),
add_button : this.element.querySelector(".add_button"),
}
this.disableInput()
this.fields.button.addEventListener("click", (event) =>{
this.dispatchEvent(new CustomEvent("submit_detail", {detail: this.unit}))
this.toggleTabs(true);
this.fields.delete_button.addEventListener("click", (event) =>{
this.dispatchEvent(new CustomEvent("delete_unit", {detail: this.unit.id}));
});
this.fields.modify_button.addEventListener("click", (event) =>{
this.dispatchEvent(new CustomEvent("modify_unit", {detail: this.unit}));
});
this.fields.add_button.addEventListener("click", (event) =>{
this.dispatchEvent(new CustomEvent("add_unit", {detail: this.unit}));
});
this.fields.level_input.addEventListener("input", () =>{
this.unit.unit_level = this.fields.level_input.value;
......@@ -26,6 +35,19 @@ class UnitDetailView extends EventTarget{
})
}
toggleTabs(flg){
if(flg){
this.fields.delete_button.style.display = "";
this.fields.modify_button.style.display = "";
this.fields.add_button.style.display = "none";
}else{
this.fields.delete_button.style.display = "none";
this.fields.modify_button.style.display = "none";
this.fields.add_button.style.display = "";
}
this.clean();
}
changeUnit(unit){
this.unit = unit;
if(!this.unit){
......@@ -50,17 +72,22 @@ class UnitDetailView extends EventTarget{
this.fields.name.innerText = "---";
this.fields.level_input.value = 0;
this.fields.elite_input.checked = false;
this.unit = {};
}
enableInput(){
this.fields.level_input.disabled = false;
this.fields.elite_input.disabled = false;
this.fields.button.disabled = false;
this.fields.delete_button.disabled = false;
this.fields.modify_button.disabled = false;
this.fields.add_button.disabled = false;
}
disableInput(){
this.fields.level_input.disabled = true;
this.fields.elite_input.disabled = true;
this.fields.button.disabled = true;
this.fields.delete_button.disabled = true;
this.fields.modify_button.disabled = true;
this.fields.add_button.disabled = true;
}
}
......
web/myunits/index.html
View file @ 53b1d3f5
......@@ -21,21 +21,23 @@
<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" style="max-width: 500px;"></table>
</table-wrapper>
<unit-detail>
<image class="unit-img"></image>
<div class="unit-name">
<image class="unit_img"></image>
<div class="unit_name">
---
</div>
<div class="unit-level">
<div class="unit_level">
<p>Unit Level:</p>
<input id="level-input" type="number"/>
<input id="level_input" type="number"/>
<p>Elite:</p>
<input id="elite-ckb" type="checkbox"/>
<input id="elite_ckb" type="checkbox"/>
</div>
<div class="unit-button">
<button class="unit-button">Submit</button>
<div class="unit_button">
<button class="delete_button">Delete</button>
<button class="modify_button">Update</button>
<button class="add_button">Add</button>
</div>
</unit-detail>
</table-component>
......
web/myunits/sync.js
View file @ 53b1d3f5
......@@ -27,7 +27,7 @@ class Sync{
headers: {
'Content-Type': 'application/json'
}
})
});
}
async modifyUnit(data){
......@@ -37,7 +37,13 @@ class Sync{
headers: {
'Content-Type': 'application/json'
}
})
});
}
async deleteUnit(id){
const response = await fetch(`/api/user/unit/${id}`, {
method: "DELETE",
});
}
}
......
web/myunits/view.js
View file @ 53b1d3f5
......@@ -39,21 +39,23 @@ class MyUnitView extends EventTarget{
this.my_units_add.addEventListener("click", (event) =>{
this.changeTab(event.currentTarget);
this.dispatchEvent(new CustomEvent("unit_tab_change"))
})
});
this.add_units.addEventListener("click", () =>{
this.changeTab(event.currentTarget);
this.dispatchEvent(new CustomEvent("add_tab_change"))
})
});
this.unit_table_view.addEventListener("row_click", (event) =>{
this.dispatchEvent(new CustomEvent("row_click", {detail: event.detail}));
})
this.unit_detail_view.addEventListener("submit_detail", (event) =>{
if(this.my_units_tab){
});
this.unit_detail_view.addEventListener("delete_unit", (event) =>{
this.dispatchEvent(new CustomEvent("delete_unit", {detail: event.detail}));
});
this.unit_detail_view.addEventListener("modify_unit", (event) =>{
this.dispatchEvent(new CustomEvent("modify_unit", {detail: event.detail}));
}else{
});
this.unit_detail_view.addEventListener("add_unit", (event) =>{
this.dispatchEvent(new CustomEvent("add_unit", {detail: event.detail}));
}
})
});
}
changeTab(tab){
......@@ -64,6 +66,7 @@ class MyUnitView extends EventTarget{
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
this.my_units_tab = !this.my_units_tab;
this.unit_detail_view.toggleTabs(this.my_units_tab);
tab.className += " active";
}
......@@ -80,7 +83,7 @@ class MyUnitView extends EventTarget{
this.dispatchEvent(new CustomEvent("add_tab_change"))
}
unitModified(){
unitsModified(){
this.dispatchEvent(new CustomEvent("unit_tab_change"))
}
}
......
web/sass/unit.scss
View file @ 53b1d3f5
#units-table{
#units_table{
color: whitesmoke;
text-align: center;
......@@ -37,7 +37,7 @@ table.dataTable.display tbody tr.even{
border: 1px black solid;
}
table-component{
table_component{
margin-top: 50px;
grid-area: content;
......@@ -47,7 +47,7 @@ table-component{
;
}
table-wrapper{
table_wrapper{
grid-area: table;
width: 100%;
display: inline-block;
......@@ -69,17 +69,18 @@ unit-detail{
padding-top: 20px;
}
.unit-img{
.unit_img{
width: 300px;
height: 400px;
background-color: white;
background-color: rgb(184, 184, 184);
border: 2px solid rgb(83, 83, 83);
}
.unit-name{
.unit_name{
padding-top: 10px;
font-size: 25px;
display: block;
}
.unit-level{
.unit_level{
height: 50px;
display: block;
p{
......@@ -87,13 +88,30 @@ unit-detail{
display: inline;
}
}
.unit-elite{
.unit_elite{
display: inline-block;
}
.unit-button{
.unit_button{
display: inline;
button{
left:50%;
height: 30px;
width: 60px;
background-color: grey;
border-radius: 3px;
color: whitesmoke;
text-align: center;
}
}
.add_button{
background-color: green !important;
border: 2px solid rgb(3, 102, 20);
}
.modify_button{
background-color: rgb(53, 53, 255) !important;
border: 2px solid rgb(4, 4, 124);
}
.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 @ 53b1d3f5
......@@ -213,7 +213,7 @@ center-div {
font-size: 20px;
}
#units-table {
#units_table {
color: whitesmoke;
text-align: center;
}
......@@ -251,13 +251,13 @@ table.dataTable.display tbody tr.even .sorting_1 {
border: 1px black solid;
}
table-component {
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
}
table-wrapper {
table_wrapper {
grid-area: table;
width: 100%;
display: inline-block;
......@@ -279,39 +279,60 @@ unit-detail {
padding-top: 20px;
}
.unit-img {
.unit_img {
width: 300px;
height: 400px;
background-color: white;
background-color: #b8b8b8;
border: 2px solid #535353;
}
.unit-name {
.unit_name {
padding-top: 10px;
font-size: 25px;
display: block;
}
.unit-level {
.unit_level {
height: 50px;
display: block;
}
.unit-level p {
.unit_level p {
font-size: 15px;
display: inline;
}
.unit-elite {
.unit_elite {
display: inline-block;
}
.unit-button {
.unit_button {
display: inline;
}
.unit-button button {
.unit_button button {
left: 50%;
height: 30px;
width: 60px;
background-color: grey;
border-radius: 3px;
color: whitesmoke;
text-align: center;
}
.add_button {
background-color: green !important;
border: 2px solid #036614;
}
.modify_button {
background-color: #3535ff !important;
border: 2px solid #04047c;
}
.delete_button {
background-color: red !important;
border: 2px solid #530303;
}
body {
font-family: monospace;
background-color: #313131;
......
web/stylesheets/main.css.map
View file @ 53b1d3f5
{"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;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI;;;AAEJ;EACI;;AACA;EACI;EACA;;;AC3FR;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/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
web/stylesheets/unit.css
View file @ 53b1d3f5
#units-table {
#units_table {
color: whitesmoke;
text-align: center;
}
......@@ -36,13 +36,13 @@ table.dataTable.display tbody tr.even .sorting_1 {
border: 1px black solid;
}
table-component {
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
}
table-wrapper {
table_wrapper {
grid-area: table;
width: 100%;
display: inline-block;
......@@ -64,37 +64,58 @@ unit-detail {
padding-top: 20px;
}
.unit-img {
.unit_img {
width: 300px;
height: 400px;
background-color: white;
background-color: #b8b8b8;
border: 2px solid #535353;
}
.unit-name {
.unit_name {
padding-top: 10px;
font-size: 25px;
display: block;
}
.unit-level {
.unit_level {
height: 50px;
display: block;
}
.unit-level p {
.unit_level p {
font-size: 15px;
display: inline;
}
.unit-elite {
.unit_elite {
display: inline-block;
}
.unit-button {
.unit_button {
display: inline;
}
.unit-button button {
.unit_button button {
left: 50%;
height: 30px;
width: 60px;
background-color: grey;
border-radius: 3px;
color: whitesmoke;
text-align: center;
}
.add_button {
background-color: green !important;
border: 2px solid #036614;
}
.modify_button {
background-color: #3535ff !important;
border: 2px solid #04047c;
}
.delete_button {
background-color: red !important;
border: 2px solid #530303;
}
/*# sourceMappingURL=unit.css.map */
web/stylesheets/unit.css.map
View file @ 53b1d3f5
{"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;;;AAEJ;EACI;EACA;EACA;;;AAEJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI;;;AAEJ;EACI;;AACA;EACI;EACA","file":"unit.css"}
\ No newline at end of file
{"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
web/units/view.js
View file @ 53b1d3f5
......@@ -27,13 +27,13 @@ class UnitTableView extends EventTarget{
super();
this.columns = columns ? columns : default_columns;
this.table = $("#units-table")
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(){
$("#units_table tbody").on("click", "tr", function(){
const index = datatable.row(this).index();
view.dispatchEvent(new CustomEvent("row_click", {detail: index}));
})
......
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