v1.0 - Dépenses Trello avec status, envoi par ligne
This commit is contained in:
h3r7
@@ -11,7 +11,7 @@
|
||||
body { font-family: 'Outfit', sans-serif; background: var(--bg-dark); color: var(--text); padding: 15px; min-height: 100vh; }
|
||||
h1 { text-align: center; font-size: 1.6em; background: linear-gradient(135deg, var(--primary), var(--secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
|
||||
.nav { display: flex; gap: 10px; margin: 15px 0; }
|
||||
.nav a { flex: 1; padding: 12px; background: var(--bg-card); border-radius: 10px; text-align: center; color: var(--text-dim); text-decoration: none; }
|
||||
.nav a { flex: 1; padding: 12 var(--bg-cardpx; background:); border-radius: 10px; text-align: center; color: var(--text-dim); text-decoration: none; }
|
||||
.nav a.active { background: linear-gradient(135deg, var(--primary), var(--secondary)); color: #fff; }
|
||||
.card { background: var(--bg-card); border-radius: 15px; padding: 15px; margin-bottom: 15px; }
|
||||
h2 { font-size: 1em; margin-bottom: 12px; }
|
||||
@@ -20,14 +20,19 @@
|
||||
.form-group input, .form-group select { width: 100%; padding: 12px; background: var(--bg-input); border: 2px solid transparent; border-radius: 10px; color: var(--text); font-size: 1em; }
|
||||
.form-group input:focus { border-color: var(--accent); outline: none; }
|
||||
.btn { width: 100%; padding: 14px; border: none; border-radius: 10px; font-weight: 600; cursor: pointer; margin-top: 10px; }
|
||||
.btn-sm { width: auto; padding: 8px 12px; font-size: 0.85em; }
|
||||
.btn-primary { background: linear-gradient(135deg, var(--accent), #0099cc); color: var(--bg-dark); }
|
||||
.btn-success { background: linear-gradient(135deg, var(--success), #00cc66); color: var(--bg-dark); }
|
||||
.btn-danger { background: var(--danger); color: #fff; }
|
||||
.btn-send { background: linear-gradient(135deg, #0088cc, #006699); color: #fff; }
|
||||
.prenom-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
|
||||
.prenom-tag { display: flex; align-items: center; gap: 5px; background: linear-gradient(135deg, var(--primary), var(--secondary)); padding: 8px 12px; border-radius: 20px; font-size: 0.85em; }
|
||||
.expense-item { display: flex; justify-content: space-between; align-items: center; padding: 12px; background: var(--bg-input); border-radius: 10px; margin-bottom: 8px; flex-wrap: wrap; gap: 5px; }
|
||||
.expense-prenom { background: linear-gradient(135deg, var(--primary), var(--secondary)); padding: 4px 10px; border-radius: 15px; font-size: 0.75em; white-space: nowrap; }
|
||||
.expense-montant { font-weight: 700; color: var(--accent); }
|
||||
.expense-status { font-size: 0.75em; padding: 3px 8px; border-radius: 10px; }
|
||||
.status-pending { background: rgba(255,200,0,0.2); color: #ffc800; }
|
||||
.status-sent { background: rgba(0,255,136,0.2); color: var(--success); }
|
||||
.total { text-align: right; font-size: 1.2em; margin: 10px 0; padding: 12px; background: rgba(0,217,255,0.1); border-radius: 10px; }
|
||||
.total span { font-weight: 700; color: var(--accent); }
|
||||
.preview { background: var(--bg-input); padding: 12px; border-radius: 10px; white-space: pre-wrap; color: var(--success); font-family: monospace; margin-top: 10px; }
|
||||
@@ -47,7 +52,7 @@
|
||||
<h2>➕ Nouvelle dépense</h2>
|
||||
<form method="POST" action="/api/add" id="form-add">
|
||||
<div class="form-group"><label>👤 Prénom</label><select name="prenom" id="prenom-select" required></select></div>
|
||||
<div class="form-group"><label>📅 Date</label><input type="date" name="date" id="depense-date" required></div>
|
||||
<div class="form-group"><label>📅 Date</label><input type="text" name="date" id="depense-date" placeholder="JJ/MM/AAAA" required></div>
|
||||
<div class="form-group"><label>📝 Libellé</label><input type="text" name="libelle" placeholder="Courses, Essence..." required></div>
|
||||
<div class="form-group"><label>💰 Montant (€)</label><input type="number" name="montant" placeholder="0.00" step="0.01" required></div>
|
||||
<button type="submit" class="btn btn-primary">➕ Ajouter</button>
|
||||
@@ -59,11 +64,8 @@
|
||||
<div id="expenses"></div>
|
||||
<div class="total">Total: <span id="total">0.00€</span></div>
|
||||
<div class="actions">
|
||||
<button class="btn btn-primary" onclick="generate()">👁️ Aperçu</button>
|
||||
<button class="btn btn-success" onclick="sendTrello()">🟦 Envoyer Trello</button>
|
||||
<button class="btn btn-danger" onclick="clearAll()">🗑️ Tout effacer</button>
|
||||
</div>
|
||||
<div class="preview" id="preview" style="display:none"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -153,19 +155,36 @@
|
||||
var html = '';
|
||||
for (var i = 0; i < depenses.length; i++) {
|
||||
var d = depenses[i];
|
||||
var isSent = d.status === 'Envoyé ✅';
|
||||
var statusClass = isSent ? 'status-sent' : 'status-pending';
|
||||
var sendBtn = isSent ? '' : '<button class="btn btn-sm btn-send" onclick="sendOne(' + d.id + ')">🟦</button>';
|
||||
|
||||
html += '<div class="expense-item">';
|
||||
html += '<div style="display:flex;align-items:center;gap:10px">';
|
||||
html += '<span class="expense-prenom">' + d.prenom + '</span>';
|
||||
html += '<span>' + formatDate(d.date) + ' - ' + d.libelle + '</span>';
|
||||
html += '</div>';
|
||||
html += '<div style="display:flex;align-items:center;gap:10px">';
|
||||
html += '<span class="expense-status ' + statusClass + '">' + (d.status || 'En attente') + '</span>';
|
||||
html += '<span class="expense-montant">' + parseFloat(d.montant).toFixed(2) + '€</span>';
|
||||
html += sendBtn;
|
||||
html += '<a href="/api/del/' + d.id + '" style="color:var(--danger);text-decoration:none;font-size:1.2em">🗑️</a>';
|
||||
html += '</div></div>';
|
||||
}
|
||||
document.getElementById('expenses').innerHTML = html;
|
||||
|
||||
document.getElementById('depense-date').value = new Date().toISOString().split('T')[0];
|
||||
var today = new Date();
|
||||
var dd = String(today.getDate()).padStart(2, '0');
|
||||
var mm = String(today.getMonth() + 1).padStart(2, '0');
|
||||
var yyyy = today.getFullYear();
|
||||
document.getElementById('depense-date').value = dd + '/' + mm + '/' + yyyy;
|
||||
}
|
||||
|
||||
async function sendOne(id) {
|
||||
if (!config.trello || !config.trello.api_key) { alert('Configure Trello!'); showPage('config'); return; }
|
||||
var r = await fetch('/api/trello/send_one/' + id, { method: 'POST' });
|
||||
if (r.ok) { alert('Envoyé sur Trello!'); load(); }
|
||||
else { var e = await r.json(); alert('Erreur: ' + e.error); }
|
||||
}
|
||||
|
||||
document.getElementById('form-add').onsubmit = function(e) {
|
||||
@@ -207,17 +226,20 @@
|
||||
async function generate() {
|
||||
var r = await fetch('/api/generate', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({depenses: depenses}) });
|
||||
var d = await r.json();
|
||||
document.getElementById('preview').textContent = d.text;
|
||||
document.getElementById('preview').style.display = 'block';
|
||||
alert(d.text);
|
||||
}
|
||||
|
||||
async function sendTrello() {
|
||||
async function sendAll() {
|
||||
if (!config.trello || !config.trello.api_key) { alert('Configure Trello!'); showPage('config'); return; }
|
||||
await generate();
|
||||
var text = document.getElementById('preview').textContent;
|
||||
var r = await fetch('/api/trello/send', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({title: 'Dépenses ' + new Date().toLocaleDateString('fr'), text: text}) });
|
||||
if (r.ok) { alert('Envoyé sur Trello!'); clearAll(); }
|
||||
else { var e = await r.json(); alert('Erreur: ' + e.error); }
|
||||
var sent = 0;
|
||||
for (var i = 0; i < depenses.length; i++) {
|
||||
if (depenses[i].status !== 'Envoyé ✅') {
|
||||
var r = await fetch('/api/trello/send_one/' + depenses[i].id, { method: 'POST' });
|
||||
if (r.ok) sent++;
|
||||
}
|
||||
}
|
||||
alert('Envoyé(s): ' + sent);
|
||||
load();
|
||||
}
|
||||
|
||||
async function clearAll() {
|
||||
|
||||
Reference in New Issue
Block a user