nobetci-operasyon/index.html

<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Nöbetçi Operasyon Merkezi</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>

<header class="ust-bar">
  <div class="marka">
    <span class="logo" aria-hidden="true">◈</span>
    <div>
      <h1>Nöbetçi Operasyon Merkezi</h1>
      <p class="alt-yazi">Olay · Görev · Sorumluluk takibi</p>
    </div>
  </div>
  <div class="ust-eylemler">
    <button type="button" id="btnYenile" class="btn btn-sade">Veriyi Yeniden Yükle</button>
    <button type="button" id="btnSifirla" class="btn btn-tehlike-sade">Demo Veriyi Sıfırla</button>
  </div>
</header>

<main class="kapsayici">

  <!-- 3) Operasyon paneli: state'ten hesaplanan sayaclar -->
  <section class="panel" aria-labelledby="panel-baslik">
    <h2 id="panel-baslik" class="bolum-baslik">Operasyon Paneli</h2>
    <div class="sayac-izgara" id="sayaclar" role="status" aria-live="polite">
      <div class="sayac" data-sayac="toplamOlay"><span class="sayac-deger" id="s-toplamOlay">0</span><span class="sayac-etiket">Toplam Olay</span></div>
      <div class="sayac sayac-acik" data-sayac="acikOlay"><span class="sayac-deger" id="s-acikOlay">0</span><span class="sayac-etiket">Açık Olay</span></div>
      <div class="sayac sayac-kritik" data-sayac="kritikOlay"><span class="sayac-deger" id="s-kritikOlay">0</span><span class="sayac-etiket">Kritik Olay</span></div>
      <div class="sayac sayac-mudahale" data-sayac="mudahale"><span class="sayac-deger" id="s-mudahale">0</span><span class="sayac-etiket">Müdahale Edilen</span></div>
      <div class="sayac sayac-cozulen" data-sayac="cozulen"><span class="sayac-deger" id="s-cozulen">0</span><span class="sayac-etiket">Çözülen</span></div>
      <div class="sayac sayac-geciken" data-sayac="gecikenGorev"><span class="sayac-deger" id="s-gecikenGorev">0</span><span class="sayac-etiket">Geciken Görev</span></div>
      <div class="sayac" data-sayac="acikGorev"><span class="sayac-deger" id="s-acikGorev">0</span><span class="sayac-etiket">Açık Görev</span></div>
      <div class="sayac" data-sayac="tamamlananGorev"><span class="sayac-deger" id="s-tamamlananGorev">0</span><span class="sayac-etiket">Tamamlanan Görev</span></div>
    </div>
  </section>

  <div class="iki-kolon">
    <!-- Olay formu -->
    <section class="panel" aria-labelledby="olay-form-baslik">
      <h2 id="olay-form-baslik" class="bolum-baslik">Yeni Olay</h2>
      <form id="olayForm" novalidate>
        <div class="alan">
          <label for="olayBaslik">Başlık <span class="zorunlu" aria-hidden="true">*</span></label>
          <input type="text" id="olayBaslik" name="baslik" maxlength="200" autocomplete="off" required>
          <p class="hata" id="hata-olayBaslik" role="alert"></p>
        </div>
        <div class="alan">
          <label for="olayAciklama">Açıklama</label>
          <textarea id="olayAciklama" name="aciklama" rows="3" maxlength="2000"></textarea>
        </div>
        <div class="alan-ikili">
          <div class="alan">
            <label for="olaySeviye">Önem Seviyesi <span class="zorunlu" aria-hidden="true">*</span></label>
            <select id="olaySeviye" name="seviye" required>
              <option value="dusuk">Düşük</option>
              <option value="orta" selected>Orta</option>
              <option value="yuksek">Yüksek</option>
              <option value="kritik">Kritik</option>
            </select>
          </div>
          <div class="alan">
            <label for="olayServis">Servis</label>
            <input type="text" id="olayServis" name="servis" maxlength="80" list="servisListesi" autocomplete="off" placeholder="Örn. API, Veritabanı">
            <datalist id="servisListesi"></datalist>
          </div>
        </div>
        <div class="alan">
          <label for="olaySorumlu">Sorumlu</label>
          <input type="text" id="olaySorumlu" name="sorumlu" maxlength="80" autocomplete="off" placeholder="Örn. Ayşe K.">
        </div>
        <p class="hata" id="hata-olayGenel" role="alert"></p>
        <div class="form-eylem">
          <button type="submit" class="btn btn-birincil" id="btnOlayKaydet">Olay Oluştur</button>
          <button type="button" class="btn btn-sade gizli" id="btnOlayDuzenleIptal">Düzenlemeyi İptal Et</button>
        </div>
      </form>
    </section>

    <!-- 4/6) Filtre ve arama -->
    <section class="panel" aria-labelledby="filtre-baslik">
      <h2 id="filtre-baslik" class="bolum-baslik">Filtre ve Arama</h2>
      <div class="alan">
        <label for="filtreMetin">Metin Arama</label>
        <input type="search" id="filtreMetin" placeholder="Başlık, açıklama, servis, sorumlu…" autocomplete="off">
      </div>
      <div class="alan-ikili">
        <div class="alan">
          <label for="filtreDurum">Durum</label>
          <select id="filtreDurum">
            <option value="hepsi">Hepsi</option>
            <option value="acik">Açık</option>
            <option value="inceleniyor">İnceleniyor</option>
            <option value="mudahale">Müdahale Ediliyor</option>
            <option value="cozuldu">Çözüldü</option>
          </select>
        </div>
        <div class="alan">
          <label for="filtreSeviye">Önem</label>
          <select id="filtreSeviye">
            <option value="hepsi">Hepsi</option>
            <option value="kritik">Kritik</option>
            <option value="yuksek">Yüksek</option>
            <option value="orta">Orta</option>
            <option value="dusuk">Düşük</option>
          </select>
        </div>
      </div>
      <div class="alan-ikili">
        <div class="alan">
          <label for="filtreServis">Servis</label>
          <select id="filtreServis"><option value="hepsi">Hepsi</option></select>
        </div>
        <div class="alan">
          <label for="filtreSorumlu">Sorumlu</label>
          <select id="filtreSorumlu"><option value="hepsi">Hepsi</option></select>
        </div>
      </div>
      <div class="alan">
        <label for="filtreSirala">Sıralama</label>
        <select id="filtreSirala">
          <option value="yeni">En Yeni → En Eski</option>
          <option value="eski">En Eski → En Yeni</option>
          <option value="onem">Önem (Kritik → Düşük)</option>
          <option value="baslik">Başlık (A-Z)</option>
        </select>
      </div>
      <p class="sonuc-sayisi" id="sonucSayisi" role="status" aria-live="polite">0 olay gösteriliyor</p>
    </section>
  </div>

  <!-- Olay listesi -->
  <section class="panel" aria-labelledby="liste-baslik">
    <h2 id="liste-baslik" class="bolum-baslik">Olaylar</h2>
    <ul class="olay-liste" id="olayListesi"></ul>
    <p class="bos-durum gizli" id="bosDurum">Bu kriterlere uyan olay yok.</p>
  </section>
