Fixed versioning, added success messages, spicy design updates

QuantumStack · Jan 26, 2019 · 35f89ea · 35f89ea
1 parent 87c9c0b
commit 35f89ea
Show file tree

Hide file tree

Showing 20 changed files with 224 additions and 64 deletions.
diff --git a/server/public/stylesheets/main.css b/server/public/stylesheets/main.css
diff --git a/server/public/stylesheets/main.css.map b/server/public/stylesheets/main.css.map
diff --git a/server/public/stylesheets/main.sass b/server/public/stylesheets/main.sass
@@ -6,4 +6,8 @@ $info: #008AFB
 $link: #203FB6
 $section-padding: 1.5rem 1.5rem
 
+.cmulab
+	font-family: 'Quantico';
+	font-weight: bold;
+
 @import "bulma"
diff --git a/server/routes/admin.js b/server/routes/admin.js
@@ -21,6 +21,7 @@ router.get('/lab', adminRequired, (req, res) => {
     loc: process.env.CMULAB_LOC,
     isLab: true,
     version: version(),
+    success: req.query.success,
   });
 });
 
@@ -30,6 +31,7 @@ router.get('/data', adminRequired, (req, res) => {
     loc: process.env.CMULAB_LOC,
     isData: true,
     version: version(),
+    success: req.query.success,
   });
 });
 
@@ -40,6 +42,7 @@ router.get('/delete', adminRequired, (req, res) => {
     isData: true,
     isDataDelete: true,
     version: version(),
+    success: req.query.success,
   });
 });
 
@@ -49,9 +52,10 @@ router.get('/users', adminRequired, (req, res, next) => {
     res.render('admin', {
       course: process.env.CMULAB_COURSE,
       loc: process.env.CMULAB_LOC,
-      isUsers: true,
+      isPeople: true,
       users,
       version: version(),
+      success: req.query.success,
     });
   });
 });
@@ -72,9 +76,11 @@ router.get('/students', adminRequired, (req, res, next) => {
     res.render('admin', {
       course: process.env.CMULAB_COURSE,
       loc: process.env.CMULAB_LOC,
-      isStudents: true,
+      isPeople: true,
+      isPeopleStudents: true,
       students,
       version: version(),
+      success: req.query.success,
     });
   });
 });
@@ -109,6 +115,7 @@ router.get('/viewdata', adminRequired, (req, res, next) => {
       isDataView: true,
       entries,
       version: version(),
+      success: req.query.success,
     });
   });
 });
@@ -129,7 +136,7 @@ router.get('/getcsv', adminRequired, (req, res, next) => {
 router.post('/delete', adminRequired, (req, res, next) => {
   Entry.deleteMany(filterData(req.body)).exec((err) => {
     if (err) return next(createError(500, err));
-    return res.redirect('/admin/delete');
+    return res.redirect('/admin/delete?success=delete');
   });
 });
 
@@ -149,7 +156,7 @@ router.post('/assignlab', adminRequired, (req, res, next) => {
     lab,
   }, (err) => {
     if (err) return next(createError(500, err));
-    return res.redirect('/admin/lab');
+    return res.redirect('/admin/lab?success=lab+assign');
   });
 });
 
@@ -165,7 +172,7 @@ router.post('/adduser', adminRequired, (req, res, next) => {
       admin: admin === 'on',
     }, (saveErr) => {
       if (saveErr) return next(createError(500, saveErr));
-      return res.redirect('/admin/users');
+      return res.redirect('/admin/users?success=user+add');
     });
   });
 });
@@ -179,7 +186,7 @@ router.post('/removeuser', adminRequired, (req, res, next) => {
   }
   User.remove({ _id: student_id }, (err) => {
     if (err) return next(createError(500, err));
-    return res.redirect('/admin/users');
+    return res.redirect('/admin/users?success=user+delete');
   });
 });
 
