Skip to content

Commit dba287c

Browse files
Hagellach37Hagellach37
committed
add data tables for manager dashboard
1 parent 188299a commit dba287c

File tree

6 files changed

+181
-102
lines changed

6 files changed

+181
-102
lines changed

‎manager_dashboard/manager_dashboard/css/bootstrap.min.css‎

Lines changed: 7 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎manager_dashboard/manager_dashboard/css/dataTables.bootstrap.min.css‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎manager_dashboard/manager_dashboard/css/mapswipe.css‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -134,4 +134,9 @@
134134
}
135135

136136
#geometryMap { height: 300px; width: 100%}
137-
#geometryChangeDetectionMap { height: 300px; width: 100%}
137+
#geometryChangeDetectionMap { height: 300px; width: 100%}
138+
139+
div.project-data {
140+
padding-bottom: 50px !important;
141+
padding-top: 25px !important;
142+
}

‎manager_dashboard/manager_dashboard/js/bootstrap.min.js‎

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎manager_dashboard/manager_dashboard/js/project-management.js‎

Lines changed: 65 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,13 @@
11
function getProjects(status) {
22
var ProjectsRef = firebase.database().ref("v2/projects").orderByChild("status").equalTo(status);
3-
var table = document.createElement('table')
4-
table.classList.add("table")
5-
var tbody = document.createElement('tbody');
63

7-
tr = document.createElement('tr')
8-
th = document.createElement('th')
9-
th.innerHTML = "Project ID"
10-
tr.appendChild(th)
11-
12-
th = document.createElement('th')
13-
th.innerHTML = "Name"
14-
tr.appendChild(th)
15-
16-
th = document.createElement('th')
17-
th.innerHTML = "Project Type"
18-
tr.appendChild(th)
19-
20-
th = document.createElement('th')
21-
th.innerHTML = "Progress"
22-
tr.appendChild(th)
23-
24-
th = document.createElement('th')
25-
th.innerHTML = "Status"
26-
tr.appendChild(th)
27-
28-
th = document.createElement('th')
29-
th.innerHTML = "IsFeatured"
30-
tr.appendChild(th)
31-
32-
th = document.createElement('th')
33-
th.innerHTML = "Change Status"
34-
tr.appendChild(th)
35-
36-
th = document.createElement('th')
37-
th.innerHTML = "Change isFeatured"
38-
tr.appendChild(th)
39-
40-
tr.appendChild(th)
41-
tbody.appendChild(tr)
4+
var tableRef = document.getElementById('projectsTable-'+status).getElementsByTagName('tbody')[0];
425

436
ProjectsRef.once('value', function(snapshot){
447
if(snapshot.exists()){
458
snapshot.forEach(function(data){
46-
tr = document.createElement('tr')
479

10+
tr = tableRef.insertRow();
4811
td = document.createElement('td')
4912
td.innerHTML = data.key
5013
tr.appendChild(td)
@@ -73,47 +36,63 @@ function getProjects(status) {
7336
}
7437
tr.appendChild(td)
7538

39+
7640
td = document.createElement('td')
77-
btn = document.createElement('button')
78-
btn.id = data.key
79-
btn.classList.add("btn")
80-
btn.classList.add("btn-warning")
81-
btn.classList.add("status-"+data.val().status)
82-
btn.addEventListener("click", changeProjectStatus)
8341

8442
if (data.val().status == "inactive") {
85-
btn.innerHTML = "Activate"
43+
btn = addButton(data.key, data.val().status, "active")
44+
td.appendChild(btn)
45+
btn = addButton(data.key, data.val().status, "finished")
46+
td.appendChild(btn)
8647
} else if (data.val().status == "active") {
87-
btn.innerHTML = "Deactivate"
48+
btn = addButton(data.key, data.val().status, "inactive")
49+
td.appendChild(btn)
50+
btn = addButton(data.key, data.val().status, "finished")
51+
td.appendChild(btn)
8852
} else if (data.val().status == "new") {
89-
btn.innerHTML = "Activate"
53+
btn = addButton(data.key, data.val().status, "active")
54+
td.appendChild(btn)
55+
} else if (data.val().status == "finished") {
56+
btn = addButton(data.key, data.val().status, "inactive")
57+
td.appendChild(btn)
9058
}
91-
td.appendChild(btn)
9259
tr.appendChild(td)
9360

94-
td = document.createElement('td')
95-
btn = document.createElement('button')
96-
btn.id = data.key
97-
btn.classList.add("btn")
98-
btn.classList.add("btn-warning")
99-
btn.classList.add("isFeatured-"+data.val().isFeatured)
100-
btn.addEventListener("click", changeProjectIsFeatured)
101-
102-
if (data.val().isFeatured === true) {
103-
btn.innerHTML = 'set to "false"'
104-
} else if (data.val().isFeatured === false) {
105-
btn.innerHTML = 'set to "true"'
61+
if (data.val().status == "active"){
62+
td = document.createElement('td')
63+
btn = document.createElement('button')
64+
btn.id = data.key
65+
btn.classList.add("btn")
66+
btn.classList.add("btn-warning")
67+
btn.classList.add("isFeatured-"+data.val().isFeatured)
68+
btn.addEventListener("click", changeProjectIsFeatured)
69+
70+
if (data.val().isFeatured === true) {
71+
btn.innerHTML = 'set to "false"'
72+
} else if (data.val().isFeatured === false) {
73+
btn.innerHTML = 'set to "true"'
74+
}
75+
td.appendChild(btn)
76+
tr.appendChild(td)
10677
}
107-
td.appendChild(btn)
108-
tr.appendChild(td)
109-
110-
tbody.appendChild(tr)
111-
11278
});
113-
}
79+
};
80+
$("#projectsTable-"+status).DataTable();
81+
$('.dataTables_length').addClass('bs-select');
11482
});
115-
table.appendChild(tbody)
116-
document.getElementById(status + "-projects").appendChild(table)
83+
84+
}
85+
86+
function addButton(id, oldStatus, newStatus){
87+
btn = document.createElement('button')
88+
btn.id = id
89+
btn.classList.add("btn")
90+
btn.classList.add("btn-warning")
91+
btn.classList.add("new-status-"+newStatus)
92+
btn.addEventListener("click", changeProjectStatus)
93+
btn.innerHTML = "set to '"+newStatus+"'"
94+
95+
return btn
11796
}
11897

