Skip to content

Commit 4c5ff5a

Browse files
committed
use datatables add and remove row
1 parent 0fbaf8a commit 4c5ff5a

File tree

7 files changed

+124
-97
lines changed

7 files changed

+124
-97
lines changed

manager_dashboard/manager_dashboard/create.html

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,31 @@
1414
<meta name="twitter:card" content="summary">
1515
<meta name="viewport" content="width=device-width, initial-scale=1">
1616

17+
<!-- add firebase -->
1718
<script src="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.js"></script>
1819
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />
1920

20-
<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+
<!-- add jquery, ajax -->
22+
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2223
<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>
24+
25+
<!-- Add Bootstrap -->
26+
<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">
27+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
28+
29+
<!-- Add Data Tables -->
30+
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
31+
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
32+
33+
<!-- add mapswipe styles -->
2434
<link type="text/css" rel="stylesheet" href="css/mapswipe.css" />
25-
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
26-
integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
27-
crossorigin=""/>
28-
<!-- Make sure you put this AFTER Leaflet's CSS -->
29-
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"
30-
integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
31-
crossorigin=""></script>
35+
36+
<!-- add leaflet and turf.js -->
37+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
38+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
3239
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
3340

41+
<!-- add sentry -->
3442
<script
3543
src="https://browser.sentry-cdn.com/5.7.1/bundle.min.js"
3644
integrity="sha384-KMv6bBTABABhv0NI+rVWly6PIRvdippFEgjpKyxUcpEmDWZTkDOiueL5xW+cztZZ"

manager_dashboard/manager_dashboard/css/bootstrap.min.css

Lines changed: 0 additions & 7 deletions
This file was deleted.

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

Lines changed: 0 additions & 1 deletion
This file was deleted.

manager_dashboard/manager_dashboard/css/mapswipe.css

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -139,4 +139,26 @@
139139
div.project-data {
140140
padding-bottom: 50px !important;
141141
padding-top: 25px !important;
142+
}
143+
144+
145+
/* adjust data tables styles */
146+
.table {
147+
border-spacing: 0px !important;
148+
}
149+
150+
th.sorting::after{
151+
content: "\2195" !important;
152+
}
153+
154+
th.sorting_asc::after{
155+
content: "\2193" !important;
156+
}
157+
158+
th.sorting_desc::after{
159+
content: "\2191" !important;
160+
}
161+
162+
.paginate_button {
163+
padding: 2.5px !important;
142164
}

manager_dashboard/manager_dashboard/index.html

Lines changed: 20 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,14 +14,31 @@
1414
<meta name="twitter:card" content="summary">
1515
<meta name="viewport" content="width=device-width, initial-scale=1">
1616

17+
<!-- add firebase -->
1718
<script src="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.js"></script>
1819
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />
1920

20-
<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+
<!-- add jquery, ajax -->
22+
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
2223
<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>
2424

25+
<!-- Add Bootstrap -->
26+
<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">
27+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
28+
29+
<!-- Add Data Tables -->
30+
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css">
31+
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
32+
33+
<!-- add mapswipe styles -->
34+
<link type="text/css" rel="stylesheet" href="css/mapswipe.css" />
35+
36+
<!-- add leaflet and turf.js -->
37+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
38+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
39+
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
40+
41+
<!-- add sentry -->
2542
<script
2643
src="https://browser.sentry-cdn.com/5.7.1/bundle.min.js"
2744
integrity="sha384-KMv6bBTABABhv0NI+rVWly6PIRvdippFEgjpKyxUcpEmDWZTkDOiueL5xW+cztZZ"

manager_dashboard/manager_dashboard/js/project-management.js

Lines changed: 48 additions & 68 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,42 @@
11
function getProjects(status) {
22
var ProjectsRef = firebase.database().ref("v2/projects").orderByChild("status").equalTo(status);
33

4-
var tableRef = document.getElementById('projectsTable-'+status).getElementsByTagName('tbody')[0];
5-
4+
var tableRef = $("#projectsTable-"+status).DataTable();
5+
var rows = []
66
ProjectsRef.once('value', function(snapshot){
77
if(snapshot.exists()){
88
snapshot.forEach(function(data){
99

10-
tr = tableRef.insertRow();
11-
td = document.createElement('td')
12-
td.innerHTML = data.key
13-
tr.appendChild(td)
14-
15-
td = document.createElement('td')
16-
td.innerHTML = data.val().name
17-
tr.appendChild(td)
18-
19-
td = document.createElement('td')
20-
td.innerHTML = data.val().projectType
21-
tr.appendChild(td)
22-
23-
td = document.createElement('td')
24-
td.innerHTML = data.val().progress + "%"
25-
tr.appendChild(td)
26-
27-
td = document.createElement('td')
28-
td.innerHTML = data.val().status
29-
tr.appendChild(td)
30-
31-
td = document.createElement('td')
10+
row_array = []
11+
row_array.push(data.key)
12+
row_array.push(data.val().name)
13+
row_array.push(data.val().projectType)
14+
row_array.push(data.val().progress + "%")
15+
row_array.push(data.val().status)
3216
if (data.val().isFeatured === true) {
33-
td.innerHTML = "<b>"+data.val().isFeatured+"</b>"
17+
row_array.push("<b>"+data.val().isFeatured+"</b>")
3418
} else if (data.val().isFeatured === false) {
35-
td.innerHTML = data.val().isFeatured
19+
row_array.push(data.val().isFeatured)
3620
}
37-
tr.appendChild(td)
38-
39-
40-
td = document.createElement('td')
4121

4222
if (data.val().status == "inactive") {
4323
btn = addButton(data.key, data.val().status, "active")
44-
td.appendChild(btn)
24+
row_array.push(btn.outerHTML)
4525
btn = addButton(data.key, data.val().status, "finished")
46-
td.appendChild(btn)
26+
row_array.push(btn.outerHTML)
4727
} else if (data.val().status == "active") {
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)
28+
btn1 = addButton(data.key, data.val().status, "inactive")
29+
btn2 = addButton(data.key, data.val().status, "finished")
30+
row_array.push(btn1.outerHTML + btn2.outerHTML)
5231
} else if (data.val().status == "new") {
5332
btn = addButton(data.key, data.val().status, "active")
54-
td.appendChild(btn)
33+
row_array.push(btn.outerHTML)
5534
} else if (data.val().status == "finished") {
5635
btn = addButton(data.key, data.val().status, "inactive")
57-
td.appendChild(btn)
36+
row_array.push(btn.outerHTML)
5837
}
59-
tr.appendChild(td)
6038

6139
if (data.val().status == "active"){
62-
td = document.createElement('td')
6340
btn = document.createElement('button')
6441
btn.id = data.key
6542
btn.classList.add("btn")
@@ -72,13 +49,23 @@ function getProjects(status) {
7249
} else if (data.val().isFeatured === false) {
7350
btn.innerHTML = 'set to "true"'
7451
}
75-
td.appendChild(btn)
76-
tr.appendChild(td)
52+
row_array.push(btn.outerHTML)
7753
}
54+
55+
rows.push(row_array)
56+
tableRef.row.add(row_array).draw( false )
7857
});
7958
};
80-
$("#projectsTable-"+status).DataTable();
59+
8160
$('.dataTables_length').addClass('bs-select');
61+
console.log('added data table styles')
62+
63+
var btns = document.getElementsByClassName('change-status')
64+
for (let item of btns) {
65+
item.addEventListener("click", changeProjectStatus)
66+
}
67+
68+
8269
});
8370

