remove jquery
This commit is contained in:
parent
f7137e2d4c
commit
9cbb58417e
@ -43,20 +43,18 @@
|
||||
<h1>{{ title_long }}</h1>
|
||||
</header>
|
||||
<div class="wrapper">
|
||||
<div class="container">
|
||||
{% if admin_enabled %}
|
||||
<div style="color: #ccc; margin: 20px; border: 1px solid #ccc; padding: 10px; background-color: #979797;">
|
||||
<a href="{{ url_for('index') }}" style="color: #ccc; text-decoration: none;">App</a>
|
||||
<div style="color: #ccc; border: 1px solid #ccc; padding: 10px; background-color: #979797;">
|
||||
<a href="{{ url_for('mylinks') }}" class="btn" style="color: #ccc; text-decoration: none;">Meine Links</a>
|
||||
<span> | </span>
|
||||
<a href="{{ url_for('mylinks') }}" style="color: #ccc; text-decoration: none;">Meine Links</a>
|
||||
<a href="{{ url_for('connections') }}" class="btn" style="color: #ccc; text-decoration: none;">Verbindungen</a>
|
||||
<span> | </span>
|
||||
<a href="{{ url_for('connections') }}" style="color: #ccc; text-decoration: none;">Verbindungen</a>
|
||||
<a href="{{ url_for('dashboard') }}" class="btn" style="color: #ccc; text-decoration: none;">Auswertung</a>
|
||||
<span> | </span>
|
||||
<a href="{{ url_for('dashboard') }}" style="color: #ccc; text-decoration: none;">Auswertung</a>
|
||||
<span> | </span>
|
||||
<a href="{{ url_for('folder_secret_config_editor') }}" style="color: #ccc; text-decoration: none;" id="edit-folder-config" >Ordnerkonfiguration</a>
|
||||
<a href="{{ url_for('folder_secret_config_editor') }}" class="btn" style="color: #ccc; text-decoration: none;" id="edit-folder-config" >Ordnerkonfiguration</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="container">
|
||||
<div id="breadcrumbs" class="breadcrumb"></div>
|
||||
<div id="content"></div>
|
||||
<div id="directory-controls">
|
||||
|
||||
@ -37,23 +37,17 @@
|
||||
<body>
|
||||
|
||||
<!-- Navigation Bar -->
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary mb-3">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav ms-auto">
|
||||
<li class="nav-item"><a href="{{ url_for('index') }}" class="nav-link">App</a></li>
|
||||
<li class="nav-item"><a href="{{ url_for('mylinks') }}" class="nav-link">Meine Links</a></li>
|
||||
<li class="nav-item"><a href="{{ url_for('connections') }}" class="nav-link">Verbindungen</a></li>
|
||||
<li class="nav-item"><a href="{{ url_for('dashboard') }}" class="nav-link">Auswertung-Downloads</a></li>
|
||||
<li class="nav-item"><a href="{{ url_for('songs_dashboard') }}" class="nav-link">Auswertung-Wiederholungen</a></li>
|
||||
<div style="background-color: #979797; padding: 5px; display: flex; gap: 5px; flex-wrap: wrap;">
|
||||
<a href="{{ url_for('index') }}" class="btn btn-secondary btn-sm">App</a>
|
||||
<a href="{{ url_for('mylinks') }}" class="btn btn-secondary btn-sm">Meine Links</a>
|
||||
<a href="{{ url_for('connections') }}" class="btn btn-secondary btn-sm">Verbindungen</a>
|
||||
<a href="{{ url_for('dashboard') }}" class="btn btn-secondary btn-sm">Auswertung-Downloads</a>
|
||||
<a href="{{ url_for('songs_dashboard') }}" class="btn btn-secondary btn-sm">Auswertung-Wiederholungen</a>
|
||||
{% if admin_enabled %}
|
||||
<li class="nav-item"><a href="{{ url_for('folder_secret_config_editor') }}" class="nav-link">Ordnerkonfiguration</a></li>
|
||||
<a href="{{ url_for('folder_secret_config_editor') }}" class="btn btn-secondary btn-sm" id="edit-folder-config">Ordnerkonfiguration</a>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
{% block nav_extra %}{% endblock %}
|
||||
</div>
|
||||
</nav>
|
||||
<div class="container">
|
||||
<h2>{% block nav_brand %}Übersicht deiner gültigen Links{% endblock %}</h2>
|
||||
</div>
|
||||
|
||||
@ -35,160 +35,283 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block scripts %}
|
||||
<!-- jQuery -->
|
||||
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
||||
<script>
|
||||
const ALPHABET = {{ alphabet|tojson }};
|
||||
let data = [];
|
||||
let editing = new Set();
|
||||
let pendingDelete = null; // store secret pending confirmation
|
||||
let pendingDelete = null;
|
||||
|
||||
function loadData() {
|
||||
$.getJSON('/admin/folder_secret_config_editor/data', res => { data = res; render(); });
|
||||
// helper to format DD.MM.YYYY → YYYY-MM-DD
|
||||
function formatISO(d) {
|
||||
const [dd, mm, yyyy] = d.split('.');
|
||||
return (dd && mm && yyyy) ? `${yyyy}-${mm}-${dd}` : '';
|
||||
}
|
||||
|
||||
// load from server
|
||||
async function loadData() {
|
||||
try {
|
||||
const res = await fetch('/admin/folder_secret_config_editor/data');
|
||||
data = await res.json();
|
||||
render();
|
||||
} catch (err) {
|
||||
console.error(err);
|
||||
}
|
||||
}
|
||||
|
||||
// send delete/update actions
|
||||
async function sendAction(payload) {
|
||||
await fetch('/admin/folder_secret_config_editor/action', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
await loadData();
|
||||
}
|
||||
|
||||
// delete record after confirmation
|
||||
function deleteRec(secret) {
|
||||
sendAction({ action: 'delete', secret });
|
||||
}
|
||||
|
||||
// build all cards
|
||||
function render() {
|
||||
const $cont = $('#records').empty();
|
||||
const cont = document.getElementById('records');
|
||||
cont.innerHTML = '';
|
||||
|
||||
data.forEach(rec => {
|
||||
const key = rec.secret;
|
||||
const isEdit = editing.has(key);
|
||||
const expired = (formatISO(rec.validity) && new Date(formatISO(rec.validity)) < new Date());
|
||||
const cls = isEdit ? 'unlocked' : 'locked';
|
||||
|
||||
// Determine if entry has expired
|
||||
const validityISO = formatISO(rec.validity);
|
||||
const expired = validityISO ? (new Date(validityISO) < new Date()) : false;
|
||||
// outer card
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.className = 'card mb-3';
|
||||
wrapper.dataset.secret = key;
|
||||
|
||||
// Build card HTML
|
||||
let html = `<div class="card mb-3" data-secret="${key}"><div class="card-body ${cls}">`;
|
||||
// Show exclamation if expired
|
||||
html += `<h5>Link${expired ? ' <span class="text-danger fw-bold"> ! abgelaufen !</span>' : ''}</h5>`;
|
||||
html += `<div class="mb-2">Secret: <input class="form-control" type="text" value="${rec.secret}" ${isEdit?'':'readonly'} data-field="secret"></div>`;
|
||||
html += `<div class="mb-2">Validity: <input class="form-control" type="date" value="${validityISO}" ${isEdit?'':'readonly'} data-field="validity"></div>`;
|
||||
html += `<h6>Ordner</h6>`;
|
||||
rec.folders.forEach((f,i) => {
|
||||
html += `<div style="border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; border-radius: 5px;">`;
|
||||
html += `Ordnername: <div class="input-group mb-2">`;
|
||||
html += `<input class="form-control" type="text" value="${f.foldername}" ${isEdit?'':'readonly'} data-field="foldername-${i}">`;
|
||||
if(isEdit) html += `<button class="btn btn-outline-danger" onclick="removeFolder('${key}',${i})">Remove</button>`;
|
||||
html += `</div>`;
|
||||
html += `Ordnerpfad: <input class="form-control mb-2" type="text" value="${f.folderpath}" ${isEdit?'':'readonly'} data-field="folderpath-${i}">`;
|
||||
html += `</div>`;
|
||||
const body = document.createElement('div');
|
||||
body.className = `card-body ${cls}`;
|
||||
|
||||
// header
|
||||
const h5 = document.createElement('h5');
|
||||
h5.innerHTML = `Link${expired ? ' <span class="text-danger fw-bold"> ! abgelaufen !</span>' : ''}`;
|
||||
body.appendChild(h5);
|
||||
|
||||
// secret input
|
||||
const secDiv = document.createElement('div');
|
||||
secDiv.className = 'mb-2';
|
||||
secDiv.innerHTML = `Secret: `;
|
||||
const secInput = document.createElement('input');
|
||||
secInput.className = 'form-control';
|
||||
secInput.type = 'text';
|
||||
secInput.value = rec.secret;
|
||||
secInput.readOnly = !isEdit;
|
||||
secInput.dataset.field = 'secret';
|
||||
secDiv.appendChild(secInput);
|
||||
body.appendChild(secDiv);
|
||||
|
||||
// validity input
|
||||
const valDiv = document.createElement('div');
|
||||
valDiv.className = 'mb-2';
|
||||
valDiv.innerHTML = `Gültig bis: `;
|
||||
const valInput = document.createElement('input');
|
||||
valInput.className = 'form-control';
|
||||
valInput.type = 'date';
|
||||
valInput.value = formatISO(rec.validity);
|
||||
valInput.readOnly = !isEdit;
|
||||
valInput.dataset.field = 'validity';
|
||||
valDiv.appendChild(valInput);
|
||||
body.appendChild(valDiv);
|
||||
|
||||
// folders
|
||||
const folderHeader = document.createElement('h6');
|
||||
folderHeader.textContent = 'Ordner';
|
||||
body.appendChild(folderHeader);
|
||||
|
||||
rec.folders.forEach((f, i) => {
|
||||
const fwrap = document.createElement('div');
|
||||
fwrap.style = 'border:1px solid #ccc; padding:10px; margin-bottom:10px; border-radius:5px;';
|
||||
|
||||
// name
|
||||
fwrap.appendChild(document.createTextNode("Ordnername: "));
|
||||
const nameGroup = document.createElement('div');
|
||||
nameGroup.className = 'input-group mb-2';
|
||||
const nameInput = document.createElement('input');
|
||||
nameInput.className = 'form-control';
|
||||
nameInput.type = 'text';
|
||||
nameInput.value = f.foldername;
|
||||
nameInput.readOnly = !isEdit;
|
||||
nameInput.dataset.field = `foldername-${i}`;
|
||||
nameGroup.appendChild(nameInput);
|
||||
|
||||
if (isEdit) {
|
||||
const remBtn = document.createElement('button');
|
||||
remBtn.className = 'btn btn-outline-danger';
|
||||
remBtn.type = 'button';
|
||||
remBtn.textContent = 'Remove';
|
||||
remBtn.addEventListener('click', () => removeFolder(key, i));
|
||||
nameGroup.appendChild(remBtn);
|
||||
}
|
||||
fwrap.appendChild(nameGroup);
|
||||
|
||||
// path
|
||||
fwrap.appendChild(document.createTextNode("Ordnerpfad: "));
|
||||
const pathInput = document.createElement('input');
|
||||
pathInput.className = 'form-control mb-2';
|
||||
pathInput.type = 'text';
|
||||
pathInput.value = f.folderpath;
|
||||
pathInput.readOnly = !isEdit;
|
||||
pathInput.dataset.field = `folderpath-${i}`;
|
||||
fwrap.appendChild(pathInput);
|
||||
|
||||
body.appendChild(fwrap);
|
||||
});
|
||||
if(isEdit) html += `<button class="btn btn-sm btn-primary mb-2" onclick="addFolder('${key}')">Add Folder</button>`;
|
||||
html += `<div>`;
|
||||
if (!isEdit) html += `<a class="btn btn-secondary btn-sm me-2" href="/?secret=${rec.secret}">Link öffnen</a>`;
|
||||
html += `<button class="btn btn-danger btn-sm me-2 delete-btn" data-secret="${key}">Delete</button>`;
|
||||
html += `<button class="btn btn-secondary btn-sm me-2" onclick="cloneRec('${key}')">Clone</button>`;
|
||||
if(isEdit) html += `<button class="btn btn-success btn-sm" onclick="saveRec('${key}')">Save</button>`;
|
||||
else html += `<button class="btn btn-warning btn-sm" onclick="editRec('${key}')">Edit</button>`;
|
||||
html += `</div></div></div>`;
|
||||
$cont.append(html);
|
||||
|
||||
if (isEdit) {
|
||||
const addFld = document.createElement('button');
|
||||
addFld.className = 'btn btn-sm btn-primary mb-2';
|
||||
addFld.type = 'button';
|
||||
addFld.textContent = 'Add Folder';
|
||||
addFld.addEventListener('click', () => addFolder(key));
|
||||
body.appendChild(addFld);
|
||||
}
|
||||
|
||||
// actions row
|
||||
const actions = document.createElement('div');
|
||||
|
||||
if (!isEdit) {
|
||||
const openLink = document.createElement('a');
|
||||
openLink.className = 'btn btn-secondary btn-sm me-2';
|
||||
openLink.href = `/?secret=${rec.secret}`;
|
||||
openLink.textContent = 'Link öffnen';
|
||||
actions.appendChild(openLink);
|
||||
}
|
||||
|
||||
const delBtn = document.createElement('button');
|
||||
delBtn.className = 'btn btn-danger btn-sm me-2 delete-btn';
|
||||
delBtn.type = 'button';
|
||||
delBtn.textContent = 'Delete';
|
||||
delBtn.dataset.secret = key;
|
||||
actions.appendChild(delBtn);
|
||||
|
||||
const cloneBtn = document.createElement('button');
|
||||
cloneBtn.className = 'btn btn-secondary btn-sm me-2';
|
||||
cloneBtn.type = 'button';
|
||||
cloneBtn.textContent = 'Clone';
|
||||
cloneBtn.addEventListener('click', () => cloneRec(key));
|
||||
actions.appendChild(cloneBtn);
|
||||
|
||||
if (isEdit) {
|
||||
const saveBtn = document.createElement('button');
|
||||
saveBtn.className = 'btn btn-success btn-sm';
|
||||
saveBtn.type = 'button';
|
||||
saveBtn.textContent = 'Save';
|
||||
saveBtn.addEventListener('click', () => saveRec(key));
|
||||
actions.appendChild(saveBtn);
|
||||
} else {
|
||||
const editBtn = document.createElement('button');
|
||||
editBtn.className = 'btn btn-warning btn-sm';
|
||||
editBtn.type = 'button';
|
||||
editBtn.textContent = 'Edit';
|
||||
editBtn.addEventListener('click', () => editRec(key));
|
||||
actions.appendChild(editBtn);
|
||||
}
|
||||
|
||||
body.appendChild(actions);
|
||||
wrapper.appendChild(body);
|
||||
cont.appendChild(wrapper);
|
||||
});
|
||||
}
|
||||
|
||||
function formatISO(d) {
|
||||
const p = d.split('.');
|
||||
return p.length===3 ? `${p[2]}-${p[1]}-${p[0]}` : '';
|
||||
}
|
||||
|
||||
// original delete function, called after confirmation
|
||||
function deleteRec(secret) {
|
||||
$.ajax({
|
||||
url: '/admin/folder_secret_config_editor/action',
|
||||
method: 'POST',
|
||||
contentType: 'application/json',
|
||||
data: JSON.stringify({ action: 'delete', secret })
|
||||
}).always(loadData);
|
||||
}
|
||||
|
||||
// hook delete buttons to show modal
|
||||
$(document).on('click', '.delete-btn', function() {
|
||||
pendingDelete = $(this).data('secret');
|
||||
const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
|
||||
modal.show();
|
||||
});
|
||||
|
||||
// when user confirms deletion
|
||||
$('.confirm-delete').on('click', function() {
|
||||
if (pendingDelete) {
|
||||
deleteRec(pendingDelete);
|
||||
pendingDelete = null;
|
||||
}
|
||||
const modalEl = document.getElementById('confirmDeleteModal');
|
||||
const modal = bootstrap.Modal.getInstance(modalEl);
|
||||
modal.hide();
|
||||
});
|
||||
|
||||
function editRec(secret) { editing.add(secret); render(); }
|
||||
function cloneRec(secret) {
|
||||
const rec = data.find(r=>r.secret===secret);
|
||||
const existing = data.map(r=>r.secret);
|
||||
const clone = JSON.parse(JSON.stringify(rec));
|
||||
clone.secret = generateSecret(existing);
|
||||
data.splice(data.findIndex(r=>r.secret===secret)+1, 0, clone);
|
||||
editing.add(clone.secret);
|
||||
render();
|
||||
}
|
||||
function addFolder(secret) {
|
||||
const rec = data.find(r=>r.secret===secret);
|
||||
rec.folders.push({foldername:'',folderpath:''}); render();
|
||||
}
|
||||
function removeFolder(secret,i) {
|
||||
const rec = data.find(r=>r.secret===secret);
|
||||
rec.folders.splice(i,1); render();
|
||||
}
|
||||
function saveRec(secret) {
|
||||
const rec = data.find(r=>r.secret===secret);
|
||||
const $card = $(`[data-secret='${secret}']`);
|
||||
const newSecret = $card.find('input[data-field=secret]').val();
|
||||
const validity = $card.find('input[data-field=validity]').val();
|
||||
const folders = rec.folders.map((_,i) => ({
|
||||
foldername: $card.find(`[data-field=foldername-${i}]`).val(),
|
||||
folderpath: $card.find(`[data-field=folderpath-${i}]`).val()
|
||||
}));
|
||||
if(!newSecret||data.some(r=>r.secret!==secret&&r.secret===newSecret)){
|
||||
alert('Secret must be unique and non-empty');
|
||||
return;
|
||||
}
|
||||
if(!validity){
|
||||
alert('Validity required');
|
||||
return;
|
||||
}
|
||||
if(folders.some(f=>!f.foldername||!f.folderpath)){
|
||||
alert('Folder entries cannot be empty');
|
||||
return;
|
||||
}
|
||||
$.ajax({
|
||||
url:'/admin/folder_secret_config_editor/action',
|
||||
method:'POST',
|
||||
contentType:'application/json',
|
||||
data: JSON.stringify({
|
||||
action:'update',
|
||||
oldSecret:secret,
|
||||
newSecret,
|
||||
validity,
|
||||
folders
|
||||
})
|
||||
}).always(()=>{
|
||||
editing.delete(secret);
|
||||
loadData();
|
||||
});
|
||||
}
|
||||
// generate a unique secret
|
||||
function generateSecret(existing) {
|
||||
let s;
|
||||
do {
|
||||
s = Array.from({length:32},_=>ALPHABET[Math.floor(Math.random()*ALPHABET.length)]).join('');
|
||||
} while(existing.includes(s));
|
||||
s = Array.from({length:32}, () => ALPHABET[Math.floor(Math.random()*ALPHABET.length)]).join('');
|
||||
} while (existing.includes(s));
|
||||
return s;
|
||||
}
|
||||
|
||||
$(document).ready(loadData);
|
||||
$('#add-btn').click(() => {
|
||||
const existing = data.map(r=>r.secret);
|
||||
// CRUD helpers
|
||||
function editRec(secret) {
|
||||
editing.add(secret);
|
||||
render();
|
||||
}
|
||||
function cloneRec(secret) {
|
||||
const idx = data.findIndex(r => r.secret === secret);
|
||||
const rec = JSON.parse(JSON.stringify(data[idx]));
|
||||
const existing = data.map(r => r.secret);
|
||||
rec.secret = generateSecret(existing);
|
||||
data.splice(idx+1, 0, rec);
|
||||
editing.add(rec.secret);
|
||||
render();
|
||||
}
|
||||
function addFolder(secret) {
|
||||
data.find(r => r.secret === secret).folders.push({foldername:'', folderpath:''});
|
||||
render();
|
||||
}
|
||||
function removeFolder(secret, i) {
|
||||
data.find(r => r.secret === secret).folders.splice(i,1);
|
||||
render();
|
||||
}
|
||||
|
||||
async function saveRec(secret) {
|
||||
const card = document.querySelector(`[data-secret="${secret}"]`);
|
||||
const newSecret = card.querySelector('input[data-field="secret"]').value.trim();
|
||||
const validity = card.querySelector('input[data-field="validity"]').value;
|
||||
const rec = data.find(r => r.secret === secret);
|
||||
const folders = rec.folders.map((_, i) => ({
|
||||
foldername: card.querySelector(`input[data-field="foldername-${i}"]`).value.trim(),
|
||||
folderpath: card.querySelector(`input[data-field="folderpath-${i}"]`).value.trim()
|
||||
}));
|
||||
|
||||
if (!newSecret || data.some(r => r.secret !== secret && r.secret === newSecret)) {
|
||||
return alert('Secret must be unique and non-empty');
|
||||
}
|
||||
if (!validity) {
|
||||
return alert('Validity required');
|
||||
}
|
||||
if (folders.some(f => !f.foldername || !f.folderpath)) {
|
||||
return alert('Folder entries cannot be empty');
|
||||
}
|
||||
|
||||
await sendAction({
|
||||
action: 'update',
|
||||
oldSecret: secret,
|
||||
newSecret,
|
||||
validity,
|
||||
folders
|
||||
});
|
||||
editing.delete(secret);
|
||||
await loadData();
|
||||
}
|
||||
|
||||
// modal handling for delete
|
||||
document.addEventListener('click', e => {
|
||||
if (e.target.matches('.delete-btn')) {
|
||||
pendingDelete = e.target.dataset.secret;
|
||||
const modal = new bootstrap.Modal(document.getElementById('confirmDeleteModal'));
|
||||
modal.show();
|
||||
}
|
||||
});
|
||||
document.querySelector('.confirm-delete').addEventListener('click', () => {
|
||||
if (pendingDelete) deleteRec(pendingDelete);
|
||||
pendingDelete = null;
|
||||
const modal = bootstrap.Modal.getInstance(document.getElementById('confirmDeleteModal'));
|
||||
modal.hide();
|
||||
});
|
||||
|
||||
// init
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
document.getElementById('add-btn').addEventListener('click', () => {
|
||||
const existing = data.map(r => r.secret);
|
||||
const newSecret = generateSecret(existing);
|
||||
data.push({secret:newSecret, validity:new Date().toISOString().substr(0,10), folders:[]});
|
||||
data.push({ secret: newSecret, validity: new Date().toISOString().slice(0,10), folders: [] });
|
||||
editing.add(newSecret);
|
||||
render();
|
||||
});
|
||||
loadData();
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user