Merge pull request #6 from hft-app/ljans

Improve course selection
hft-app · Nov 11, 2023 · d5cb431 · d5cb431
2 parents fd9cec1 + 46e8fed
commit d5cb431
Show file tree

Hide file tree

Showing 4 changed files with 40 additions and 7 deletions.
diff --git a/scripts/client/courses.js b/scripts/client/courses.js
@@ -35,6 +35,15 @@ $('.subjects .item').map(item => {
 	$('.header a', item).on('click', () => item.classList.toggle('active'));
 });
 
+// Set reset button state depending on total number of checked inputs
+const updateResetButtonVisiblity = function() {
+	let count = 0;
+	$('.subjects input').map(test => test.checked ? count++ : null);
+	document.querySelector('nav a.reset').classList.toggle('active', count > 0);
+};
+updateResetButtonVisiblity();
+$('.subjects input').on('change', updateResetButtonVisiblity);
+
 // Save course selection
 $('nav .save').on('click', function(){
 	this.classList.add('active');
@@ -43,5 +52,9 @@ $('nav .save').on('click', function(){
 
 // Clear course selection
 $('nav .reset').on('click', e => {
-	$('.subjects input').map(input => input.checked = false);
+	$('.subjects input').map(input => {
+		input.checked = false;
+		input.indeterminate = false;
+	});
+	updateResetButtonVisiblity();
 });
diff --git a/styles/main.css b/styles/main.css
diff --git a/styles/main.scss b/styles/main.scss
@@ -269,14 +269,27 @@ nav {
 	a {
 		padding: 8px 0;
 		color: $primary;
-
+
+		.icon {
+			margin-right: 3px;
+		}
+
 		&.save {
-			&::after { content: attr(data-idle); }
+			.status-active { display: none; }
 
 			&.active {
 				color: $secondary;
 
-				&::after { content: attr(data-active); }
+				.status-idle { display: none; }
+				.status-active { display: inline-block; }
+			}
+		}
+
+		&.reset {
+			color: $secondary;
+
+			&.active {
+				color: $primary;
 			}
 		}
 	}

diff --git a/templates/_courses.html b/templates/_courses.html
@@ -18,8 +18,15 @@
 
 	<nav>
 		<div class="bar container">
-			<a class="reset">Alle abwählen</a>
-			<a class="save" data-idle="Speichern" data-active="Speichert..."></a>
+			<a class="reset">
+				<span class="icon fa-regular fa-trash-can"></span>
+				<span>Zurücksetzen</span>
+			</a>
+			<a class="save">
+				<span class="status-active icon fa-solid fa-spin fa-circle-notch"></span>
+				<span class="status-idle icon fa-regular fa-floppy-disk"></span>
+				<span>Speichern</span>
+			</a>
 		</div>
 	</nav>