github/MIND
1
1
Fork 0
mirror of https://github.com/Casvt/MIND.git synced 2026-02-19 11:54:46 -05:00
Code Issues Packages Projects Releases Wiki Activity

Moved delete button to edit page

Browse Source
This commit is contained in:
CasVT
2023-01-19 21:46:43 +01:00
parent 420faf2ea1
commit e0dc2ddda6
5 changed files with 37 additions and 93 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
frontend/static/css/add_edit.css
View File

@@ -107,6 +107,11 @@ div.options > button {
background-color: var(--color-gray);
}
#delete-reminder {
border-color: var(--color-error);
color: var(--color-error);
}
@media (max-width: 460px) {
.sub-inputs > input,
.sub-inputs > select {

48
frontend/static/css/reminders_templates.css
View File

@@ -98,7 +98,6 @@
background-color: var(--color-gray);
}
div.entry.fit,
button.entry.fit {
flex-grow: 1;
}
@@ -117,53 +116,6 @@ button.entry.fit {
font-weight: 500;
}
.entry-overlay {
--height: 1.7rem;
opacity: 0;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: var(--height);
display: flex;
justify-content: flex-end;
align-items: center;
gap: .5rem;
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
padding: .5rem;
background-color: rgb(0 0 0 / 25%);
transition: opacity .2s ease-in;
}
.entry-overlay::before {
content: '';
position: absolute;
height: 25px;
width: 100%;
background: linear-gradient(transparent, rgb(0 0 0 / 25%));
left: 0;
bottom: var(--height);
}
.entry-overlay > button {
background-color: transparent;
}
.entry-overlay > button > svg {
width: .9rem;
height: .9rem;
}
.entry:hover > .entry-overlay {
opacity: 1;
}
#delete-template {
border-color: var(--color-error);
color: var(--color-error);

27
frontend/static/js/edit.js
View File

@@ -112,9 +112,36 @@ function toggleEditRepeated() {
edit_type_buttons['repeat-edit-interval'].setAttribute('required', '');
};
function deleteReminder() {
const id = document.getElementById('edit-form').dataset.id;
fetch(`/api/reminders/${id}?api_key=${api_key}`, {
'method': 'DELETE'
})
.then(response => {
// catch errors
if (!response.ok) {
return Promise.reject(response.status);
};
fillList();
hideWindow();
return;
})
.catch(e => {
if (e === 401) {
window.location.href = '/';
} else if (e === 404) {
fillList();
} else {
console.log(e);
};
});
};
// code run on load
document.getElementById('edit-form').setAttribute('action', 'javascript:editReminder();');
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());
document.getElementById('delete-reminder').addEventListener('click', e => deleteReminder());

49
frontend/static/js/reminders.js
View File

@@ -1,11 +1,12 @@
function fillTable(result) {
const table = document.getElementById('reminder-list');
table.querySelectorAll('div.entry').forEach(e => e.remove());
table.querySelectorAll('button.entry:not(#add-entry)').forEach(e => e.remove());
result.forEach(reminder => {
const entry = document.createElement('div');
const entry = document.createElement('button');
entry.classList.add('entry');
entry.dataset.id = reminder.id;
entry.addEventListener('click', e => showEdit(reminder.id));
const title = document.createElement('h2');
title.innerText = reminder.title;
@@ -26,24 +27,6 @@ function fillTable(result) {
};
time.innerText = formatted_date;
entry.appendChild(time);
const options = document.createElement('div');
options.classList.add('entry-overlay');
entry.appendChild(options);
const edit_entry = document.createElement('button');
edit_entry.addEventListener('click', e => showEdit(reminder.id));
edit_entry.innerHTML = edit_icon;
edit_entry.title = 'Edit reminder';
edit_entry.setAttribute('aria-label', 'Edit reminder');
options.appendChild(edit_entry);
const delete_entry = document.createElement('button');
delete_entry.addEventListener('click', e => deleteReminder(reminder.id));
delete_entry.innerHTML = delete_icon;
delete_entry.title = 'Delete reminder';
delete_entry.setAttribute('aria-label', 'Delete reminder');
options.appendChild(delete_entry);
table.appendChild(entry);
@@ -51,7 +34,7 @@ function fillTable(result) {
entry.classList.add('expand');
};
});
table.querySelectorAll('div.entry').forEach(reminder => reminder.classList.add('fit'));
table.querySelectorAll('button.entry:not(#add-entry)').forEach(reminder => reminder.classList.add('fit'));
};
function fillList() {
@@ -102,30 +85,6 @@ function clearSearch() {
fillList();
}
function deleteReminder(id) {
const entry = document.querySelector(`div.entry[data-id="${id}"]`);
entry.remove();
fetch(`/api/reminders/${id}?api_key=${api_key}`, {
'method': 'DELETE'
})
.then(response => {
// catch errors
if (!response.ok) {
return Promise.reject(response.status);
};
})
.catch(e => {
if (e === 401) {
window.location.href = '/';
} else if (e === 404) {
fillList();
} else {
console.log(e);
};
});
};
// code run on load
fillList();

1
frontend/templates/reminders.html
View File

@@ -225,6 +225,7 @@
<textarea id="text-edit-input" cols="30" rows="10" placeholder="Text (optional)"></textarea>
<div class="options">
<button type="button" id="close-edit">Cancel</button>
<button type="button" id="delete-reminder">Delete</button>
<button type="submit">Save</button>
</div>
</form>