11998
function updateStatus(projectId, newStatus) {
@@ -133,42 +112,45 @@ function updateIsFeatured(projectId, newStatus) {
133112
}
134113

135114
function updateTableView() {
136-
var newProjects = document.getElementById("new-projects")
115+
var newProjects = document.getElementById("projectsTable-new").getElementsByTagName('tbody')[0]
137116
while (newProjects.firstChild) {
138117
newProjects.removeChild(newProjects.firstChild);
139118
}
140119

141-
var inactiveProjects = document.getElementById("inactive-projects")
120+
var inactiveProjects = document.getElementById("projectsTable-inactive").getElementsByTagName('tbody')[0]
142121
while (inactiveProjects.firstChild) {
143122
inactiveProjects.removeChild(inactiveProjects.firstChild);
144123
}
145124

146-
var activeProjects = document.getElementById("active-projects")
125+
var activeProjects = document.getElementById("projectsTable-active").getElementsByTagName('tbody')[0]
147126
while (activeProjects.firstChild) {
148127
activeProjects.removeChild(activeProjects.firstChild);
149128
}
150129

130+
var finishedProjects = document.getElementById("projectsTable-finished").getElementsByTagName('tbody')[0]
131+
while (finishedProjects.firstChild) {
132+
finishedProjects.removeChild(finishedProjects.firstChild);
133+
}
134+
151135
getProjects("new")
152136
getProjects("active")
153137
getProjects("inactive")
138+
getProjects("finished")
154139
}
155140

156141

157142
function changeProjectStatus() {
158143
console.log('project selected: ' + this.id)
159144

160-
if (this.classList.contains("status-active")){
161-
console.log("current status: active")
162-
updateStatus(this.id, "inactive")
163-
console.log("new status: inactive")
164-
} else if (this.classList.contains("status-inactive")) {
165-
console.log("current status: inactive")
166-
updateStatus(this.id, "active")
167-
console.log("new status: active")
168-
} else if (this.classList.contains("status-new")) {
169-
console.log("current status: new")
145+
if (this.classList.contains("new-status-active")){
170146
updateStatus(this.id, "active")
171147
console.log("new status: active")
148+
} else if (this.classList.contains("new-status-inactive")) {
149+
updateStatus(this.id, "inactive")
150+
console.log("new status: inactive")
151+
} else if (this.classList.contains("new-status-finished")) {
152+
updateStatus(this.id, "finished")
153+
console.log("new status: finished")
172154
}
173155
updateTableView()
174156
}
@@ -192,3 +174,4 @@ function changeProjectIsFeatured() {
192174
getProjects("new")
193175
getProjects("active")
194176
getProjects("inactive")
177+
getProjects("finished")

‎manager_dashboard/manager_dashboard/manage.html‎

Lines changed: 90 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,11 +16,20 @@
1616

1717
<script src="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.js"></script>
1818
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />
19-
19+
<link type="text/css" rel="stylesheet" href="css/mapswipe.css" />
2020
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
21-
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
21+
<!-- <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> -->
22+
23+
<!-- Add Bootstrap -->
24+
<link rel="stylesheet" href="css/bootstrap.min.css">
25+
26+
<!-- Add Data Tables -->
27+
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
28+
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
29+
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
30+
<script src="js/bootstrap.min.js"></script>
2231
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
23-
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
32+
2433

2534
<script
2635
src="https://browser.sentry-cdn.com/5.7.1/bundle.min.js"
@@ -75,20 +84,82 @@ <h3>Please <a href="index.html">log in</a> first.</h3>
7584
<!-- manage existing projects -->
7685
<div class="row justify-content-center" id="project-management" style="display: block">
7786
<div class="col-md-12">
78-
<h2>New Projects</h2>
79-
<div id="new-projects">
80-
<div id="new-projects-table"></div>
81-
</div>
82-
<h2>Active Projects</h2>
83-
<div id="active-projects">
84-
<div id="active-projects-table"></div>
87+
<div id="new-projects" class="col-md-12 project-data">
88+
<h2>New Projects</h2>
89+
<table id="projectsTable-new" class="table table-striped table-bordered">
90+
<thead>
91+
<tr class="thead-inverse">
92+
<th>Project ID</th>
93+
<th>Name</th>
94+
<th>Project Type</th>
95+
<th>Progress</th>
96+
<th>Status</th>
97+
<th>IsFeatures</th>
98+
<th>Change Status</th>
99+
</tr>
100+
</thead>
101+
<tbody>
102+
<!-- will be added by function -->
103+
</tbody>
104+
</table>
105+
</div>
106+
<div id="active-projects" class="col-md-12 project-data">
107+
<h2>Active Projects</h2>
108+
<table id="projectsTable-active" class="table table-striped table-bordered">
109+
<thead>
110+
<tr class="thead-inverse">
111+
<th>Project ID</th>
112+
<th>Name</th>
113+
<th>Project Type</th>
114+
<th>Progress</th>
115+
<th>Status</th>
116+
<th>IsFeatures</th>
117+
<th>Change Status</th>
118+
<th>Change isFeatured</th>
119+
</tr>
120+
</thead>
121+
<tbody>
122+
<!-- will be added by function -->
123+
</tbody>
124+
</table>
85125
</div>
86-
</div>
87-
<div class="col-md-12">
126+
<div id="inactive-projects" class="col-md-12 project-data">
88127
<h2>Inactive Projects</h2>
89-
<div id="inactive-projects">
90-
91-
<div id="inactive-projects-table"></div>
128+
<table id="projectsTable-inactive" class="table table-striped table-bordered">
129+
<thead>
130+
<tr class="thead-inverse">
131+
<th>Project ID</th>
132+
<th>Name</th>
133+
<th>Project Type</th>
134+
<th>Progress</th>
135+
<th>Status</th>
136+
<th>IsFeatures</th>
137+
<th>Change Status</th>
138+
</tr>
139+
</thead>
140+
<tbody>
141+
<!-- will be added by function -->
142+
</tbody>
143+
</table>
144+
</div>
145+
<div id="finished-projects" class="col-md-12 project-data">
146+
<h2>Finished Projects</h2>
147+
<table id="projectsTable-finished" class="table table-striped table-bordered">
148+
<thead>
149+
<tr class="thead-inverse">
150+
<th>Project ID</th>
151+
<th>Name</th>
152+
<th>Project Type</th>
153+
<th>Progress</th>
154+
<th>Status</th>
155+
<th>IsFeatures</th>
156+
<th>Change Status</th>
157+
</tr>
158+
</thead>
159+
<tbody>
160+
<!-- will be added by function -->
161+
</tbody>
162+
</table>
92163
</div>
93164
</div>
94165
</div>
@@ -103,14 +174,14 @@ <h2>Inactive Projects</h2>
103174
</div>
104175
</footer>
105176

106-
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
177+
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> -->
107178
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
108179
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-auth.js"></script>
109180
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-firestore.js"></script>
110181
<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js"></script>
111-
<script src="js/app.js"></script>
112-
<script src="js/ui.js"></script>
113-
<script src="js/project-management.js"></script>
182+
<script async defer src="js/app.js"></script>
183+
<script async defer src="js/ui.js"></script>
184+
<script async defer src="js/project-management.js"></script>
114185

115186
</body>
116187
</html>

0 commit comments

Comments
 (0)