Fixes issue #28

frontend/static/css/add_edit.css

@@ -33,6 +33,7 @@
 	width: calc(50% - (var(--gap) / 2));
 }
 
+.form-container > form > button,
 .sub-inputs > button {
 	display: flex;
 	justify-content: center;
@@ -54,6 +55,32 @@
 	opacity: 0;
 }
 
+.color-list {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	gap: 1rem;
+	flex-wrap: wrap;
+
+	padding: 1rem;
+	border: 2px solid var(--color-gray);
+	border-radius: 4px;
+	box-shadow: var(--default-shadow);
+}
+
+.color-list > button {
+	height: 1.5rem;
+	width: 1.5rem;
+
+	padding: 1rem;
+	border: 1px solid transparent;
+	background-color: var(--color);
+}
+
+.color-list > button[data-selected='true'] {
+	border-color: var(--color-white);
+}
+
 .repeat-bar,
 .repeat-edit-bar {
 	display: flex;
@@ -134,7 +161,8 @@ div.options > button {
 
 @media (max-width: 460px) {
 	.sub-inputs > input,
-	.sub-inputs > select {
+	.sub-inputs > select,
+	.sub-inputs > button {
 		width: 100%;
 	}
 }

frontend/static/css/general.css

@@ -11,8 +11,8 @@
 	--color-gray: #3c3c3c;
 	--color-dark: #1b1b1b;
 
-	--color-error: rgb(219, 84, 97);
-	--color-success: rgb(84, 219, 104);
+	--color-error: #db5461;
+	--color-success: #54db68;
 	
 	--header-height: 4.5rem;
 	--nav-width: 4rem;

frontend/static/css/reminders_templates.css

@@ -84,6 +84,7 @@
 }
 
 .entry {
+	--color: var(--color-gray);
 	width: var(--entry-width);
 	height: 6rem;
 	position: relative;
@@ -95,7 +96,7 @@
 	
 	border-radius: 4px;
 	padding: .75rem;
-	background-color: var(--color-gray);
+	background-color: var(--color);
 }
 
 button.entry.fit {

frontend/static/js/add.js

@@ -1,8 +1,10 @@
+const colors = ["#3c3c3c", "#49191e", "#171a42", "#083b06", "#3b3506", "#300e40"];
 const inputs = {
 	'title': document.getElementById('title-input'),
 	'time': document.getElementById('time-input'),
 	'notification_service': document.getElementById('notification-service-input'),
-	'text': document.getElementById('text-input')
+	'text': document.getElementById('text-input'),
+	'color': document.querySelector('#add .color-list')
 };
 
 const type_buttons = {
@@ -22,7 +24,11 @@ function addReminder() {
 		'title': inputs.title.value,
 		'time': (new Date(inputs.time.value) / 1000) + (new Date(inputs.time.value).getTimezoneOffset() * 60),
 		'notification_service': inputs.notification_service.value,
-		'text': inputs.text.value
+		'text': inputs.text.value,
+		'color': null
+	};
+	if (!inputs.color.classList.contains('hidden')) {
+		data['color'] = inputs.color.querySelector('button[data-selected="true"]').dataset.color;
 	};
 	if (type_buttons['repeat-button'].dataset.selected === 'true') {
 		data['repeat_quantity'] = type_buttons['repeat-quantity'].value;
@@ -69,6 +75,9 @@ function closeAdd() {
 	hideWindow();
 	setTimeout(() => {
 		document.getElementById('template-selection').value = document.querySelector('#template-selection option[selected]').value;
+		if (!inputs.color.classList.contains('hidden')) {
+			toggleColor(inputs.color);
+		};
 		inputs.title.value = '';
 		inputs.time.value = '';
 		inputs.notification_service.value = document.querySelector('#notification-service-input option[selected]').value;
@@ -78,6 +87,31 @@ function closeAdd() {
 	}, 500);
 };
 
+function loadColor() {
+	document.querySelectorAll('.color-list').forEach(list => {
+		colors.forEach(color => {
+			const entry = document.createElement('button');
+			entry.dataset.color = color;
+			entry.title = color;
+			entry.type = 'button';
+			entry.style.setProperty('--color', color);
+			entry.addEventListener('click', e => selectColor(list, color))
+			list.appendChild(entry);
+		});
+	});
+};
+
+function selectColor(list, color_code) {
+	list.querySelector(`button[data-color="${color_code}"]`).dataset.selected = 'true';
+	list.querySelectorAll(`button:not([data-color="${color_code}"])`).forEach(b => b.dataset.selected = 'false');
+	return;
+}
+
+function toggleColor(list) {
+	selectColor(list, colors[0]);
+	list.classList.toggle('hidden');
+}
+
 function toggleNormal() {
 	type_buttons['normal-button'].dataset.selected = 'true';
 	type_buttons['repeat-button'].dataset.selected = 'false';
@@ -133,7 +167,10 @@ function testReminder() {
 
 document.getElementById('add-form').setAttribute('action', 'javascript:addReminder();');
 document.getElementById('template-selection').addEventListener('change', e => loadTemplate());
+document.getElementById('color-toggle').addEventListener('click', e => toggleColor(inputs.color));
 document.getElementById('normal-button').addEventListener('click', e => toggleNormal());
 document.getElementById('repeat-button').addEventListener('click', e => toggleRepeated());
 document.getElementById('close-add').addEventListener('click', e => closeAdd());
 document.getElementById('test-reminder').addEventListener('click', e => testReminder());
+
+loadColor();

frontend/static/js/edit.js

@@ -2,7 +2,8 @@ const edit_inputs = {
 	'title': document.getElementById('title-edit-input'),
 	'time': document.getElementById('time-edit-input'),
 	'notification_service': document.getElementById('notification-service-edit-input'),
-	'text': document.getElementById('text-edit-input')
+	'text': document.getElementById('text-edit-input'),
+	'color': document.querySelector('#edit .color-list')
 };
 
 const edit_type_buttons = {
@@ -22,7 +23,11 @@ function editReminder() {
 		'notification_service': edit_inputs.notification_service.value,
 		'text': edit_inputs.text.value,
 		'repeat_quantity': null,
-		'repeat_interval': null
+		'repeat_interval': null,
+		'color': null
+	};
+	if (!edit_inputs.color.classList.contains('hidden')) {
+		data['color'] = edit_inputs.color.querySelector('button[data-selected="true"]').dataset.color;
 	};
 	if (edit_type_buttons['repeat-edit-button'].dataset.selected === 'true') {
 		data['repeat_quantity'] = edit_type_buttons['repeat-edit-quantity'].value;
@@ -65,6 +70,13 @@ function showEdit(id) {
 		return response.json();
 	})
 	.then(json => {
+		if (json.result['color'] !== null) {
+			if (edit_inputs.color.classList.contains('hidden')) {
+				toggleColor(edit_inputs.color);
+			};
+			selectColor(edit_inputs.color, json.result['color']);
+		};
+
 		edit_inputs.title.value = json.result.title;
 
 		var trigger_date = new Date(
@@ -142,6 +154,7 @@ function deleteReminder() {
 // code run on load
 
 document.getElementById('edit-form').setAttribute('action', 'javascript:editReminder();');
+document.getElementById('color-edit-toggle').addEventListener('click', e => toggleColor(edit_inputs.color));
 document.getElementById('normal-edit-button').addEventListener('click', e => toggleEditNormal());
 document.getElementById('repeat-edit-button').addEventListener('click', e => toggleEditRepeated());
 document.getElementById('close-edit').addEventListener('click', e => hideWindow());

frontend/static/js/reminders.js

@@ -7,6 +7,9 @@ function fillTable(result) {
 		entry.classList.add('entry');
 		entry.dataset.id = reminder.id;
 		entry.addEventListener('click', e => showEdit(reminder.id));
+		if (reminder.color !== null) {
+			entry.style.setProperty('--color', reminder.color);
+		};
 		
 		const title = document.createElement('h2');
 		title.innerText = reminder.title;

frontend/static/js/templates.js

@@ -1,13 +1,15 @@
 const template_inputs = {
 	'title': document.getElementById('title-template-input'),
 	'notification-service': document.getElementById('notification-service-template-input'),
-	'text': document.getElementById('text-template-input')
+	'text': document.getElementById('text-template-input'),
+	'color': document.querySelector('#add-template .color-list')
 };
 
 const edit_template_inputs = {
 	'title': document.getElementById('title-template-edit-input'),
 	'notification-service': document.getElementById('notification-service-template-edit-input'),
-	'text': document.getElementById('text-template-edit-input')
+	'text': document.getElementById('text-template-edit-input'),
+	'color': document.querySelector('#edit-template .color-list')
 };
 
 function loadTemplates(force=true) {
@@ -68,6 +70,9 @@ function loadTemplate() {
 		inputs.title.value = '';
 		inputs.notification_service.value = document.querySelector('#notification-service-input option[selected]').value;
 		inputs.text.value = '';
+		if (!inputs.color.classList.contains('hidden')) {
+			toggleColor(inputs.color);
+		};
 	} else {
 		fetch(`/api/templates/${id}?api_key=${api_key}`)
 		.then(response => {
@@ -81,6 +86,16 @@ function loadTemplate() {
 			inputs.title.value = json.result.title;
 			inputs.notification_service.value = json.result.notification_service;
 			inputs.text.value = json.result.text;
+			if (json.result.color !== null) {
+				if (inputs.color.classList.contains('hidden')) {
+					toggleColor(inputs.color);
+				};
+				selectColor(inputs.color, json.result.color);
+			} else {
+				if (!inputs.color.classList.contains('hidden')) {
+					toggleColor(inputs.color);
+				};
+			};
 		})
 		.catch(e => {
 			if (e === 401) {
@@ -96,7 +111,11 @@ function addTemplate() {
 	const data = {
 		'title': template_inputs.title.value,
 		'notification_service': template_inputs["notification-service"].value,
-		'text': template_inputs.text.value
+		'text': template_inputs.text.value,
+		'color': null
+	};
+	if (!template_inputs.color.classList.contains('hidden')) {
+		data['color'] = template_inputs.color.querySelector('button[data-selected="true"]').dataset.color;
 	};
 	fetch(`/api/templates?api_key=${api_key}`, {
 		'method': 'POST',
@@ -128,6 +147,9 @@ function closeAddTemplate() {
 		template_inputs.title.value = '';
 		template_inputs['notification-service'].value = document.querySelector('#notification-service-template-input option[selected]').value;
 		template_inputs.text.value = '';
+		if (!template_inputs.color.classList.contains('hidden')) {
+			toggleColor(inputs.color);
+		};
 	}, 500);
 };
 
@@ -145,6 +167,12 @@ function showEditTemplate(id) {
 		edit_template_inputs.title.value = json.result.title;
 		edit_template_inputs['notification-service'].value = json.result.notification_service;
 		edit_template_inputs.text.value = json.result.text;
+		if (json.result.color !== null) {
+			if (edit_template_inputs.color.classList.contains('hidden')) {
+				toggleColor(edit_template_inputs.color);
+			};
+			selectColor(edit_template_inputs.color, json.result.color);
+		};
 		showWindow('edit-template');
 	})
 	.catch(e => {
@@ -161,7 +189,11 @@ function saveTemplate() {
 	const data = {
 		'title': edit_template_inputs.title.value,
 		'notification_service': edit_template_inputs['notification-service'].value,
-		'text': edit_template_inputs.text.value
+		'text': edit_template_inputs.text.value,
+		'color': null
+	};
+	if (!edit_template_inputs.color.classList.contains('hidden')) {
+		data['color'] = edit_template_inputs.color.querySelector('button[data-selected="true"]').dataset.color;
 	};
 	fetch(`/api/templates/${id}?api_key=${api_key}`, {
 		'method': 'PUT',
@@ -211,7 +243,9 @@ function deleteTemplate() {
 // code run on load
 
 document.getElementById('template-form').setAttribute('action', 'javascript:addTemplate();');
+document.getElementById('color-template-toggle').addEventListener('click', e => toggleColor(template_inputs.color));
 document.getElementById('close-template').addEventListener('click', e => closeAddTemplate());
 document.getElementById('template-edit-form').setAttribute('action', 'javascript:saveTemplate()');
+document.getElementById('color-template-edit-toggle').addEventListener('click', e => toggleColor(edit_template_inputs.color));
 document.getElementById('close-edit-template').addEventListener('click', e => hideWindow());
 document.getElementById('delete-template').addEventListener('click', e => deleteTemplate());