11function 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' ) ;
6-
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 )
423
4+ var tableRef = $ ( "#projectsTable-" + status ) . DataTable ( ) ;
5+ var rows = [ ]
436 ProjectsRef . once ( 'value' , function ( snapshot ) {
447 if ( snapshot . exists ( ) ) {
458 snapshot . forEach ( function ( data ) {
46- tr = document . createElement ( 'tr' )
47-
48- td = document . createElement ( 'td' )
49- td . innerHTML = data . key
50- tr . appendChild ( td )
519
52- td = document . createElement ( 'td' )
53- td . innerHTML = data . val ( ) . name
54- tr . appendChild ( td )
55-
56- td = document . createElement ( 'td' )
57- td . innerHTML = data . val ( ) . projectType
58- tr . appendChild ( td )
59-
60- td = document . createElement ( 'td' )
61- td . innerHTML = data . val ( ) . progress + "%"
62- tr . appendChild ( td )
63-
64- td = document . createElement ( 'td' )
65- td . innerHTML = data . val ( ) . status
66- tr . appendChild ( td )
67-
68- td = document . createElement ( 'td' )
69- if ( data . val ( ) . isFeatured === true ) {
70- td . innerHTML = "<b>" + data . val ( ) . isFeatured + "</b>"
71- } else if ( data . val ( ) . isFeatured === false ) {
72- td . innerHTML = data . val ( ) . isFeatured
73- }
74- tr . appendChild ( td )
75-
76- 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 )
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 + "%" )
8315
8416 if ( data . val ( ) . status == "inactive" ) {
85- btn . innerHTML = "Activate"
17+ btn1 = addButton ( data . key , data . val ( ) . status , "active" )
18+ btn2 = addButton ( data . key , data . val ( ) . status , "finished" )
19+ row_array . push ( btn1 . outerHTML + btn2 . outerHTML )
8620 } else if ( data . val ( ) . status == "active" ) {
87- btn . innerHTML = "Deactivate"
21+ btn1 = addButton ( data . key , data . val ( ) . status , "inactive" )
22+ btn2 = addButton ( data . key , data . val ( ) . status , "finished" )
23+ row_array . push ( btn1 . outerHTML + btn2 . outerHTML )
8824 } else if ( data . val ( ) . status == "new" ) {
89- btn . innerHTML = "Activate"
90- }
91- td . appendChild ( btn )
92- tr . appendChild ( td )
93-
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"'
25+ btn = addButton ( data . key , data . val ( ) . status , "active" )
26+ row_array . push ( btn . outerHTML )
27+ } else if ( data . val ( ) . status == "finished" ) {
28+ btn = addButton ( data . key , data . val ( ) . status , "inactive" )
29+ row_array . push ( btn . outerHTML )
10630 }
107- td . appendChild ( btn )
108- tr . appendChild ( td )
10931
110- tbody . appendChild ( tr )
32+ if ( data . val ( ) . status == "active" ) {
33+
34+ btn = document . createElement ( 'button' )
35+ btn . id = data . key
36+ btn . classList . add ( "btn" )
37+ btn . classList . add ( "btn-warning" )
38+ btn . classList . add ( "change-isFeatured" )
39+ btn . classList . add ( "isFeatured-" + data . val ( ) . isFeatured )
40+
41+ if ( data . val ( ) . isFeatured === true ) {
42+ btn . innerHTML = 'set to "false"'
43+ row_val = "<b>" + data . val ( ) . isFeatured + "</b>"
44+ row_array . push ( row_val + "<br>" + btn . outerHTML )
45+ } else if ( data . val ( ) . isFeatured === false ) {
46+ btn . innerHTML = 'set to "true"'
47+ row_val = data . val ( ) . isFeatured
48+ row_array . push ( row_val + "<br>" + btn . outerHTML )
49+ }
50+
51+ row_array . push ( row_val + btn . outerHTML )
52+ }
11153
54+ rows . push ( row_array )
55+ tableRef . row . add ( row_array ) . draw ( false )
11256 } ) ;
57+ } ;
58+
59+ $ ( '.dataTables_length' ) . addClass ( 'bs-select' ) ;
60+ console . log ( 'added data table styles' )
61+
62+ var btns = document . getElementsByClassName ( 'change-status' )
63+ for ( let item of btns ) {
64+ item . addEventListener ( "click" , changeProjectStatus )
65+ }
66+
67+ var btns = document . getElementsByClassName ( 'change-isFeatured' )
68+ for ( let item of btns ) {
69+ item . addEventListener ( "click" , changeProjectIsFeatured )
11370 }
71+
11472 } ) ;
115- table . appendChild ( tbody )
116- document . getElementById ( status + "-projects" ) . appendChild ( table )
73+
74+ }
75+
76+ function addButton ( id , oldStatus , newStatus ) {
77+ btn = document . createElement ( 'button' )
78+ btn . id = id
79+ btn . classList . add ( "btn" )
80+ btn . classList . add ( "btn-warning" )
81+ btn . classList . add ( "change-status" )
82+ btn . classList . add ( "new-status-" + newStatus )
83+ btn . innerHTML = "set to '" + newStatus + "'"
84+
85+ return btn
11786}
11887
11988function updateStatus ( projectId , newStatus ) {
@@ -133,42 +102,38 @@ function updateIsFeatured(projectId, newStatus) {
133102}
134103
135104function updateTableView ( ) {
136- var newProjects = document . getElementById ( "new-projects" )
137- while ( newProjects . firstChild ) {
138- newProjects . removeChild ( newProjects . firstChild ) ;
139- }
105+ status_array = [ "new" , "active" , "inactive" , "finished" ]
140106
141- var inactiveProjects = document . getElementById ( "inactive-projects" )
142- while ( inactiveProjects . firstChild ) {
143- inactiveProjects . removeChild ( inactiveProjects . firstChild ) ;
144- }
107+ for ( var i = 0 ; i < status_array . length ; i ++ ) {
108+ status = status_array [ i ]
145109
146- var activeProjects = document . getElementById ( "active-projects" )
147- while ( activeProjects . firstChild ) {
148- activeProjects . removeChild ( activeProjects . firstChild ) ;
149- }
110+ var tableRef = $ ( "#projectsTable-" + status ) . DataTable ( ) ;
111+ var rows = tableRef
112+ . rows ( )
113+ . remove ( )
114+ . draw ( ) ;
115+ }
150116
151- getProjects ( "new" )
152- getProjects ( "active" )
153- getProjects ( "inactive" )
117+ getProjects ( "new" )
118+ getProjects ( "active" )
119+ getProjects ( "inactive" )
120+ getProjects ( "finished" )
121+ getProjects ( "archived" )
154122}
155123
156124
157125function changeProjectStatus ( ) {
158126 console . log ( 'project selected: ' + this . id )
159127
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" )
128+ if ( this . classList . contains ( "new-status-active" ) ) {
170129 updateStatus ( this . id , "active" )
171130 console . log ( "new status: active" )
131+ } else if ( this . classList . contains ( "new-status-inactive" ) ) {
132+ updateStatus ( this . id , "inactive" )
133+ console . log ( "new status: inactive" )
134+ } else if ( this . classList . contains ( "new-status-finished" ) ) {
135+ updateStatus ( this . id , "finished" )
136+ console . log ( "new status: finished" )
172137 }
173138 updateTableView ( )
174139}
@@ -192,3 +157,5 @@ function changeProjectIsFeatured() {
192157getProjects ( "new" )
193158getProjects ( "active" )
194159getProjects ( "inactive" )
160+ getProjects ( "finished" )
161+ getProjects ( "archived" )
0 commit comments