Mutlu56

<!doctype html>

<title>Fiş Defteri</title> <style> :root{font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;line-height:1.4;color:#222} body{max-width:980px;margin:24px auto;padding:16px} .row{margin-bottom:10px;display:flex;gap:10px;align-items:center} label{width:110px} input[type="text"],input[type="number"],input[type="date"],select,input#search{flex:1;padding:6px;border:1px solid #ccc;border-radius:4px} .actions{display:flex;gap:8px;margin-top:8px} button{padding:8px 12px;border-radius:6px;border:1px solid #888;background:#f3f3f3;cursor:pointer} button.secondary{background:#fff} button.danger{background:#ffdede;border-color:#ff7b7b} .table-section{margin-top:18px;overflow:auto} table{width:100%;border-collapse:collapse} th,td{padding:8px;border:1px solid #e6e6e6;text-align:left} th{cursor:pointer;background:#fafafa;user-select:none} tr.gelir td{background:#f0fff4} tr.gider td{background:#fff6f6} .actions .edit,.actions .del{padding:4px 8px} tfoot td{font-weight:600;background:#f9f9f9} .toplam td{background:#fff} small{color:#666} .export-buttons{display:flex;gap:8px;align-items:center} #search{max-width:320px;margin-bottom:8px} .empty{color:#666;text-align:center;padding:12px} </style>

İşlem Türü -- Seçiniz -- Gelir (Giriş) Gider (Çıkış)

  <div class="row">
    <label for="aciklama">Açıklama</label>
    <input type="text" id="aciklama" required />
  </div>

  <div class="row">
    <label for="tutar">Tutar (₺)</label>
    <input type="number" id="tutar" step="0.01" min="0.01" required />
  </div>

  <div class="row">
    <label for="tarih">Tarih</label>
    <input type="date" id="tarih" required />
  </div>

  <div class="row">
    <label for="yetkili">Yetkili</label>
    <input type="text" id="yetkili" required />
  </div>

  <div class="actions">
    <button id="kaydetBtn" type="button">Kaydet</button>
    <button id="temizleForm" type="button" class="secondary">Temizle</button>
  </div>
</form>

CSV İndir JSON İndir Hepsini Sil

Tür	Açıklama	Tutar	Tarih	Yetkili	İşlem
Toplam Gelir		0.00 ₺
Toplam Gider		0.00 ₺
Kasa Bakiyesi		0.00 ₺

Henüz kayıt yok. Formu doldurup "Kaydet"e basın.

Hazırlayan: Otomatik dönüştürücü · Veriler tarayıcıda saklanır (localStorage) <script> // Simple fiş defteri uygulaması - localStorage kullanır (function(){ const LS_KEY = 'fisler_v1'; const form = document.getElementById('fisForm'); const turEl = document.getElementById('tur'); const aciklamaEl = document.getElementById('aciklama'); const tutarEl = document.getElementById('tutar'); const tarihEl = document.getElementById('tarih'); const yetkiliEl = document.getElementById('yetkili'); const kaydetBtn = document.getElementById('kaydetBtn'); const temizleFormBtn = document.getElementById('temizleForm'); const tbody = document.querySelector('#fisTablosu tbody'); const topGelirEl = document.getElementById('topGelir'); const topGiderEl = document.getElementById('topGider'); const netEl = document.getElementById('net'); const searchEl = document.getElementById('search'); const exportCsvBtn = document.getElementById('exportCsv'); const exportJsonBtn = document.getElementById('exportJson'); const importFileEl = document.getElementById('importFile'); const clearAllBtn = document.getElementById('clearAll'); const emptyHint = document.getElementById('emptyHint'); const headers = Array.from(document.querySelectorAll('th[data-sort]')); let fisler = []; let editingId = null; let sortState = { key: 'tarih', dir: 'desc' }; // default: en yeni üstte // utils function uid(){ return Date.now().toString(36) + Math.random().toString(36).slice(2,8); } function saveToStorage(){ localStorage.setItem(LS_KEY, JSON.stringify(fisler)); } function loadFromStorage(){ try{ const raw = localStorage.getItem(LS_KEY); if(!raw) return []; const parsed = JSON.parse(raw); if(Array.isArray(parsed)) return parsed; return []; }catch(e){ return []; } } function formatMoney(v){ const n = Number(v) || 0; return n.toLocaleString('tr-TR', {minimumFractionDigits:2, maximumFractionDigits:2}) + ' ₺'; } function isoDateString(d){ if(!d) return ''; const dt = new Date(d); if(isNaN(dt)) return d; return dt.toISOString().slice(0,10); } // render function render(){ const q = searchEl.value.trim().toLowerCase(); let items = fisler.slice(); // filtering if(q){ items = items.filter(it => (it.aciklama || '').toLowerCase().includes(q) || (it.yetkili || '').toLowerCase().includes(q) ); } // sorting items.sort((a,b) => { const k = sortState.key; const dir = sortState.dir === 'asc' ? 1 : -1; if(k === 'tutar'){ return (Number(a.tutar) - Number(b.tutar)) * dir; } if(k === 'tarih'){ return (new Date(a.tarih) - new Date(b.tarih)) * dir; } const A = (a[k] || '').toString().toLowerCase(); const B = (b[k] || '').toString().toLowerCase(); return A < B ? -1*dir : (A > B ? 1*dir : 0); }); tbody.innerHTML = ''; if(items.length === 0){ emptyHint.style.display = 'block'; }else{ emptyHint.style.display = 'none'; for(const it of items){ const tr = document.createElement('tr'); tr.className = it.tur === 'gelir' ? 'gelir' : 'gider'; tr.innerHTML = ` ${it.tur === 'gelir' ? 'Gelir' : 'Gider'} ${escapeHtml(it.aciklama)} ${formatMoney(it.tutar)} ${isoDateString(it.tarih)} ${escapeHtml(it.yetkili)} Düzenle Sil `; tbody.appendChild(tr); } } updateTotals(); attachRowListeners(); updateHeaderSortIndicators(); } function updateTotals(){ let gel=0, gid=0; for(const it of fisler){ const n = Number(it.tutar) || 0; if(it.tur === 'gelir') gel += n; else gid += n; } topGelirEl.textContent = formatMoney(gel); topGiderEl.textContent = formatMoney(gid); netEl.textContent = formatMoney(gel - gid); } function attachRowListeners(){ tbody.querySelectorAll('button.edit').forEach(btn => { btn.onclick = () => { const id = btn.dataset.id; startEdit(id); }; }); tbody.querySelectorAll('button.del').forEach(btn => { btn.onclick = () => { const id = btn.dataset.id; if(confirm('Bu kaydı silmek istediğinize emin misiniz?')){ fisler = fisler.filter(f => f.id !== id); saveToStorage(); render(); } }; }); } function updateHeaderSortIndicators(){ headers.forEach(h => { const k = h.dataset.sort; h.textContent = h.textContent.replace(/ ↕| ↑| ↓/g,''); if(k === sortState.key){ h.textContent += sortState.dir === 'asc' ? ' ↑' : ' ↓'; }else{ h.textContent += ' ↕'; } }); } // interactions kaydetBtn.addEventListener('click', () => { const tur = turEl.value; const aciklama = aciklamaEl.value.trim(); const tutar = tutarEl.value; const tarih = tarihEl.value; const yetkili = yetkiliEl.value.trim(); if(!tur || !aciklama || !tutar || !tarih || !yetkili){ alert('Lütfen tüm alanları doldurun.'); return; } if(Number(tutar) <= 0){ alert('Tutar sıfırdan büyük olmalıdır.'); return; } if(editingId){ // güncelle const idx = fisler.findIndex(f => f.id === editingId); if(idx !== -1){ fisler[idx] = { ...fisler[idx], tur, aciklama, tutar: Number(tutar), tarih, yetkili }; saveToStorage(); editingId = null; kaydetBtn.textContent = 'Kaydet'; render(); temizleForm(); return; } else { editingId = null; kaydetBtn.textContent = 'Kaydet'; } } const yeni = { id: uid(), tur, aciklama, tutar: Number(tutar), tarih, yetkili }; fisler.push(yeni); saveToStorage(); render(); temizleForm(); }); function startEdit(id){ const it = fisler.find(f => f.id === id); if(!it) return; editingId = id; turEl.value = it.tur; aciklamaEl.value = it.aciklama; tutarEl.value = it.tutar; tarihEl.value = isoDateString(it.tarih); yetkiliEl.value = it.yetkili; kaydetBtn.textContent = 'Güncelle'; window.scrollTo({top:0,behavior:'smooth'}); } temizleFormBtn.addEventListener('click', () => { temizleForm(); editingId = null; kaydetBtn.textContent = 'Kaydet'; }); function temizleForm(){ turEl.value = ''; aciklamaEl.value = ''; tutarEl.value = ''; tarihEl.value = todayISO(); yetkiliEl.value = ''; } function todayISO(){ const d = new Date(); return d.toISOString().slice(0,10); } // search searchEl.addEventListener('input', () => render()); // sort headers headers.forEach(h => { h.addEventListener('click', () => { const key = h.dataset.sort; if(sortState.key === key){ sortState.dir = sortState.dir === 'asc' ? 'desc' : 'asc'; }else{ sortState.key = key; sortState.dir = key === 'tutar' ? 'desc' : 'asc'; } render(); }); }); // export CSV / JSON exportJsonBtn.addEventListener('click', () => { const data = JSON.stringify(fisler, null, 2); downloadBlob(data, 'application/json', `fisler_${todayFileSafe()}.json`); }); exportCsvBtn.addEventListener('click', () => { if(!fisler.length){ alert('İndirilecek kayıt yok.'); return; } const cols = ['id','tur','aciklama','tutar','tarih','yetkili']; const lines = [cols.join(',')]; for(const r of fisler){ const row = cols.map(c => csvSafe(String(r[c] ?? ''))); lines.push(row.join(',')); } const csv = lines.join('\r\n'); downloadBlob(csv, 'text/csv;charset=utf-8;', `fisler_${todayFileSafe()}.csv`); }); function csvSafe(s){ if(/[,"\r\n]/.test(s)) return '"' + s.replace(/"/g,'""') + '"'; return s; } function downloadBlob(data, type, filename){ const blob = new Blob([data], {type}); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = filename; document.body.appendChild(a); a.click(); a.remove(); URL.revokeObjectURL(url); } function todayFileSafe(){ const d = new Date(); return d.toISOString().slice(0,10); } // import importFileEl.addEventListener('change', async (e) => { const f = e.target.files[0]; if(!f) return; const name = f.name.toLowerCase(); try{ const text = await f.text(); if(name.endsWith('.json') || f.type.includes('json')){ const parsed = JSON.parse(text); if(Array.isArray(parsed)){ mergeImported(parsed); }else{ alert('Beklenen JSON dizi biçimi (array) değil.'); } } else if(name.endsWith('.csv') || f.type.includes('csv')){ const parsed = parseCSV(text); mergeImported(parsed); } else { alert('Desteklenmeyen dosya türü. .json veya .csv bekleniyor.'); } }catch(err){ alert('Dosya okunırken hata: ' + err.message); } finally { importFileEl.value = ''; } }); function mergeImported(arr){ let added = 0, updated = 0; for(const raw of arr){ // normalize keys (küçük harfli) const r = {}; for(const k in raw) r[k.toLowerCase()] = raw[k]; const rec = { id: r.id ? String(r.id) : uid(), tur: (r.tur || '').toString().toLowerCase() === 'gider' ? 'gider' : 'gelir', aciklama: r.aciklama ?? (r.description ?? '') , tutar: Number(r.tutar ?? r.amount ?? 0), tarih: r.tarih ?? r.date ?? todayISO(), yetkili: r.yetkili ?? r.author ?? '' }; const existIdx = fisler.findIndex(x => x.id === rec.id); if(existIdx === -1){ fisler.push(rec); added++; } else { fisler[existIdx] = {...fisler[existIdx], ...rec}; updated++; } } saveToStorage(); render(); alert(`İçe aktarma tamamlandı. Eklendi: ${added}, Güncellendi: ${updated}`); } // very basic CSV parser that handles quoted fields function parseCSV(text){ const lines = text.replace(/\r\n/g,'\n').split('\n').filter(l => l.trim().length); if(lines.length === 0) return []; const headers = splitCsvLine(lines[0]).map(h => h.toLowerCase()); const out = []; for(let i=1;i { if(!confirm('Tüm kayıtlar silinecek. Devam edilsin mi?')) return; fisler = []; saveToStorage(); render(); }); // helpers function escapeHtml(s){ return (s || '').replace(/&/g,'&').replace(//g,'>'); } // init function init(){ fisler = loadFromStorage(); tarihEl.value = todayISO(); render(); } init(); })(); </script>

Navigation Menu

Mutlu56

Block or report Mutlu56

Popular repositories Loading

Uh oh!