Fixes issue #9

This commit is contained in:
CasVT
2023-05-24 15:11:51 +02:00
parent 645d4926f8
commit d657c5c0d3
13 changed files with 509 additions and 170 deletions

View File

@@ -167,6 +167,31 @@ div.options > button {
}
}
/* */
/* Adding */
/* */
#info.show-add-reminder #delete-info {
display: none;
}
#info.show-add-static-reminder #time-input,
#info.show-add-static-reminder #normal-button,
#info.show-add-static-reminder #repeat-button,
#info.show-add-static-reminder .repeat-bar,
#info.show-add-static-reminder #delete-info {
display: none;
}
#info.show-add-static-reminder #text-input {
margin-top: -1rem;
}
#info.show-add-static-reminder #template-selection,
#info.show-add-static-reminder #color-toggle,
#info.show-add-static-reminder #notification-service-input {
width: 100%;
}
#info.show-add-template #template-selection,
#info.show-add-template #time-input,
#info.show-add-template #normal-button,
@@ -181,15 +206,14 @@ div.options > button {
margin-top: -1rem;
}
#info.show-add-template form > *,
#info.show-add-template .sub-inputs > * {
#info.show-add-template #color-toggle,
#info.show-add-template #notification-service-input {
width: 100%;
}
#info.show-add-reminder #delete-info {
display: none;
}
/* */
/* Editing */
/* */
#info.show-edit-reminder #template-selection,
#info.show-edit-reminder #test-reminder {
display: none;
@@ -199,6 +223,23 @@ div.options > button {
width: 100%;
}
#info.show-edit-static-reminder #template-selection,
#info.show-edit-static-reminder #time-input,
#info.show-edit-static-reminder #normal-button,
#info.show-edit-static-reminder #repeat-button,
#info.show-edit-static-reminder .repeat-bar {
display: none;
}
#info.show-edit-static-reminder #text-input {
margin-top: -1rem;
}
#info.show-edit-static-reminder #color-toggle,
#info.show-edit-static-reminder #notification-service-input {
width: 100%;
}
#info.show-edit-template #template-selection,
#info.show-edit-template #time-input,
#info.show-edit-template #normal-button,

View File