@@ -188,7 +195,9 @@ router.post('/enrollstudents', adminRequired, (req, res, next) => {
   csv2json().fromString(req.body.data).then((json) => {
     function iterItems(i, err) {
       if (err) return next(createError(500, err));
-      if (i === json.length) return res.redirect('/admin/students');
+      if (i === json.length) {
+        return res.redirect('/admin/students?success=student+registration');
+      }
 
       const item = json[i];
       Student.findOneAndUpdate({
@@ -207,7 +216,7 @@ router.post('/enrollstudents', adminRequired, (req, res, next) => {
 router.post('/removestudents', adminRequired, (req, res, next) => {
   Student.deleteMany({}).exec((err) => {
     if (err) return next(createError(500, err));
-    return res.redirect('/admin/students');
+    return res.redirect('/admin/students?success=student+registration+delete');
   });
 });
 

diff --git a/server/routes/checkin.js b/server/routes/checkin.js
@@ -40,7 +40,7 @@ router.post('/:student_id', authRequired, (req, res, next) => {
     ta: req.user._id,
   }, (err) => {
     if (err) return next(createError(500, err));
-    return res.redirect('/success');
+    return res.redirect('/?success=check-in');
   });
 });
 

diff --git a/server/routes/index.js b/server/routes/index.js
@@ -7,13 +7,7 @@ router.get('/', (req, res) => {
   res.render('index', {
     course: process.env.CMULAB_COURSE,
     loc: process.env.CMULAB_LOC,
-  });
-});
-
-router.get('/success', (req, res) => {
-  res.render('success', {
-    course: process.env.CMULAB_COURSE,
-    loc: process.env.CMULAB_LOC,
+    success: req.query.success,
   });
 });
 

diff --git a/server/util/version.js b/server/util/version.js
@@ -1,6 +1,6 @@
 const axios = require('axios');
 
-const current = 'v1.0';
+const current = 'v1.2';
 let latest;
 
 function check() {

diff --git a/server/views/admin.hbs b/server/views/admin.hbs
@@ -1,12 +1,31 @@
+{{#if success}}
+	<nav id="success" class="navbar is-success">
+		<div class="container">
+			<div class="navbar-start" style="flex-grow: 1; justify-content: center;">
+				<div class="notification is-success has-text-centered">
+					<span class="icon">
+						<i class="fa fa-thumbs-up"></i>
+			    	</span>
+			    	<span><strong>Successful {{success}}!</strong></span>
+		    	</div>
+			</div>
+		</div>
+	</nav>
+	{{> success}}
+{{/if}}
+
 <br />
-<center><a href="/" class="tag is-primary is-large is-rounded">CMULab</a> &nbsp;<span class="title is-5"> {{course}}</span></center>
+<center><a href="/" class="tag is-primary is-large is-rounded cmulab">CMULab</a> &nbsp;<span class="title is-5"> {{course}}</span></center>
 
-{{#if version.update}}
+{{#if version.update }}
 	<section class="section">
 		<div class="container">
 			<article class="message is-warning">
 				<div class="message-header">
 					<p>CMULab Update Available!</p>
+					<span class="icon">
+						<i class="fa fa-info-circle"></i>
+			    	</span>
 				</div>
 				<div class="message-body">
 					QuantumStack has released a <strong>new version</strong> of CMULab. You are currently using {{version.current}}, but <strong>{{version.latest}}</strong> is now available. Please visit our <a href="https://github.com/QuantumStack/CMULab">GitHub repository</a> to download the update and deploy it onto your CMULab instance. Go to the <a href="https://github.com/QuantumStack/CMULab/releases/tag/{{version.latest}}">release page</a> to see what's new.
@@ -20,10 +39,30 @@
 
 <div class="tabs is-centered is-boxed is-small">
 	<ul>
-		<li class="{{#if isLab}}is-active{{/if}}"><a href="/admin/lab">Assign Lab</a></li>
-		<li class="{{#if isData}}is-active{{/if}}"><a href="/admin/data">Data</a></li>
-		<li class="{{#if isUsers}}is-active{{/if}}"><a href="/admin/users">Users</a></li>
-		<li class="{{#if isStudents}}is-active{{/if}}"><a href="/admin/students">Students</a></li>
+		<li class="{{#if isLab}}is-active{{/if}}">
+			<a href="/admin/lab">
+				<span class="icon is-small">
+					<i class="fa fa-flask"></i>
+		    	</span>
+				<span>Assign Lab</span>
+			</a>
+		</li>
+		<li class="{{#if isData}}is-active{{/if}}">
+			<a href="/admin/data">
+				<span class="icon is-small">
+					<i class="fa fa-database"></i>
+		    	</span>
+				<span>Data</span>
+			</a>
+		</li>
+		<li class="{{#if isPeople}}is-active{{/if}}">
+			<a href="/admin/users">
+				<span class="icon is-small">
+					<i class="fa fa-users"></i>
+		    	</span>
+				<span>People</span>
+			</a>
+		</li>
 	</ul>
 </div>
 
@@ -35,16 +74,49 @@
 					<div class="tabs is-small is-toggle is-toggle-rounded is-fullwidth">
 						<ul>
 							<li class="{{#unless isDataDelete}}is-active{{/unless}}">
-								<a href="/admin/data">View & Download</a>
+								<a href="/admin/data">
+									<span class="icon is-small">
+										<i class="fa fa-eye"></i>
+							    	</span>
+									<span>View & Download</span>
+								</a>
 							</li>
 							<li class="{{#if isDataDelete}}is-active{{/if}}">
-								<a href="/admin/delete">Delete</a>
+								<a href="/admin/delete">
+									<span class="icon is-small">
+										<i class="fa fa-eraser"></i>
+							    	</span>
+									<span>Delete</span>
+								</a>
 							</li>
 						</ul>
 					</div>
 				{{/unless}}
 			{{/if}}
 
+			{{#if isPeople}}
+				<div class="tabs is-small is-toggle is-toggle-rounded is-fullwidth">
+					<ul>
+						<li class="{{#unless isPeopleStudents}}is-active{{/unless}}">
+							<a href="/admin/users">
+								<span class="icon is-small">
+									<i class="fa fa-shield-alt"></i>
+						    	</span>
+								<span>Users</span>
+							</a>
+						</li>
+						<li class="{{#if isPeopleStudents}}is-active{{/if}}">
+							<a href="/admin/students">
+								<span class="icon is-small">
+									<i class="fa fa-graduation-cap"></i>
+						    	</span>
+								<span>Students</span>
+							</a>
+						</li>
+					</ul>
+				</div>
+			{{/if}}
+
 			{{#if isLab}} {{> lab}} {{/if}}
 			{{#if isData}}
 				{{#if isDataView}}
@@ -58,8 +130,13 @@
 				{{/if}}
 			{{/if}}
 			{{#if isDelete}} {{> delete}} {{/if}}
-			{{#if isUsers}} {{> users}} {{/if}}
-			{{#if isStudents}} {{> students}} {{/if}}
+			{{#if isPeople}}
+				{{#if isPeopleStudents}}
+					{{> students}}
+				{{else}}
+					{{> users}}
+				{{/if}}
+			{{/if}}
 		</div>
 	</div>
 </div>

diff --git a/server/views/checkin.hbs b/server/views/checkin.hbs
@@ -4,10 +4,15 @@
 			<div class="columns">
 				<div class="column is-4 is-offset-4">
 					<p class="is-pulled-right">
-						<a href="/" class="tag is-primary is-large is-rounded">CMULab</a>
+						<a href="/" class="tag is-primary is-large is-rounded cmulab">CMULab</a>
 					</p>
 					<h3 class="title is-5">{{course}} Check-in</h3>
-					<h6 class="subtitle is-5">Student: {{student}}</h6>
+					<h6 class="subtitle is-6">
+						<span class="icon is-small">
+							<i class="fa fa-user"></i>
+				    	</span>
+						<span>Student: {{student}}</span>
+					</h6>
 
 					<form method="post" action="/checkin/{{student}}">
 						{{#if lab}}
@@ -58,7 +63,12 @@
 						</div>
 						<div class="field">
 							<div class="control">
-								<input type="submit" class="button is-info is-fullwidth" value="Submit Score!"></input>
+								<button type="submit" class="button is-info is-fullwidth">
+									<span class="icon">
+										<i class="fa fa-check"></i>
+							    	</span>
+									<span>Submit!</span>
+								</button>
 							</div>
 						</div>
 					</form>

diff --git a/server/views/error.hbs b/server/views/error.hbs
@@ -2,13 +2,16 @@
 	<div class="hero-body">
 		<div class="container">
 			<h1 class="title has-text-centered">
-				An error has occurred!
+				<span>Error!</span>
+				<span class="icon is-large">
+					<i class="far fa-frown-open"></i>
+		    	</span>
 			</h1>
 			<h3 class="subtitle has-text-centered">
 				{{err}}
 			</h3>
 			<p>
-      			<center><a href="/" class="tag is-primary is-large is-rounded">CMULab</a></center>
+      			<center><a href="/" class="tag is-primary is-large is-rounded cmulab">CMULab</a></center>
   			</p>
 		</div>
 	</div>

diff --git a/server/views/index.hbs b/server/views/index.hbs
@@ -1,27 +1,53 @@
 <section class="hero is-black is-bold is-fullheight">
+	{{#if success}}
+		<div id="success" class="hero-head">
+			<div class="container">
+				<br />
+				<p class="has-text-centered">
+					<span class="has-text-success">
+						<span class="icon">
+							<i class="fa fa-thumbs-up"></i>
+				    	</span>
+				    	<strong>Successful {{success}}!</strong>
+			    	</span>
+				</p>
+			</div>
+		</div>
+		{{> success}}
+	{{/if}}
 	<div class="hero-body">
 		<div class="container">
 			<div class="columns">
 				<div class="column is-4 is-offset-4">
 					<p>
-		      			<center><a href="https://cmulab.quantumstack.xyz" class="tag is-primary is-large is-rounded">CMULab</a> &nbsp;<span class="title is-4"> for {{course}}</span></center>
+		      			<center><a href="https://cmulab.quantumstack.xyz" class="tag is-primary is-large is-rounded cmulab">CMULab</a> &nbsp;<span class="title is-4"> for {{course}}</span></center>
 		  			</p>
 		  			<br />
 		  			<p class="subtitle is-5 has-text-centered">
 		  				Secure check-in and scoring. Easy for instructors, easy for students.
 		  			</p>
 		  			<form method="POST" action="/go">
 			  			<div class="field is-grouped">
-							<p class="control is-expanded">
+							<p class="control is-expanded has-icons-left">
 								<input class="input" type="text" name="student_id" placeholder="Check-in student ID">
+								<span class="icon is-left">
+									<i class="fa fa-rocket"></i>
+						    	</span>
 							</p>
 							<p class="control">
 								<input type="submit" class="button is-info is-outlined" value="Go"></input>
 							</p>
 						</div>
 					</form>
 					<br />
-					<p class="has-text-centered has-text-grey"><a href="/admin"><small>Admin Console</small></a></p>
+					<p class="has-text-centered has-text-grey">
+						<a href="/admin">
+							<small>Admin Console</small>
+							<span class="icon">
+								<i class="fa fa-lock"></i>
+					    	</span>
+						</a>
+					</p>
 	  			</div>
   			</div>
 		</div>