8471
}
@@ -88,8 +75,8 @@ function addButton(id, oldStatus, newStatus){
8875
btn.id = id
8976
btn.classList.add("btn")
9077
btn.classList.add("btn-warning")
78+
btn.classList.add("change-status")
9179
btn.classList.add("new-status-"+newStatus)
92-
btn.addEventListener("click", changeProjectStatus)
9380
btn.innerHTML = "set to '"+newStatus+"'"
9481

9582
return btn
@@ -112,30 +99,23 @@ function updateIsFeatured(projectId, newStatus) {
11299
}
113100

114101
function updateTableView() {
115-
var newProjects = document.getElementById("projectsTable-new").getElementsByTagName('tbody')[0]
116-
while (newProjects.firstChild) {
117-
newProjects.removeChild(newProjects.firstChild);
118-
}
119-
120-
var inactiveProjects = document.getElementById("projectsTable-inactive").getElementsByTagName('tbody')[0]
121-
while (inactiveProjects.firstChild) {
122-
inactiveProjects.removeChild(inactiveProjects.firstChild);
123-
}
124-
125-
var activeProjects = document.getElementById("projectsTable-active").getElementsByTagName('tbody')[0]
126-
while (activeProjects.firstChild) {
127-
activeProjects.removeChild(activeProjects.firstChild);
128-
}
129-
130-
var finishedProjects = document.getElementById("projectsTable-finished").getElementsByTagName('tbody')[0]
131-
while (finishedProjects.firstChild) {
132-
finishedProjects.removeChild(finishedProjects.firstChild);
133-
}
134-
135-
getProjects("new")
136-
getProjects("active")
137-
getProjects("inactive")
138-
getProjects("finished")
102+
console.log('hello update table view')
103+
status_array = ["new", "active", "inactive", "finished"]
104+
105+
for (var i = 0; i < status_array.length; i++) {
106+
status = status_array[i]
107+
108+
var tableRef = $("#projectsTable-"+status).DataTable();
109+
var rows = tableRef
110+
.rows()
111+
.remove()
112+
.draw();
113+
}
114+
115+
getProjects("new")
116+
getProjects("active")
117+
getProjects("inactive")
118+
getProjects("finished")
139119
}
140120

141121

manager_dashboard/manager_dashboard/manage.html

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -14,23 +14,31 @@
1414
<meta name="twitter:card" content="summary">
1515
<meta name="viewport" content="width=device-width, initial-scale=1">
1616

17+
<!-- add firebase -->
1718
<script src="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.js"></script>
1819
<link type="text/css" rel="stylesheet" href="https://cdn.firebase.com/libs/firebaseui/4.0.0/firebaseui.css" />
19-
<link type="text/css" rel="stylesheet" href="css/mapswipe.css" />
20-
<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> -->
2220

23-
<!-- Add Bootstrap -->
24-
<link rel="stylesheet" href="css/bootstrap.min.css">
21+
<!-- add jquery, ajax -->
22+
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
23+
<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>
24+
25+
<!-- Add Bootstrap -->
26+
<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">
27+
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
2528

2629
<!-- Add Data Tables -->
2730
<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>
2931
<script src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
30-
<script src="js/bootstrap.min.js"></script>
31-
<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>
3232

33+
<!-- add mapswipe styles -->
34+
<link type="text/css" rel="stylesheet" href="css/mapswipe.css" />
35+
36+
<!-- add leaflet and turf.js -->
37+
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ==" crossorigin=""/>
38+
<script src="https://unpkg.com/[email protected]/dist/leaflet.js" integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og==" crossorigin=""></script>
39+
<script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
3340

41+
<!-- add sentry -->
3442
<script
3543
src="https://browser.sentry-cdn.com/5.7.1/bundle.min.js"
3644
integrity="sha384-KMv6bBTABABhv0NI+rVWly6PIRvdippFEgjpKyxUcpEmDWZTkDOiueL5xW+cztZZ"

0 commit comments

Comments
 (0)