</main>

<!-- Olay detay -->
<div class="modal-arka gizli" id="detayArka" role="dialog" aria-modal="true" aria-labelledby="detayBaslik">
  <div class="modal modal-genis">
    <div class="modal-ust">
      <h2 id="detayBaslik">Olay Detayı</h2>
      <button type="button" class="btn-kapat" id="btnDetayKapat" aria-label="Detayı kapat">✕</button>
    </div>
    <div class="modal-govde" id="detayGovde"></div>

    <h3 class="alt-baslik">Görevler</h3>
    <ul class="gorev-liste" id="detayGorevler"></ul>
    <p class="bos-durum gizli" id="detayGorevBos">Bu olaya bağlı görev yok.</p>

    <form id="gorevForm" novalidate class="gorev-form">
      <h4 class="mini-baslik">Yeni Görev</h4>
      <div class="alan-ikili">
        <div class="alan">
          <label for="gorevBaslik">Görev Başlığı <span class="zorunlu" aria-hidden="true">*</span></label>
          <input type="text" id="gorevBaslik" maxlength="200" autocomplete="off" required>
        </div>
        <div class="alan">
          <label for="gorevSorumlu">Sorumlu</label>
          <input type="text" id="gorevSorumlu" maxlength="80" autocomplete="off">
        </div>
      </div>
      <div class="alan">
        <label for="gorevSonTarih">Son Tarih</label>
        <input type="date" id="gorevSonTarih">
      </div>
      <p class="hata" id="hata-gorevGenel" role="alert"></p>
      <div class="form-eylem">
        <button type="submit" class="btn btn-birincil">Görev Ekle</button>
      </div>
    </form>
  </div>
</div>

<!-- Uygulama ici onay modali (native confirm yerine) -->
<div class="modal-arka gizli" id="onayArka" role="dialog" aria-modal="true" aria-labelledby="onayBaslik">
  <div class="modal modal-dar">
    <h2 id="onayBaslik">Emin misiniz?</h2>
    <p id="onayMetin" class="onay-metin"></p>
    <div class="form-eylem form-eylem-sag">
      <button type="button" class="btn btn-sade" id="btnOnayHayir">Vazgeç</button>
      <button type="button" class="btn btn-tehlike" id="btnOnayEvet">Sil</button>
    </div>
  </div>
</div>

<!-- Bildirim (toast) -->
<div class="toast-alan" id="toastAlan" role="status" aria-live="polite"></div>

<script src="store.js"></script>
<script src="app.js"></script>
</body>
</html>