@@ -47,6 +47,7 @@
/* REMINDER LIST */
#reminder-list,
#static-reminder-list,
#template-list {
--gap: 1rem;
--entry-width: 13rem;
@@ -115,11 +116,6 @@ button.entry.fit {
font-weight: 500;
}
#delete-template {
border-color: var(--color-error);
color: var(--color-error);
}
@media (max-width: 543px) {
header > div {
transform: translateX(0);

View File

@@ -1,5 +1,6 @@
const types = {
'reminder': document.getElementById('reminder-list'),
'static_reminder': document.getElementById('static-reminder-list'),
'template': document.getElementById('template-list')
};
@@ -9,7 +10,10 @@ const icons = {
'delete': '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="256" height="256" x="0" y="0" viewBox="0 0 24 24" style="enable-background:new 0 0 512 512" xml:space="preserve"><g><g id="_01_align_center" data-name="01 align center"><path d="M22,4H17V2a2,2,0,0,0-2-2H9A2,2,0,0,0,7,2V4H2V6H4V21a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V6h2ZM9,2h6V4H9Zm9,19a1,1,0,0,1-1,1H7a1,1,0,0,1-1-1V6H18Z"></path><rect x="9" y="10" width="2" height="8"></rect><rect x="13" y="10" width="2" height="8"></rect></g></g></svg>'
};
const info_classes = ['show-add-reminder', 'show-add-template', 'show-edit-reminder', 'show-edit-template'];
const info_classes = [
'show-add-reminder', 'show-add-template', 'show-add-static-reminder',
'show-edit-reminder', 'show-edit-template', 'show-edit-static-reminder'
];
function toggleNav() {
document.querySelector('.nav-divider').classList.toggle('show-nav');

View File

@@ -16,7 +16,7 @@ function showTab(button) {
//
function fillTable(table, results) {
table.querySelectorAll('button.entry:not(.add-entry)').forEach(e => e.remove());
results.forEach(r => {
const entry = document.createElement('button');
entry.classList.add('entry');
@@ -75,6 +75,10 @@ function fillReminders() {
fillLibrary(`/api/reminders?api_key=${api_key}`, types.reminder);
};
function fillStaticReminders() {
fillLibrary(`/api/staticreminders?api_key=${api_key}`, types.static_reminder);
}
function fillTemplates() {
fillLibrary(`/api/templates?api_key=${api_key}`, types.template);
};
@@ -110,6 +114,7 @@ document.querySelectorAll('.tab-selector > button').forEach(b => {
});
fillReminders();
fillStaticReminders();
fillTemplates();
setInterval(fillReminders, 60000);

View File

@@ -6,6 +6,7 @@ function showAdd(type) {
inputs.notification_service.value = document.querySelector('#notification-service-input option[selected]').value;
toggleNormal();
toggleColor(true);
document.getElementById('test-reminder').classList.remove('show-sent');
const cl = document.getElementById('info').classList;
cl.forEach(c => {
@@ -15,10 +16,17 @@ function showAdd(type) {
if (type === types.reminder) {
cl.add('show-add-reminder');
document.querySelector('#info h2').innerText = 'Add a reminder';
document.querySelector('#test-reminder > div:first-child').innerText = 'Test';
inputs.time.setAttribute('required', '');
} else if (type === types.template) {
cl.add('show-add-template');
document.querySelector('#info h2').innerText = 'Add a template';
document.querySelector('#test-reminder > div:first-child').innerText = 'Test';
inputs.time.removeAttribute('required');
} else if (type === types.static_reminder) {
cl.add('show-add-static-reminder');
document.querySelector('#info h2').innerText = 'Add a static reminder';
document.querySelector('#test-reminder > div:first-child').innerText = 'Test';
inputs.time.removeAttribute('required');
} else
return;
@@ -34,6 +42,11 @@ function showEdit(id, type) {
url = `${url_prefix}/api/templates/${id}?api_key=${api_key}`;
inputs.time.removeAttribute('required');
type_buttons.repeat_interval.removeAttribute('required');
} else if (type === types.static_reminder) {
url = `${url_prefix}/api/staticreminders/${id}?api_key=${api_key}`;
document.getElementById('test-reminder').classList.remove('show-sent');
inputs.time.removeAttribute('required');
type_buttons.repeat_interval.removeAttribute('required');
} else return;
fetch(url)
@@ -89,14 +102,26 @@ function showEdit(id, type) {
if (type === types.reminder) {
cl.add('show-edit-reminder');
document.querySelector('#info h2').innerText = 'Edit a reminder';
document.querySelector('#test-reminder > div:first-child').innerText = 'Test';
} else if (type === types.template) {
cl.add('show-edit-template');
document.querySelector('#info h2').innerText = 'Edit a template';
document.querySelector('#test-reminder > div:first-child').innerText = 'Test';
} else if (type === types.static_reminder) {
cl.add('show-edit-static-reminder');
document.querySelector('#info h2').innerText = 'Edit a static reminder';
document.querySelector('#test-reminder > div:first-child').innerText = 'Trigger';
} else
return;
};
// code run on load
document.getElementById('add-reminder').addEventListener('click', e => showAdd(types.reminder));
document.getElementById('add-reminder').addEventListener('click', e => {
if (document.getElementById('add-reminder').classList.contains('error'))
showWindow('notification');
else
showAdd(types.reminder);
});
document.getElementById('add-static-reminder').addEventListener('click', e => showAdd(types.static_reminder));
document.getElementById('add-template').addEventListener('click', e => showAdd(types.template));

View File

@@ -58,136 +58,3 @@ function applyTemplate() {
// code run on load
loadTemplateSelection();
// function addTemplate() {
// const data = {
// 'title': template_inputs.title.value,
// 'notification_service': template_inputs["notification-service"].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(`${url_prefix}/api/templates?api_key=${api_key}`, {
// 'method': 'POST',
// 'headers': {'Content-Type': 'application/json'},
// 'body': JSON.stringify(data)
// })
// .then(response => {
// // catch errors
// if (!response.ok) {
// return Promise.reject(response.status);
// };
// loadTemplateSelection();
// closeAddTemplate();
// return
// })
// .catch(e => {
// if (e === 401) {
// window.location.href = `${url_prefix}/`;
// } else {
// console.log(e);
// };
// });
// };
// function closeAddTemplate() {
// hideWindow();
// setTimeout(() => {
// 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);
// };
// function showEditTemplate(id) {
// fetch(`${url_prefix}/api/templates/${id}?api_key=${api_key}`)
// .then(response => {
// // catch errors
// if (!response.ok) {
// return Promise.reject(response.status);
// };
// return response.json();
// })
// .then(json => {
// document.getElementById('template-edit-form').dataset.id = 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 => {
// if (e === 401) {
// window.location.href = `${url_prefix}/`;
// } else {
// console.log(e);
// };
// });
// };
// function saveTemplate() {
// const id = document.getElementById('template-edit-form').dataset.id;
// const data = {
// 'title': edit_template_inputs.title.value,
// 'notification_service': edit_template_inputs['notification-service'].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(`${url_prefix}/api/templates/${id}?api_key=${api_key}`, {
// 'method': 'PUT',
// 'headers': {'Content-Type': 'application/json'},
// 'body': JSON.stringify(data)
// })
// .then(response => {
// // catch errors
// if (!response.ok) {
// return Promise.reject(response.status);
// };
// loadTemplateSelection();
// hideWindow();
// })
// .catch(e => {
// if (e === 401) {
// window.location.href = `${url_prefix}/`;
// } else {
// console.log(e);
// };
// });
// };
// function deleteTemplate() {
// const id = document.getElementById('template-edit-form').dataset.id;
// fetch(`${url_prefix}/api/templates/${id}?api_key=${api_key}`, {
// 'method': 'DELETE'
// })
// .then(response => {
// // catch errors
// if (!response.ok) {
// return Promise.reject(response.status);
// };
// loadTemplateSelection();
// hideWindow();
// })
// .catch(e => {
// if (e === 401) {
// window.location.href = `${url_prefix}/`;
// } else {
// console.log(e);
// };
// });
// };

View File

@@ -63,24 +63,35 @@ function toggleRepeated() {
function testReminder() {
const input = document.getElementById('test-reminder');
if (inputs.title.value === '') {
input.classList.add('error-input');
input.title = 'No title set';
return
} else {
input.classList.remove('error-input');
input.removeAttribute('title');
};
const data = {
'title': inputs.title.value,
'notification_service': inputs.notification_service.value,
'text': inputs.text.value
};
fetch(`${url_prefix}/api/reminders/test?api_key=${api_key}`, {
const cl = document.getElementById('info').classList;
const r_id = document.getElementById('info').dataset.id;
const headers = {
'method': 'POST',
'headers': {'Content-Type': 'application/json'},
'body': JSON.stringify(data)
})
'headers': {'Content-Type': 'application/json'}
};
let url;
if (cl.contains('show-edit-static-reminder')) {
// Trigger static reminder
url = `${url_prefix}/api/staticreminders/${r_id}?api_key=${api_key}`;
} else {
// Test reminder draft
if (inputs.title.value === '') {
input.classList.add('error-input');
input.title = 'No title set';
return
} else {
input.classList.remove('error-input');
input.removeAttribute('title');
};
const data = {
'title': inputs.title.value,
'notification_service': inputs.notification_service.value,
'text': inputs.text.value
};
headers.body = JSON.stringify(data);
url = `${url_prefix}/api/reminders/test?api_key=${api_key}`;
};
fetch(url, headers)
.then(response => {
if (!response.ok) return Promise.reject(response.status);
input.classList.add('show-sent');
@@ -103,6 +114,9 @@ function deleteInfo() {
} else if (cl.contains('show-edit-template')) {
// Delete template
url = `${url_prefix}/api/templates/${e_id}?api_key=${api_key}`;
} else if (cl.contains('show-edit-static-reminder')) {
// Delete static reminder
url = `${url_prefix}/api/staticreminders/${e_id}?api_key=${api_key}`;
} else return;
fetch(url, {'method': 'DELETE'})
@@ -111,6 +125,7 @@ function deleteInfo() {
fillNotificationSelection();
fillReminders();
fillStaticReminders();
fillTemplates();
hideWindow();
})
@@ -156,6 +171,11 @@ function submitInfo() {
fetch_data.url = `${url_prefix}/api/templates?api_key=${api_key}`;
fetch_data.method = 'POST';
} else if (cl.contains('show-add-static-reminder')) {
// Add static reminder
fetch_data.url = `${url_prefix}/api/staticreminders?api_key=${api_key}`;
fetch_data.method = 'POST';
} else if (cl.contains('show-edit-reminder')) {
// Edit reminder
data['time'] = (new Date(inputs.time.value) / 1000) + (new Date(inputs.time.value).getTimezoneOffset() * 60)
@@ -171,6 +191,11 @@ function submitInfo() {
fetch_data.url = `${url_prefix}/api/templates/${e_id}?api_key=${api_key}`;
fetch_data.method = 'PUT';
} else if (cl.contains('show-edit-static-reminder')) {
// Edit a static reminder
fetch_data.url = `${url_prefix}/api/staticreminders/${e_id}?api_key=${api_key}`;
fetch_data.method = 'PUT';
} else return;
fetch(fetch_data.url, {
@@ -182,6 +207,7 @@ function submitInfo() {
if (!response.ok) return Promise.reject(response.status);
fillReminders();
fillStaticReminders();
fillTemplates();
hideWindow();
})