Skip to content

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

MyHouse Page almost done

parent f83bb449
Hide whitespace changes
Inline Side-by-side
Showing with 1474 additions and 374 deletions
server/house/model.js
View file @ c7632c96
......@@ -122,7 +122,7 @@ model.acceptRequest = async(user_id, house_id) => {
await db.con.query('COMMIT;');
}
model.refuseRequest = async(user_id) => {
model.rejectRequest = async(user_id) => {
const sql_text = 'DELETE FROM house_requests WHERE user_id = ?;';
await db.con.query(sql_text, [user_id]);
......@@ -140,4 +140,42 @@ model.leaveHouse = async(user_id) => {
await db.con.query(sql_text, [user_id]);
}
model.getMembers = async(house_id) => {
const sql_text = `SELECT u.id, u.username, u.leadership, hr.lk_name as house_role, hr.lk_key
FROM users as u
LEFT JOIN house_role_lk as hr ON hr.lk_key = u.lk_house_role
WHERE u.house_id = ?;`;
const data = await db.con.query(sql_text, [house_id]);
return data;
}
model.modifyMemberRole = async(member_id, role) => {
const sql_text = 'UPDATE users SET lk_house_role = ? WHERE id = ?;';
await db.con.query(sql_text, [role, member_id]);
}
model.changeHouseLiege = async(liege_id, member_id) => {
const sql_text = `UPDATE users SET lk_house_role = 'kng' WHERE id = ?;`;
const sql_text2 = `UPDATE users SET lk_house_role = 'lg' WHERE id = ?;`;
await db.con.query('START TRANSACTION;')
await db.con.query(sql_text, [liege_id]);
await db.con.query(sql_text2, [member_id]);
await db.con.query('COMMIT;');
}
model.getMemberUnits = async(member_id) => {
const sql_txt = `SELECT u.*, uu.unit_level, uu.elite_flg
FROM users as us
LEFT JOIN users_units as uu ON us.id = uu.user_id
LEFT JOIN units as u ON uu.unit_id = u.id
WHERE us.id = ? ORDER BY u.name ASC;`
const data = await db.con.query(sql_txt, [member_id]);
return data;
}
module.exports = model;
\ No newline at end of file
server/house/route.js
View file @ c7632c96
const Koa = require('koa');
const Router = require('@koa/router');
const Koa = require('koa');
const Router = require('@koa/router');
const router = new Router();
const authRouter = new Router();
const houseModel = require('./model');
const router = new Router();
const authRouter = new Router();
const houseModel = require('./model');
const userModel = require('../user/model')
const HOUSE_ROLES = {
LIEGE: 0,
SEN: 1,
MAR: 2,
NOB: 3,
TRE: 4,
KNG: 5
lg: 0,
sen: 1,
mar: 2,
nob: 3,
tre: 4,
kng: 5
}
function checkPermissions(context, ROLE){
......@@ -19,6 +21,10 @@ function checkPermissions(context, ROLE){
context.throw(403, "No Permissions")
}
}
function checkPermissionsNoThrow(context, ROLE){
return ROLE >= context.user.lk_permission_level;
}
function checkHouse(context){
const house_id = context.user.house_id ? context.user.house_id : context.request.body.house_id;
......@@ -26,6 +32,11 @@ function checkHouse(context){
context.throw(403, "Not your House");
}
}
function hasHouse(context){
if(!context.user.house_id){
context.throw(400, 'No house');
}
}
router.get('/all', async (context, next) => {
try{
......@@ -38,6 +49,80 @@ router.get('/all', async (context, next) => {
}
});
authRouter.get('/members', async(context, next) => {
hasHouse(context);
try{
const data = await houseModel.getMembers(context.user.house_id);
context.response.status = 200;
context.response.body = data;
}catch(error){
console.log(error);
context.throw(400, "Failed to get members")
}
});
authRouter.get('/member-units/:member_id', async(context, next) => {
checkPermissions(context, HOUSE_ROLES.sen);
try{
const data = await houseModel.getMemberUnits(context.params.member_id);
context.response.status = 200;
context.response.body = data;
}catch(error){
console.log(error);
context.throw('Failed to get Member Units');
}
});
authRouter.post('/modify-role', async(context, next) => {
hasHouse(context);
const body = context.request.body;
if(!body || !body.member_id || !body.role){
context.throw(400, 'Missing parameters')
}
try{
const member = await userModel.getUserFullFromId(body.member_id);
if(!member){
throw Error('Member does not exists');
}
if(member.house_id !== context.user.house_id){
throw Error('Not on the same house');
}
if(member.lk_permission_level <= context.user.lk_permission_level){
throw Error("Member permission level is high")
}
if(checkPermissionsNoThrow(context, HOUSE_ROLES.lg)){
if(body.role === 'lg'){
await houseModel.changeHouseLiege(context.user.id, member.id);
}else{
await houseModel.modifyMemberRole(member.id, body.role);
}
}else{
if(context.user.lk_house_role < HOUSE_ROLES[body.role]){
await houseModel.modifyHouse(member.id, body.role);
}else{
throw Error("Can't modify to the same level");
}
}
context.response.status = 204;
}catch(error){
console.log(error);
context.throw(400, 'Failed to modify role')
}
})
authRouter.get('/my-permission', async(context, next) => {
if(!context.user.house_id || context.user.lk_permission_level === undefined){
context.throw(400, 'No house');
}
try{
context.response.status = 200;
context.response.body = context.user.lk_permission_level;
}catch(error){
console.log(error);
context.throw(400, 'ERROR');
}
});
authRouter.get('/has-house', async (context, next) => {
try{
if(context.user.house_id){
......@@ -82,9 +167,9 @@ authRouter.delete('/request', async (context, next) => {
}
});
authRouter.get('/requests/:house_id', async (context, next) => {
checkHouse(context);
checkPermissions(context, HOUSE_ROLES.SEN);
authRouter.get('/requests', async (context, next) => {
// checkHouse(context);
checkPermissions(context, HOUSE_ROLES.sen);
try{
const data = await houseModel.getHouseRequests(context.user.house_id);
context.response.status = 200;
......@@ -97,12 +182,13 @@ authRouter.get('/requests/:house_id', async (context, next) => {
authRouter.post('/accept-request', async (context, next) => {
checkHouse(context);
checkPermissions(context, HOUSE_ROLES.SEN);
checkPermissions(context, HOUSE_ROLES.sen);
try{
const body = context.request.body;
if(!body || !body.user_id){
throw Error("No user to accept");
}
console.log(body.user_id);
await houseModel.acceptRequest(body.user_id, context.user.house_id);
context.response.status = 204;
}catch(error){
......@@ -111,28 +197,38 @@ authRouter.post('/accept-request', async (context, next) => {
}
});
authRouter.delete('/refuse-request', async (context, next) => {
authRouter.delete('/reject-request/:user_id', async (context, next) => {
checkHouse(context);
checkPermissions(context, HOUSE_ROLES.SEN);
checkPermissions(context, HOUSE_ROLES.sen);
try{
const body = context.request.body;
if(!body || !body.user_id){
if(!context.params.user_id){
throw Error("No user to refuse");
}
await houseModel.refuseRequest(body.user_id);
await houseModel.rejectRequest(context.params.user_id);
context.response.status = 204;
}catch(error){
console.log(error);
context.throw(400, 'Unable to Accept Request')
context.throw(400, 'Unable to reject Request')
}
});
authRouter.delete('/delete-member/:user_id', async (context, next) => {
checkPermissions(context, HOUSE_ROLES.SEN);
checkPermissions(context, HOUSE_ROLES.sen);
if(context.params.user_id===context.session.user_id){
context.throw(400, "Can't delete yourself");
}
try{
const member = await userModel.getUserFullFromId(context.params.user_id);
if(!member){
throw Error('Member does not exists');
}
if(member.house_id !== context.user.house_id){
throw Error('Not on the same house');
}
if(member.lk_permission_level <= context.user.lk_permission_level){
throw Error("Member permission level is high")
}
await houseModel.deleteMember(context.params.user_id);
context.response.status = 204;
}catch(error){
......@@ -144,7 +240,6 @@ authRouter.delete('/delete-member/:user_id', async (context, next) => {
authRouter.delete('/leave-house', async (context, next) => {
if(context.user.lk_house_role==='lg'){
try{
console.log('asd')
await houseModel.deleteHouse(context.user.house_id, context.session.user_id);
context.response.status = 204;
}catch(error){
......
web/houses/index.html
View file @ c7632c96
......@@ -16,7 +16,7 @@
<script src="/navbar/navbar.js"></script>
<content-body>
<table-wrapper class="house_table">
<div class="tab" style="display:none">
<div class="table_header" style="display:none">
<button class="request_house">Send House Request</button>
</div>
<table id="data_table" class="display"></table>
......
web/houses/view.js
View file @ c7632c96
......@@ -13,7 +13,7 @@ class HousesView extends EventTarget{
constructor(){
super();
this.request_tab = document.querySelector('.tab');
this.request_tab = document.querySelector('.table_header');
this.request_button = this.request_tab.querySelector('.request_house');
this.houses_table_view = new TableView($('table-wrapper'), house_columns);
......
web/login/index.html
View file @ c7632c96
......@@ -13,7 +13,7 @@
<script src="/navbar/navbar.js"></script>
<content-body>
<center-div>
<div class="tab">
<div class="table_header">
<button class="tablinks active" onclick="changeTab(event, 'Login')">Login</button>
<button class="tablinks" onclick="changeTab(event, 'Register')">Register</button>
</div>
......
web/myhouse/controller.js 0 → 100644
View file @ c7632c96
import Sync from "./sync.js";
class MyHouseController{
constructor(view){
this.view = view;
this.sync = new Sync();
this.permission_level = 1000;
this.members = [];
this.requests = [];
this.view.addEventListener("participation_attemp", (event) => this.attempParticipate(event.detail));
this.view.addEventListener("member_select", (event) => this.selectMember(event.detail));
this.view.addEventListener("modify_member_role", (event) => this.modifyMemberRole(event.detail.member_id, event.detail.role));
this.view.addEventListener("kick_member", (event) => this.kickMember(event.detail));
this.view.addEventListener("request_select", (event) => this.selectRequest(event.detail));
this.view.addEventListener("accept_request", (event) => this.acceptRequest(event.detail));
this.view.addEventListener("reject_request", (event) => this.rejectRequest(event.detail));
this.refresh();
setInterval(() => {
this.refresh();
}, 10000);
}
async modifyMemberRole(member_id, role){
try{
await this.sync.modifyMemberRole(member_id, role);
alert('Role Modified');
this.refresh();
}catch(error){
console.log(error);
alert('Failed to modify role')
}
}
async kickMember(member_id){
try{
await this.sync.kickMember(member_id);
alert('Member Kicked');
this.refresh();
}catch(error){
console.log(error);
alert('Failed to Kick Member');
}
}
async refresh(){
this.getMembers();
this.getPermissionLevel();
this.getRequests();
}
async acceptRequest(user_id){
try{
await this.sync.acceptRequest(user_id);
alert('Request Accepted');
this.refresh();
}catch(error){
console.log(error);
alert('Failed to Accept Request')
}
}
async rejectRequest(user_id){
try{
await this.sync.rejectRequest(user_id);
alert('Request Refused');
this.refresh();
}catch(error){
console.log(error);
alert('Failed to Refuse Request')
}
}
selectRequest(index){
this.view.selectRequest(this.requests[index]);
}
async selectMember(index){
const member = this.members[index];
try{
const units = await this.sync.getMemberUnits(member.id);
this.view.drawMemberUnitsTable(units);
this.view.selectMember(member);
}catch(error){
console.log(error);
alert('Failed at Selecting Member');
}
}
async getRequests(){
this.requests = [];
try{
this.requests = await this.sync.getRequests();
}catch(error){
console.log(error);
}
this.view.drawRequestsTable(this.requests);
}
async getMembers(){
this.members = [];
try{
this.members = await this.sync.getMembers();
}catch(error){
console.log(error);
// alert('Failed to get Members');
}
this.view.drawMembersTable(this.members);
}
async attempParticipate(decision){
console.log(decision)
}
async getPermissionLevel(){
try{
const permission_level = await this.sync.getPermissionLevel();
if(this.getPermissionLevel !== permission_level){
this.permission_level = permission_level;
this.view.updatePermissions(this.permission_level);
}
}catch(error){
console.log(error);
}
}
}
export default MyHouseController;
\ No newline at end of file
web/myhouse/index.html 0 → 100644
View file @ c7632c96
<!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="./myhouse/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 id="my_house">
<div id="area_1">
<war-participation>
<table-wrapper>
<div class="table_header">
<span>Participation:</span>
<button id="yes">Yes</button>
<button id="no">No</button>
<button id="maybe">Maybe</button>
</div>
<table id="data_table" class="display"></table>
</table-wrapper>
</war-participation>
<members-area>
<table-detail style="display: initial;">
<table-wrapper>
<div class="table_header">
<p>Members</p>
</div>
<table id="data_table" class="display"></table>
</table-wrapper>
<detail style="display: none;">
<image class="weapon_img"></image>
<div class="detail_name">
---
</div>
<div>
<label for="roles">Roles:</label>
<select id="role">
</select>
</div>
<div class="detail_buttons">
<button class="delete_button">Kick</button>
<button class="modify_button">Update</button>
</div>
</detail>
</table-detail>
</members-area>
</div>
<div id="area_2">
<requests-area style="display: none;">
<div class="table_header">
<div class="title"><span>House</span></div>
<button id="reject">Reject</button>
<button id="accept">Accept</button>
</div>
<table id="data_table" class="display"></table>
</requests-area>
<member-units style="display: none;">
<div class="table_header">
<div class="title"><span>Units</span></div>
</div>
<table id="data_table" class="display"></table>
</member-units>
</div>
</content-body>
</body>
</html>
web/myhouse/member_detail_view.js 0 → 100644
View file @ c7632c96
const role_options = [
{value: 'lg', text: 'Liege'},
{value: 'sen', text: 'Seneschal'},
{value: 'mar', text: 'Marshall'},
{value: 'nob', text: 'Noble'},
{value: 'tre', text: 'Treasurer'},
{value: 'kng', text: 'Knight'}
]
class MemberDetailView extends EventTarget{
constructor(element){
super();
this.element = element;
this.member = {};
this.fields = {
weapon_img: this.element.querySelector('weapon_img'),
name: this.element.querySelector('.detail_name'),
role_selector: this.element.querySelector('#role'),
update_button: this.element.querySelector('.modify_button'),
delete_button: this.element.querySelector('.delete_button')
}
this.fields.update_button.addEventListener("click", () => {
this.dispatchEvent(new CustomEvent("modify_member_role", {detail:{member_id: this.member.id, role: this.fields.role_selector.value}}))
});
this.fields.delete_button.addEventListener("click", () => {
this.dispatchEvent(new CustomEvent("kick_member", {detail: this.member.id}));
});
this.disable();
}
updatePermissions(perission_level){
if(perission_level===0){
this.changeRolesOptions(-1);
}else{
this.changeRolesOptions(perission_level);
}
}
changeRolesOptions(start){
var i, L = this.fields.role_selector.options.length - 1;
for(i = L; i >= 0; i--) {
this.fields.role_selector.remove(i);
}
for(var i = start + 1; i<role_options.length; i++){
const opt = document.createElement("option");
opt.value = role_options[i].value;
opt.text = role_options[i].text;
this.fields.role_selector.add(opt);
}
}
show(){
this.element.style.display = ""
}
hide(){
this.element.style.display = "none";
}
selectMember(member){
this.member = member;
if(!this.member){
this.disable();
}else{
this.enable();
this.refresh();
}
}
refresh(){
if(this.member.weapon_img){
this.fields.weapon_img.src = this.member.weapon_img;
}
this.fields.name.innerText = this.member.username;
this.fields.role_selector.value = this.member.lk_key;
}
clear(){
this.fields.weapon_img.src = "";
this.fields.name.innerText = "---";
}
enable(){
this.fields.role_selector.disabled = false;
this.fields.update_button.disabled = false;
this.fields.delete_button.disabled = false;
}
disable(){
this.fields.role_selector.disabled = true;
this.fields.update_button.disabled = true;
this.fields.delete_button.disabled = true;
}
}
export default MemberDetailView;
\ No newline at end of file
web/myhouse/member_units_view.js 0 → 100644
View file @ c7632c96
import TableView from "../views/table_view.js";
const units_columns = [
{title: 'ID', term: 'id'},
{title: 'Name', term: 'name'},
{title: 'Type', term: 'unit_type'},
{title: 'Level', term: 'unit_level'},
{title: 'Elite', term: 'elit_flg'}
]
class MemberUnitsView extends EventTarget{
constructor(element){
super();
this.element = element;
this.table_view = new TableView(this.element, units_columns);
}
drawTable(data){
console.log(data)
this.table_view.drawTable(data);
}
show(){
this.element.style.display = "";
}
hide(){
this.element.style.display = "none"
}
}
export default MemberUnitsView;
\ No newline at end of file
web/myhouse/members_view.js 0 → 100644
View file @ c7632c96
import TableView from "../views/table_view.js"
import MemberDetailView from "./member_detail_view.js";
const members_columns = [
{title: "ID", term: "id"},
{title: "Name", term: "username"},
{title: "Leadership", term: "leadership"},
{title: "House Role", term: "house_role"}
]
class MembersView extends EventTarget{
constructor(element){
super();
this.element = element;
this.table_detail = this.element.querySelector('table-detail');
this.table_view = new TableView(this.table_detail, members_columns, true);
this.member_detail_view = new MemberDetailView(this.element.querySelector('detail'));
this.table_view.addEventListener("row_click", (event) => {
this.dispatchEvent(new CustomEvent("member_select", {detail: event.detail}));
});
this.member_detail_view.addEventListener("modify_member_role", (event) =>{
this.dispatchEvent(new CustomEvent("modify_member_role", {detail: event.detail}));
});
this.member_detail_view.addEventListener("kick_member", (event) =>{
this.dispatchEvent(new CustomEvent("kick_member", {detail: event.detail}));
});
}
selectMember(member){
this.member_detail_view.selectMember(member);
}
drawTable(data){
this.table_view.drawTable(data);
}
updatePermissions(permission_level){
if(permission_level < 2){
this.member_detail_view.show();
this.table_detail.style.display = "grid"
}else{
this.member_detail_view.hide();
this.table_detail.style.display = "initial";
}
this.member_detail_view.updatePermissions(permission_level);
}
}
export default MembersView
\ No newline at end of file
web/myhouse/module.js 0 → 100644
View file @ c7632c96
import MyHouseController from "./controller.js"
import MyHouseView from "./view.js";
if(!document.cookie){
location.replace("/login")
}else{
new MyHouseController(new MyHouseView())
}
\ No newline at end of file
web/myhouse/participation_view.js 0 → 100644
View file @ c7632c96
import TableView from "../views/table_view.js";
const participation_column = [
{title: "Name", term: "username"},
{title: "Decision", term: "decision"}
];
class ParticipationView extends EventTarget{
constructor(element){
super();
this.element = element;
this.yes_button = element.querySelector("#yes");
this.maybe_button = element.querySelector("#maybe");
this.no_button = element.querySelector("#no");
this.table_view = new TableView($(element), participation_column);
this.yes_button.addEventListener("click", (event) => {
this.dispatchEvent(new CustomEvent("participation_atempt", {detail:'Yes'}));
});
this.maybe_button.addEventListener("click", (event) => {
this.dispatchEvent(new CustomEvent("participation_atempt", {detail: 'Maybe'}));
});
this.no_button.addEventListener("click", (event) => {
this.dispatchEvent(new CustomEvent("participation_atempt", {detail: 'No'}));
});
}
drawTable(data){
this.table_view(data);
}
}
export default ParticipationView;
\ No newline at end of file
web/myhouse/requests_view.js 0 → 100644
View file @ c7632c96
import TableView from '../views/table_view.js'
const requests_columns = [
{title: 'ID', term: 'id'},
{title: 'Name', term: 'username'}
];
class RequestsView extends EventTarget{
constructor(element){
super();
this.element = element;
this.request = {};
this.accept_button = this.element.querySelector('#accept');
this.reject_button = this.element.querySelector('#reject');
this.table_view = new TableView(this.element, requests_columns);
this.table_view.addEventListener("row_click", (event) => {
this.dispatchEvent(new CustomEvent("request_select", {detail: event.detail}));
});
this.accept_button.addEventListener('click', () => {
this.requestEvent("accept_request");
});
this.reject_button.addEventListener('click', () => {
this.requestEvent("reject_request");
});
this.disable()
}
selectRequest(request){
this.request = request;
if(!request){
this.disable();
}else{
this.enable();
}
}
requestEvent(event_name){
if(!this.request){
alert('No request selected');
}
this.dispatchEvent(new CustomEvent(event_name, {detail: this.request.id}));
}
drawTable(data){
this.table_view.drawTable(data);
}
show(){
this.element.style.display = "";
}
hide(){
this.element.style.display = "none"
}
enable(){
this.accept_button.disabled = false;
this.reject_button.disabled = false;
}
disable(){
this.accept_button.disabled = true;
this.reject_button.disabled = true;
}
}
export default RequestsView;
\ No newline at end of file
web/myhouse/sync.js 0 → 100644
View file @ c7632c96
class Sync{
async getRequests(){
const response = await fetch("/api/house/requests");
if(!response.ok){
throw Error('Failed to get requests');
}
const data = await response.json();
return data;
}
async getMembers(){
const response = await fetch("/api/house/members");
if(!response.ok){
throw Error('Failed to get Members');
}
const data = await response.json();
return data;
}
async getPermissionLevel(){
const response = await fetch("/api/house/my-permission");
if(!response.ok){
throw Error('Failed to get Permissions');
}
const data = await response.json();
return data;
}
async modifyMemberRole(member_id, role){
const response = await fetch("/api/house/modify-role", {
method: "POST",
body: JSON.stringify({member_id: member_id, role: role}),
headers: {
'Content-Type': 'application/json'
}
});
if(!response.ok){
throw Error('Failed to get modify role');
}
}
async kickMember(member_id){
const response = await fetch(`/api/house/delete-member/${member_id}`,{
method: "DELETE"
});
if(!response.ok){
throw Error('Failed to Kick Member');
}
}
async acceptRequest(user_id){
const response = await fetch("/api/house/accept-request", {
method: "POST",
body: JSON.stringify({user_id: user_id}),
headers: {
'Content-Type': 'application/json'
}
});
if(!response.ok){
throw Error('Failed to get accept request');
}
}
async rejectRequest(user_id){
const response = await fetch(`/api/house/reject-request/${user_id}`, {
method: "DELETE",
});
if(!response.ok){
throw Error('Failed to get reject request');
}
}
async getMemberUnits(member_id){
const response = await fetch(`/api/house/member-units/${member_id}`);
if(!response.ok){
throw Error('Failed to get member units');
}
const data = await response.json();
return data;
}
}
export default Sync;
\ No newline at end of file
web/myhouse/view.js 0 → 100644
View file @ c7632c96
import ParticipationView from "./participation_view.js";
import MembersView from "./members_view.js";
import RequestsView from "./requests_view.js";
import MemberUnitsView from "./member_units_view.js";
class MyHouseController extends EventTarget{
constructor(){
super();
this.participation_view = new ParticipationView(document.querySelector('war-participation'));
this.members_view = new MembersView(document.querySelector('members-area'));
this.requests_view = new RequestsView(document.querySelector('requests-area'));
this.member_units_view = new MemberUnitsView(document.querySelector('member-units'))
this.participation_view.addEventListener("participation_atempt", (event) => {
this.dispatchEvent(new CustomEvent("participation_attemp", {detail: event.detail}));
});
this.members_view.addEventListener("member_select", (event) => {
this.dispatchEvent(new CustomEvent("member_select", {detail: event.detail}));
});
this.members_view.addEventListener("modify_member_role", (event) => {
this.dispatchEvent(new CustomEvent("modify_member_role", {detail: event.detail}));
});
this.members_view.addEventListener("kick_member", (event) => {
this.dispatchEvent(new CustomEvent("kick_member", {detail: event.detail}));
});
this.requests_view.addEventListener("request_select", (event) => {
this.dispatchEvent(new CustomEvent("request_select", {detail: event.detail}));
});
this.requests_view.addEventListener("accept_request", (event) => {
this.dispatchEvent(new CustomEvent("accept_request", {detail: event.detail}));
});
this.requests_view.addEventListener("reject_request", (event) => {
this.dispatchEvent(new CustomEvent("reject_request", {detail: event.detail}));
});
}
drawMemberUnitsTable(data){
this.member_units_view.drawTable(data);
}
selectRequest(request){
this.requests_view.selectRequest(request);
}
drawRequestsTable(data){
this.requests_view.drawTable(data);
}
selectMember(member){
this.members_view.selectMember(member);
}
drawMembersTable(data){
this.members_view.drawTable(data);
}
updatePermissions(permission_level){
if(permission_level<2){
this.requests_view.show();
this.member_units_view.show();
}else{
this.requests_view.hide();
this.member_units_view.hide();
}
this.members_view.updatePermissions(permission_level);
}
}
export default MyHouseController;
\ No newline at end of file
web/myunits/detail_view.js
View file @ c7632c96
......@@ -3,12 +3,12 @@ class UnitDetailView extends EventTarget{
constructor(){
super();
this.unit = {};
this.element = document.querySelector("unit-detail");
this.unit = {};
this.element = document.querySelector("detail");
this.fields = {
img : this.element.querySelector(".unit_img"),
name : this.element.querySelector(".unit_name"),
name : this.element.querySelector(".detail_name"),
level_input : this.element.querySelector("#level_input"),
elite_input : this.element.querySelector("#elite_ckb"),
delete_button : this.element.querySelector(".delete_button"),
......@@ -39,11 +39,11 @@ class UnitDetailView extends EventTarget{
if(flg){
this.fields.delete_button.style.display = "";
this.fields.modify_button.style.display = "";
this.fields.add_button.style.display = "none";
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.fields.add_button.style.display = "";
}
this.clean();
}
......@@ -60,17 +60,17 @@ class UnitDetailView extends EventTarget{
refresh(){
if(this.unit.img){
this.fields.img.src = this.unit.img;
this.fields.img.src = this.unit.img;
}
this.fields.name.innerText = this.unit.name;
this.fields.level_input.value = this.unit.unit_level;
this.fields.name.innerText = this.unit.name;
this.fields.level_input.value = this.unit.unit_level;
this.fields.elite_input.checked = this.unit.elite_flg;
}
clean(){
this.fields.img.src = "";
this.fields.name.innerText = "---";
this.fields.level_input.value = 0;
this.fields.img.src = "";
this.fields.name.innerText = "---";
this.fields.level_input.value = 0;
this.fields.elite_input.checked = false;
this.unit = {};
}
......
web/myunits/index.html
View file @ c7632c96
......@@ -14,31 +14,33 @@
<body>
<nav-placeholder></nav-placeholder>
<script src="/navbar/navbar.js"></script>
<table-component>
<table-wrapper>
<div class="tab tab2">
<button id="my_units" class="tablinks active">My Units</button>
<button id="add_units" class="tablinks">Units to Add</button>
</div>
<table id="data_table" class="display my_units"></table>
</table-wrapper>
<unit-detail>
<image class="unit_img"></image>
<div class="unit_name">
---
</div>
<div class="unit_level">
<p>Unit Level:</p>
<input id="level_input" type="number"/>
<p>Elite:</p>
<input id="elite_ckb" type="checkbox"/>
</div>
<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>
<content-body id="myunits">
<table-detail>
<table-wrapper>
<div class="table_header tab2">
<button id="my_units" class="tablinks active">My Units</button>
<button id="add_units" class="tablinks">Units to Add</button>
</div>
<table id="data_table" class="display my_units"></table>
</table-wrapper>
<detail>
<image class="unit_img"></image>
<div class="detail_name">
---
</div>
<div class="unit_level">
<p>Unit Level:</p>
<input id="level_input" type="number"/>
<p>Elite:</p>
<input id="elite_ckb" type="checkbox"/>
</div>
<div class="detail_buttons">
<button class="delete_button">Delete</button>
<button class="modify_button">Update</button>
<button class="add_button">Add</button>
</div>
</unit-detail>
</table-detail>
</content-body>
</body>
</html>
web/myunits/view.js
View file @ c7632c96
......@@ -7,20 +7,20 @@ const unit_columns =[
{title: "Unit Type", term: "unit_type"},
{title: "Stars", term: "stars"},
{title: "HP", term:"hp"},
{title: "PAP", term:"pap"},
{title: "PD", term:"pd"},
{title: "SAP", term:"sap"},
{title: "SD", term:"sd"},
{title: "BAP", term:"bap"},
{title: "BD", term:"bd"},
{title: "PDF", term:"pdf"},
{title: "SDF", term:"sdf"},
{title: "BDF", term:"bdf"},
{title: "Leadership", term:"ld"},
{title: "Hero Level", term:"hl"},
{title: "Speed", term:"speed"},
{title: "Unit Range", term:"unit_range"},
{title: "Ammo", term:"ammo"},
// {title: "PAP", term:"pap"},
// {title: "PD", term:"pd"},
// {title: "SAP", term:"sap"},
// {title: "SD", term:"sd"},
// {title: "BAP", term:"bap"},
// {title: "BD", term:"bd"},
// {title: "PDF", term:"pdf"},
// {title: "SDF", term:"sdf"},
// {title: "BDF", term:"bdf"},
// {title: "Leadership", term:"ld"},
// {title: "Hero Level", term:"hl"},
// {title: "Speed", term:"speed"},
// {title: "Unit Range", term:"unit_range"},
// {title: "Ammo", term:"ammo"},
{title: "Labour", term:"labour"},
{title: "Unit Level", term:"unit_level"},
{title: "Elite", term:"elite_flg"}
......
web/navbar/navbar.html
View file @ c7632c96
......@@ -14,7 +14,7 @@
<p>Houses</p>
<div class="dropdown-content">
<a href="/houses">All Houses</a>
<a>My Units</a>
<a href="/myhouse">My House</a>
</div>
</div>
</bar-options>
......
web/sass/house.scss
View file @ c7632c96
......@@ -30,3 +30,124 @@
}
}
#my_house{
display: grid;
grid-template:
"area-1" 500px
"area-2" 500px
/1fr
;
#area_1{
display: grid;
grid-template:
"war-participation members"
/500px 1fr
;
table-wrapper{
width: 100%;
margin: 0px;
}
war-participation{
grid-area: war-participation;
padding: 10px;
}
members-area{
grid-area: members;
padding: 10px;
// background-color: blue;
.table_header{
text-align: center;
font-size: 20px;
}
detail{
left: 50%;
height: 350px;
width: 400px;
margin-left: -200px;
padding-top: 20px;
}
.weapon_img{
height: 200px;
width: 200px;
}
#role{
margin-top: 10px;
width: 100px;
}
.detail_buttons{
button{
margin-top: 10px;
}
}
}
}
#area_2{
display: grid;
grid-template:
"requests member-units"
/500px 1fr
;
requests-area{
grid-area: requests;
padding: 10px;
// background-color: red;
.dataTable{
tr.even.active{
background-color: rgb(151, 151, 151);
td.sorting_1{
background-color: rgb(151, 151, 151);
}
}
tr.odd.active{
background-color: rgb(151, 151, 151);
td.sorting_1{
background-color: rgb(151, 151, 151);
}
}
}
.table_header{
.title{
text-align: left;
display: inline;
p{
display: inline;
text-align: left;
}
}
}
#accept:hover{
background-color: rgb(119, 190, 119);
}
#reject:hover{
background-color: rgb(190, 119, 119);
}
}
member-units{
grid-area: member-units;
// background-color: green;
.table_header{
.title{
text-align: left;
display: inline;
p{
display: inline;
text-align: left;
}
}
}
}
}
.table_header{
text-align: right;
button{
color: rgb(204, 204, 204);
}
}
}
web/sass/login.scss
View file @ c7632c96
......@@ -11,39 +11,6 @@ center-div{
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.tab {
overflow: hidden;
// border: 1px solid #ccc;
background-color: #383838;
border: 1px solid #ccc;
border-bottom: none;
button{
font-family: monospace;
font-size: 20px;
}
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
// float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
......
web/sass/main.scss
View file @ c7632c96
......@@ -27,4 +27,9 @@ content-body{
a{
color: rgb(20, 20, 161);
}
}
img{
background-color: rgb(184, 184, 184);
border: 2px solid rgb(83, 83, 83);
}
\ No newline at end of file
web/sass/table.scss
View file @ c7632c96
.table_header {
overflow: hidden;
// border: 1px solid #ccc;
background-color: #383838;
border: 1px solid #ccc;
border-bottom: none;
button{
font-family: monospace;
font-size: 20px;
}
}
/* Style the buttons that are used to open the tab content */
.table_header button {
background-color: inherit;
// float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.table_header button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.table_header button.active {
background-color: #ccc;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: whitesmoke !important;
}
......@@ -24,15 +58,66 @@ table.dataTable.display tbody tr.even{
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
text-align: center;
}
.overflow_table{
overflow: auto;
max-width: 100%;
width: 100%;
padding-top: 10px;
}
table_component{
margin-top: 50px;
grid-area: content;
table-detail{
grid-template:
"table details"
/1fr 200px
/1fr 600px
;
display: grid;
position: relative;
}
table-wrapper{
grid-area: table;
display: inline-block;
}
detail{
grid-area: details;
text-align: center;
position: absolute;
display: inline-block;
background-color: rgb(27, 27, 27);
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding-top: 20px;
.detail_name{
padding-top: 10px;
font-size: 25px;
display: block;
}
.detail_buttons{
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/sass/unit.scss
View file @ c7632c96
......@@ -12,57 +12,27 @@
.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" 600px
/1fr 600px
;
display: grid;
position: relative;
}
table-wrapper{
grid-area: table;
display: inline-block;
#myunits table-wrapper{
margin-top: 50px;
margin-left: 50px;
margin-right: 25px;
min-width: 300px;
}
unit-detail{
grid-area: details;
text-align: center;
position: absolute;
display: inline-block;
background-color: rgb(27, 27, 27);
height: 600px;
width: 100%;
margin-top: 50px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding-top: 20px;
}
#myunits detail{
height: 600px;
width: 100%;
margin-top: 50px;
padding-top: 20px;
}
.unit_img{
width: 300px;
height: 400px;
background-color: rgb(184, 184, 184);
border: 2px solid rgb(83, 83, 83);
}
.unit_name{
padding-top: 10px;
font-size: 25px;
display: block;
}
.unit_level{
height: 50px;
......@@ -74,28 +44,4 @@ unit-detail{
}
.unit_elite{
display: inline-block;
}
.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/house.css
View file @ c7632c96
......@@ -27,4 +27,98 @@
background-color: #979797;
}
#my_house {
display: grid;
grid-template: "area-1" 500px "area-2" 500px/1fr;
}
#my_house #area_1 {
display: grid;
grid-template: "war-participation members"/500px 1fr;
}
#my_house #area_1 table-wrapper {
width: 100%;
margin: 0px;
}
#my_house #area_1 war-participation {
grid-area: war-participation;
padding: 10px;
}
#my_house #area_1 members-area {
grid-area: members;
padding: 10px;
}
#my_house #area_1 members-area .table_header {
text-align: center;
font-size: 20px;
}
#my_house #area_1 members-area detail {
left: 50%;
height: 350px;
width: 400px;
margin-left: -200px;
padding-top: 20px;
}
#my_house #area_1 members-area .weapon_img {
height: 200px;
width: 200px;
}
#my_house #area_1 members-area #role {
margin-top: 10px;
width: 100px;
}
#my_house #area_1 members-area .detail_buttons button {
margin-top: 10px;
}
#my_house #area_2 {
display: grid;
grid-template: "requests member-units"/500px 1fr;
}
#my_house #area_2 requests-area {
grid-area: requests;
padding: 10px;
}
#my_house #area_2 requests-area .dataTable tr.even.active {
background-color: #979797;
}
#my_house #area_2 requests-area .dataTable tr.even.active td.sorting_1 {
background-color: #979797;
}
#my_house #area_2 requests-area .dataTable tr.odd.active {
background-color: #979797;
}
#my_house #area_2 requests-area .dataTable tr.odd.active td.sorting_1 {
background-color: #979797;
}
#my_house #area_2 requests-area .table_header .title {
text-align: left;
display: inline;
}
#my_house #area_2 requests-area .table_header .title p {
display: inline;
text-align: left;
}
#my_house #area_2 requests-area #accept:hover {
background-color: #77be77;
}
#my_house #area_2 requests-area #reject:hover {
background-color: #be7777;
}
#my_house #area_2 member-units {
grid-area: member-units;
}
#my_house #area_2 member-units .table_header .title {
text-align: left;
display: inline;
}
#my_house #area_2 member-units .table_header .title p {
display: inline;
text-align: left;
}
#my_house .table_header {
text-align: right;
}
#my_house .table_header button {
color: #cccccc;
}
/*# sourceMappingURL=house.css.map */
web/stylesheets/house.css.map
View file @ c7632c96
{"version":3,"sourceRoot":"","sources":["../sass/house.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AACA;EACI;;AAGR;EACI;;AACA;EACI","file":"house.css"}
\ No newline at end of file
{"version":3,"sourceRoot":"","sources":["../sass/house.scss"],"names":[],"mappings":"AAAA;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AACA;EACI;;AAGR;EACI;;AACA;EACI;;;AAMhB;EACI;EACA,eACI;;AAIJ;EACI;EACA,eACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAIA;EACI;;AAKhB;EACI;EACA,eACI;;AAGJ;EACI;EACA;;AAII;EACI;;AACA;EACI;;AAGR;EACI;;AACA;EACI;;AAMR;EACI;EACA;;AACA;EACI;EACA;;AAIZ;EACI;;AAEJ;EACI;;AAGR;EACI;;AAII;EACI;EACA;;AACA;EACI;EACA;;AAOpB;EACI;;AACA;EACI","file":"house.css"}
\ No newline at end of file
web/stylesheets/login.css
View file @ c7632c96
......@@ -11,37 +11,6 @@ center-div {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.tab {
overflow: hidden;
background-color: #383838;
border: 1px solid #ccc;
border-bottom: none;
}
.tab button {
font-family: monospace;
font-size: 20px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
......
web/stylesheets/login.css.map
View file @ c7632c96
{"version":3,"sourceRoot":"","sources":["../sass/login.scss"],"names":[],"mappings":"AAAA;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","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;;;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","file":"login.css"}
\ No newline at end of file
web/stylesheets/main.css
View file @ c7632c96
......@@ -124,6 +124,37 @@ bar-user .dropdown:hover {
background-color: #5f1a1a;
}
.table_header {
overflow: hidden;
background-color: #383838;
border: 1px solid #ccc;
border-bottom: none;
}
.table_header button {
font-family: monospace;
font-size: 20px;
}
/* Style the buttons that are used to open the tab content */
.table_header button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.table_header button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.table_header button.active {
background-color: #ccc;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: whitesmoke !important;
}
......@@ -150,12 +181,65 @@ table.dataTable.display tbody tr.even .sorting_1 {
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
text-align: center;
}
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
.overflow_table {
overflow: auto;
max-width: 100%;
width: 100%;
padding-top: 10px;
}
table-detail {
grid-template: "table details"/1fr 600px;
display: grid;
position: relative;
}
table-wrapper {
grid-area: table;
display: inline-block;
}
detail {
grid-area: details;
text-align: center;
position: absolute;
display: inline-block;
background-color: #1b1b1b;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 20px;
}
detail .detail_name {
padding-top: 10px;
font-size: 25px;
display: block;
}
detail .detail_buttons {
display: inline;
}
detail .detail_buttons button {
left: 50%;
height: 30px;
width: 60px;
background-color: grey;
border-radius: 3px;
color: whitesmoke;
text-align: center;
}
detail .add_button {
background-color: green !important;
border: 2px solid #036614;
}
detail .modify_button {
background-color: #3535ff !important;
border: 2px solid #04047c;
}
detail .delete_button {
background-color: red !important;
border: 2px solid #530303;
}
center-div {
......@@ -171,37 +255,6 @@ center-div {
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.tab {
overflow: hidden;
background-color: #383838;
border: 1px solid #ccc;
border-bottom: none;
}
.tab button {
font-family: monospace;
font-size: 20px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
......@@ -260,55 +313,26 @@ center-div {
.my_units {
background-color: #8d0b0b;
max-width: 600px;
}
.overflow_table {
overflow: auto;
max-width: 100%;
width: 100%;
}
table-component {
grid-template: "table details" 600px/1fr 600px;
display: grid;
position: relative;
}
table-wrapper {
grid-area: table;
display: inline-block;
#myunits table-wrapper {
margin-top: 50px;
margin-left: 50px;
margin-right: 25px;
min-width: 300px;
}
unit-detail {
grid-area: details;
text-align: center;
position: absolute;
display: inline-block;
background-color: #1b1b1b;
#myunits detail {
height: 600px;
width: 100%;
margin-top: 50px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 20px;
}
.unit_img {
width: 300px;
height: 400px;
background-color: #b8b8b8;
border: 2px solid #535353;
}
.unit_name {
padding-top: 10px;
font-size: 25px;
display: block;
}
.unit_level {
......@@ -324,34 +348,6 @@ unit-detail {
display: inline-block;
}
.unit_button {
display: inline;
}
.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;
}
.house_table {
position: absolute;
text-align: center;
......@@ -381,6 +377,100 @@ unit-detail {
background-color: #979797;
}
#my_house {
display: grid;
grid-template: "area-1" 500px "area-2" 500px/1fr;
}
#my_house #area_1 {
display: grid;
grid-template: "war-participation members"/500px 1fr;
}
#my_house #area_1 table-wrapper {
width: 100%;
margin: 0px;
}
#my_house #area_1 war-participation {
grid-area: war-participation;
padding: 10px;
}
#my_house #area_1 members-area {
grid-area: members;
padding: 10px;
}
#my_house #area_1 members-area .table_header {
text-align: center;
font-size: 20px;
}
#my_house #area_1 members-area detail {
left: 50%;
height: 350px;
width: 400px;
margin-left: -200px;
padding-top: 20px;
}
#my_house #area_1 members-area .weapon_img {
height: 200px;
width: 200px;
}
#my_house #area_1 members-area #role {
margin-top: 10px;
width: 100px;
}
#my_house #area_1 members-area .detail_buttons button {
margin-top: 10px;
}
#my_house #area_2 {
display: grid;
grid-template: "requests member-units"/500px 1fr;
}
#my_house #area_2 requests-area {
grid-area: requests;
padding: 10px;
}
#my_house #area_2 requests-area .dataTable tr.even.active {
background-color: #979797;
}
#my_house #area_2 requests-area .dataTable tr.even.active td.sorting_1 {
background-color: #979797;
}
#my_house #area_2 requests-area .dataTable tr.odd.active {
background-color: #979797;
}
#my_house #area_2 requests-area .dataTable tr.odd.active td.sorting_1 {
background-color: #979797;
}
#my_house #area_2 requests-area .table_header .title {
text-align: left;
display: inline;
}
#my_house #area_2 requests-area .table_header .title p {
display: inline;
text-align: left;
}
#my_house #area_2 requests-area #accept:hover {
background-color: #77be77;
}
#my_house #area_2 requests-area #reject:hover {
background-color: #be7777;
}
#my_house #area_2 member-units {
grid-area: member-units;
}
#my_house #area_2 member-units .table_header .title {
text-align: left;
display: inline;
}
#my_house #area_2 member-units .table_header .title p {
display: inline;
text-align: left;
}
#my_house .table_header {
text-align: right;
}
#my_house .table_header button {
color: #cccccc;
}
body {
font-family: Roboto;
background-color: #313131;
......@@ -402,4 +492,9 @@ content-body {
color: #1414a1;
}
img {
background-color: #b8b8b8;
border: 2px solid #535353;
}
/*# sourceMappingURL=main.css.map */
web/stylesheets/main.css.map
View file @ c7632c96
{"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;;AAGA;EACI;;AACA;EACI;;AAGR;EACI;;AACA;EACI;;;ACnBhB;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;EAEA;EACA;EACA;;AACA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAIJ;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,eACI;EAGJ;EACA;;;AAEJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;;ACxHR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;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;;;AClDJ;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACQ;EACA;EACA;EACA;;;AAGR;EACI;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI;;;AC7CJ;EACI;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGA;EACI;;AACA;EACI;;AAGR;EACI;;AACA;EACI;;;AAMhB;EACI;EACA,eACI;;AAIJ;EACI;EACA,eACI;;AAGJ;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAGA;EACI;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA;;AAIA;EACI;;AAKhB;EACI;EACA,eACI;;AAGJ;EACI;EACA;;AAII;EACI;;AACA;EACI;;AAGR;EACI;;AACA;EACI;;AAMR;EACI;EACA;;AACA;EACI;EACA;;AAIZ;EACI;;AAEJ;EACI;;AAGR;EACI;;AAII;EACI;EACA;;AACA;EACI;EACA;;AAOpB;EACI;;AACA;EACI;;;AC9IZ;EACI;EACA;EACA;EACA;EACA,eACI;;;AAKR;EACI;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;;;AAIR;EACI;EACA","file":"main.css"}
\ No newline at end of file
web/stylesheets/table.css
View file @ c7632c96
.table_header {
overflow: hidden;
background-color: #383838;
border: 1px solid #ccc;
border-bottom: none;
}
.table_header button {
font-family: monospace;
font-size: 20px;
}
/* Style the buttons that are used to open the tab content */
.table_header button {
background-color: inherit;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.table_header button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.table_header button.active {
background-color: #ccc;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
color: whitesmoke !important;
}
......@@ -24,12 +55,65 @@ table.dataTable.display tbody tr.even .sorting_1 {
padding: 10px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
text-align: center;
}
.overflow_table {
overflow: auto;
max-width: 100%;
width: 100%;
padding-top: 10px;
}
table-detail {
grid-template: "table details"/1fr 600px;
display: grid;
position: relative;
}
table-wrapper {
grid-area: table;
display: inline-block;
}
table_component {
margin-top: 50px;
grid-area: content;
grid-template: "table details"/1fr 200px;
detail {
grid-area: details;
text-align: center;
position: absolute;
display: inline-block;
background-color: #1b1b1b;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 20px;
}
detail .detail_name {
padding-top: 10px;
font-size: 25px;
display: block;
}
detail .detail_buttons {
display: inline;
}
detail .detail_buttons button {
left: 50%;
height: 30px;
width: 60px;
background-color: grey;
border-radius: 3px;
color: whitesmoke;
text-align: center;
}
detail .add_button {
background-color: green !important;
border: 2px solid #036614;
}
detail .modify_button {
background-color: #3535ff !important;
border: 2px solid #04047c;
}
detail .delete_button {
background-color: red !important;
border: 2px solid #530303;
}
/*# sourceMappingURL=table.css.map */
web/stylesheets/table.css.map
View file @ c7632c96
{"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
{"version":3,"sourceRoot":"","sources":["../sass/table.scss"],"names":[],"mappings":"AAAA;EACI;EAEA;EACA;EACA;;AACA;EACI;EACA;;;AAIN;AACF;EACI;EAEA;EACA;EACA;EACA;EACA;;;AAGF;AACF;EACI;;;AAGF;AACF;EACI;;;AAIJ;EACI;;;AAEJ;EACI;;AAEA;EACI;;;AAKR;EACI;;AACA;EACI;;;AAGR;EACI;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACI,eACI;EAGJ;EACA;;;AAEJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAEJ;EACI;;AACA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGR;EACI;EACA;;AAEJ;EACI;EACA;;AAEJ;EACI;EACA","file":"table.css"}
\ No newline at end of file
web/stylesheets/unit.css
View file @ c7632c96
......@@ -11,55 +11,26 @@
.my_units {
background-color: #8d0b0b;
max-width: 600px;
}
.overflow_table {
overflow: auto;
max-width: 100%;
width: 100%;
}
table-component {
grid-template: "table details" 600px/1fr 600px;
display: grid;
position: relative;
}
table-wrapper {
grid-area: table;
display: inline-block;
#myunits table-wrapper {
margin-top: 50px;
margin-left: 50px;
margin-right: 25px;
min-width: 300px;
}
unit-detail {
grid-area: details;
text-align: center;
position: absolute;
display: inline-block;
background-color: #1b1b1b;
#myunits detail {
height: 600px;
width: 100%;
margin-top: 50px;
outline: 1px black solid;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
padding-top: 20px;
}
.unit_img {
width: 300px;
height: 400px;
background-color: #b8b8b8;
border: 2px solid #535353;
}
.unit_name {
padding-top: 10px;
font-size: 25px;
display: block;
}
.unit_level {
......@@ -75,32 +46,4 @@ unit-detail {
display: inline-block;
}
.unit_button {
display: inline;
}
.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 @ c7632c96
{"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
{"version":3,"sourceRoot":"","sources":["../sass/unit.scss"],"names":[],"mappings":"AACA;EACI;EACA;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;;;AAGJ;EACI;EACA;EACA;EACA;;;AAGJ;EACQ;EACA;EACA;EACA;;;AAGR;EACI;EACA;;;AAGJ;EACI;EACA;;AACA;EACI;EACA;;;AAGR;EACI","file":"unit.css"}
\ No newline at end of file
web/views/table_view.js
View file @ c7632c96
......@@ -10,9 +10,9 @@ class TableView extends EventTarget{
if(!columns){
throw Error('Columns are needed');
}
this.$element = element;
this.$element = $(element);
this.columns = columns;
this.$table = element.find('#data_table');
this.$table = this.$element.find('#data_table');
this.datatable = this.$table.DataTable({
columns: this.columns
});
......
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