Incident Management, kullanıcıların yaşadığı sistem sorunları veya hizmet kesintilerinin kayıt altına alınması, önceliklendirilmesi ve en kısa sürede çözüme ulaştırılması sürecidir.
İhtiyaç ve deneyimlere göre menüler geliştirilerek zaman içinde, nihai form tasarımına ulaşılmıştır. Girdiğiniz verileri yedekleyebilir, dışarı ve içeri aktarım yapabilirsiniz.
Bir Not defteri açarak, aşağıdaki (Mavi satırlar) html kodu içine kaydedin. Not defteri uzantısını .txt yerine ".html" olarak değiştirip kaydedin. Ör: "Incident Management Formu.html" sayfayı kapatıp tekrar açtığınızda, web browser üzerinden sayfanız açılacaktır.
Sol tarafta görünen logo için, html dosyanız nerede ise, masaüstü veya oluşturulan bir klasör. Logonuzda aynı yerde olursa forma yansır. Logo ismi "logo.jpg" olmalı. Çift tıklayarak açtığınızda, browser üzerinde form açılışı gerçekleşir.
Başlık, başlığın altındaki, başlığın sağındaki ve alttaki yazıları, not defteri içinde "Ctrl + F" tuşları ile kelime yazarak bulabilir, ilgili metinleri kendinize göre uyarlayarak kaydederek kullanabilirsiniz. Başlık alanındaki "OLGUN BAŞKANLIĞI" alanına 5 kez peş peşe tıklayarak; Departman, Müdürlük veya Başkanlığınıza ait bilgiyi manuel girebilirsiniz.
Formun boş hali;
Örnek bilgilerle, formun dolu hali;
PDF olarak kaydetme ve Yazdırma görünümü:
HTML Kod:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Incident Management Form</title>
<style>
:root{
--bg:#f8fafc; --card:#ffffff; --blue:#0284c7; --blue-soft:#e0f2fe;
--green-soft:#dcfce7; --gray-soft:#f1f5f9; --line:#d7dee8;
--text:#0f172a; --muted:#94a3b8; --danger:#dc2626;
}
*{box-sizing:border-box;font-family:"Segoe UI",Arial,sans-serif}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--text)}
body{padding:12px}
.container{width:100%;max-width:none;margin:0 auto}
.header{
width:100%;display:grid;grid-template-columns:72px minmax(0,1fr) 220px;
align-items:center;gap:14px;background:#fff;border:1px solid var(--line);
border-left:5px solid var(--blue);border-radius:6px;padding:10px 14px;
box-shadow:0 2px 8px rgba(15,23,42,.06);margin-bottom:10px
}
.logoBox{width:60px;height:60px;display:flex;align-items:center;justify-content:center;overflow:hidden}
.logoBox img{width:100%;height:100%;object-fit:contain}
.headerTitle{font-size:21px;font-weight:750;line-height:1.15;color:#0f172a}
.headerSub{margin-top:4px;font-size:11.5px;color:#64748b}
.headerRight{text-align:right;color:#0f172a;font-size:20px;font-weight:700;white-space:nowrap}
.editableHeader[contenteditable="true"]{outline:1px dashed #38bdf8;background:#f0f9ff;border-radius:3px;padding:2px 4px}
.card{background:#fff;border:1px solid var(--line);border-radius:6px;padding:12px;box-shadow:0 2px 8px rgba(15,23,42,.05)}
.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 12px}
.full{grid-column:1/-1}.half{grid-column:span 2}
.group{display:flex;flex-direction:column;min-width:0}
label{margin-bottom:4px;font-size:13.33px;font-weight:700;color:#334155}
input,select,textarea{
width:100%;border:1px solid #cbd5e1;border-radius:6px;padding:7px 9px;
background:#fff;font-size:13.33px;color:#0f172a;outline:none
}
input:focus,select:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(2,132,199,.10)}
textarea{resize:none;overflow:hidden;min-height:58px;line-height:1.35;white-space:pre-wrap}
.compactArea{min-height:52px}
.spacedGroup{margin-top:12px}
.sectionTitle,.olgunSectionTitle{
grid-column:1/-1;margin-top:12px;padding:6px 8px;background:#f8fafc;
border-left:3px solid var(--blue);font-size:13.33px;font-weight:800;color:#334155
}
.timeGrid{display:grid;grid-template-columns:1fr 1.5fr 1fr;gap:10px}
.rangeBox{display:grid;grid-template-columns:1fr auto 1fr;gap:6px;align-items:center}
.rangeBox span{color:#64748b;font-size:11px}
.personnelWrap{grid-column:1/-1;margin-top:12px}
.personnelHeader{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px}
.personnelActions{display:flex;gap:5px}
.iconBtn{
width:28px;height:28px;border:1px solid #cbd5e1;border-radius:6px;background:#f8fafc;
color:#334155;font-size:18px;line-height:1;cursor:pointer
}
.iconBtn.add{background:#ecfdf5;color:#15803d;border-color:#bbf7d0}
.iconBtn.del{background:#fef2f2;color:#b91c1c;border-color:#fecaca}
.personnel{
display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
gap:8px 18px;width:100%;padding:2px 0
}
.personChip{flex:1 1 220px;max-width:360px;min-width:180px;position:relative}
.personChip input{text-align:center;color:#0f172a}
.personChip input::placeholder{color:#b0bac7;opacity:1}
.buttons{display:flex;flex-wrap:wrap;gap:8px;margin-top:11px}
.btn{
border:1px solid #cbd5e1;border-radius:6px;padding:8px 13px;
font-size:12px;font-weight:700;color:#334155;cursor:pointer
}
.previewBtn{background:var(--blue-soft);border-color:#bae6fd;color:#075985}
.printBtn{background:var(--green-soft);border-color:#bbf7d0;color:#166534}
.excelBtn{background:var(--gray-soft);border-color:#d8dee8;color:#334155}
.fileInput{display:none}
.preview{display:none!important;margin-top:0}
.preview.active{display:none!important}
.previewTable{width:100%;border-collapse:collapse;table-layout:fixed}
.previewTable td{border:1px solid #dbe3ee;padding:5px 7px;font-size:10.5px;line-height:1.25;vertical-align:top;white-space:pre-wrap;word-break:break-word}
.previewTable td:first-child{white-space:nowrap;font-size:9.2px;letter-spacing:-.15px}
.previewTable td:first-child{width:34%;font-weight:700;background:#f8fafc}
.previewTitle{background:#e0f2fe!important;color:#075985;font-weight:800!important}
.printPersonnel{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px;width:100%;margin-top:6px}
.printPerson{flex:1 1 180px;max-width:320px;text-align:center;border:1px solid #cbd5e1;border-radius:5px;padding:5px 7px;color:#0f172a;background:#fff}
.note{font-size:10px;color:#64748b;margin-top:5px}
@media(max-width:800px){
.reportDeployGrid{grid-template-columns:1fr}
body{padding:7px}.header{grid-template-columns:56px 1fr}.headerRight{display:none}
.logoBox{width:50px;height:50px}.headerTitle{font-size:17px}
.grid,.timeGrid{grid-template-columns:1fr}.half{grid-column:1/-1}.rangeBox{grid-template-columns:1fr}
.rangeBox span{text-align:center}.personChip{flex-basis:100%;max-width:none}
}
@page{size:A4 landscape;margin:6mm}
@media print{
.reportDeployGrid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
grid-column:1/-1!important;
overflow:visible!important;
break-inside:avoid!important;
page-break-inside:avoid!important;
}
.reportDeployGrid input{
min-height:34px!important;
height:auto!important;
overflow:visible!important;
}
.olgunSectionTitle{
display:block!important;
width:100%!important;
margin:0!important;
padding:4px 6px!important;
background:#f8fafc!important;
border-left:3px solid #0284c7!important;
color:#334155!important;
font-size:13.5px!important;
font-weight:800!important;
line-height:1.15!important;
break-after:avoid!important;
page-break-after:avoid!important;
}
.group > .olgunSectionTitle + textarea,
.group > .olgunSectionTitle + .printTextMirror{
margin-top:0!important;
}
.sectionTitle + .sectionBody{
margin-top:-14px!important;
}
.sectionBody{
margin-top:0!important;
}
.personnelHeader .olgunSectionTitle{
margin:0!important;
}
/* Çok sayfalı A4 yatay baskı. Çift taraflı baskı seçeneği yazıcı iletişim
kutusundan "iki taraflı / uzun kenardan çevir" olarak seçilebilir. */
@page{
size:A4 landscape;
margin:7mm;
}
html,body{
width:100%;
height:auto;
margin:0!important;
padding:0!important;
background:#fff!important;
overflow:visible!important;
}
body{font-size:10px!important}
.container{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
}
/* PDF/Yazdır: ekrandaki dashboard formunun kendisi yazdırılır. */
.formArea{
display:block!important;
width:100%!important;
margin:0!important;
padding:0!important;
}
.preview{display:none!important}
.buttons{display:none!important}
.header{
display:grid!important;
grid-template-columns:52px minmax(0,1fr) 190px!important;
align-items:center!important;
gap:9px!important;
width:100%!important;
margin:0 0 5px 0!important;
padding:6px 10px!important;
background:#fff!important;
border:1px solid #d7dee8!important;
border-left:4px solid #0284c7!important;
border-radius:5px!important;
box-shadow:none!important;
break-inside:avoid!important;
}
.logoBox{width:46px!important;height:46px!important}
.logoBox img{width:100%!important;height:100%!important;object-fit:contain!important}
.headerTitle{font-size:16px!important;font-weight:750!important;line-height:1.05!important}
.headerSub{font-size:10.5px!important;margin-top:2px!important}
.headerRight{
display:block!important;
color:#0f172a!important;
font-size:15px!important;
font-weight:700!important;
text-align:right!important;
white-space:nowrap!important;
}
.card{
width:100%!important;
margin:0!important;
padding:7px!important;
border:1px solid #d7dee8!important;
border-radius:5px!important;
box-shadow:none!important;
background:#fff!important;
}
.grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:14px 8px!important;
}
.full{grid-column:1/-1!important}
.half{grid-column:span 2!important}
.group{min-width:0!important}
.spacedGroup{margin-top:12px!important;margin-bottom:7px!important}
label{
margin-bottom:6px!important;
font-size:13px!important;
line-height:1.28!important;
font-weight:700!important;
color:#334155!important;
}
input,select,textarea{
width:100%!important;
border:1px solid #cbd5e1!important;
border-radius:4px!important;
padding:3px 5px!important;
background:#fff!important;
color:#0f172a!important;
font-size:13px!important;
line-height:1.42!important;
box-shadow:none!important;
}
input,select{min-height:34px!important;height:auto!important}
textarea{
min-height:40px!important;
height:auto!important;
overflow:visible!important;
resize:none!important;
white-space:pre-wrap!important;
word-break:break-word!important;
line-height:1.38!important;
padding-top:6px!important;
padding-bottom:6px!important;
}
.compactArea{min-height:40px!important}
.printTextMirror{
display:block!important;
width:100%!important;
min-height:40px!important;
border:1px solid #cbd5e1!important;
border-radius:4px!important;
padding:6px 5px!important;
background:#fff!important;
color:#0f172a!important;
font-size:13px!important;
line-height:1.42!important;
white-space:pre-wrap!important;
overflow:visible!important;
word-break:break-word!important;
overflow-wrap:anywhere!important;
}
textarea.printMirrored{display:none!important}
.sectionTitle,.olgunSectionTitle{
grid-column:1/-1!important;
margin-top:12px!important;
margin-bottom:0!important;
padding:4px 6px!important;
background:#f8fafc!important;
border-left:3px solid #0284c7!important;
font-size:13.5px!important;
line-height:1.05!important;
font-weight:800!important;
}
.sectionTitle + .group{
margin-top:0!important;
}
.timeGrid{
display:grid!important;
grid-template-columns:1fr 1.65fr 1fr!important;
gap:7px!important;
}
.rangeBox{
display:grid!important;
grid-template-columns:1fr auto 1fr!important;
gap:4px!important;
align-items:center!important;
}
.rangeBox span{font-size:9px!important}
.personnelWrap{
grid-column:1/-1!important;
margin-top:9px!important;
break-inside:avoid!important;
}
.personnelHeader{margin-bottom:3px!important}
.personnelActions{display:none!important}
.personnel{
display:flex!important;
flex-wrap:wrap!important;
justify-content:center!important;
align-items:center!important;
gap:5px 12px!important;
width:100%!important;
}
.personChip{
flex:1 1 180px!important;
max-width:300px!important;
min-width:150px!important;
}
.personChip input{
text-align:center!important;
min-height:34px!important;height:auto!important;
font-size:12px!important;
}
/* Bir A4 yatay sayfaya sığdırma */
.formArea{
transform-origin:top left!important;
zoom:1;
}
.card,.grid,.full,.half,.timeGrid,.personnelWrap{
overflow:visible!important;
}
.group{
overflow:visible!important;
break-inside:avoid!important;
page-break-inside:avoid!important;
}
.sectionTitle,.olgunSectionTitle{
break-after:avoid!important;
page-break-after:avoid!important;
}
*{
-webkit-print-color-adjust:exact!important;
print-color-adjust:exact!important;
}
}
.printTextMirror{display:none}
.olgunSectionTitle{
display:block;
width:100%;
margin:0 0 0 0;
padding:6px 8px;
background:#f8fafc;
border-left:3px solid var(--blue);
color:#334155;
font-size:13.33px;
font-weight:800;
line-height:1.2;
border-radius:0;
}
.group > .olgunSectionTitle + textarea{margin-top:0}
.sectionTitle + .sectionBody{margin-top:0}
.sectionBody{margin-top:0!important}
.personnelHeader .olgunSectionTitle{margin:0!important}
.sectionTitle + .sectionBody{margin-top:-12px!important}
.reportDeployGrid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:10px 12px;
}
.personChip{display:flex;flex-direction:column;gap:0;border:1px solid #cbd5e1;border-radius:6px;overflow:hidden;background:#fff}
.personChip input{border:0;border-radius:0;background:#fff;color:#0f172a;text-align:center}
.personChip input + input{border-top:1px solid #e2e8f0}
.personChip input::placeholder{color:#b0bac7;opacity:1}
@media print{
.personChip{display:flex!important;flex-direction:column!important;gap:0!important;border:1px solid #cbd5e1!important;border-radius:5px!important;overflow:hidden!important;background:#fff!important}
.personChip input{border:0!important;border-radius:0!important;text-align:center!important;color:#0f172a!important;background:#fff!important}
.personChip input + input{border-top:1px solid #e2e8f0!important}
.printPerson{display:flex!important;flex-direction:column!important;gap:0!important;overflow:hidden!important}
.printPersonName,.printPersonRole{display:block!important;width:100%!important;text-align:center!important;padding:4px 6px!important}
.printPersonRole{border-top:1px solid #e2e8f0!important}
}
.header{grid-template-columns:72px minmax(0,1fr) minmax(180px,42%)!important}
.header>div:nth-child(2){min-width:0}
.headerRight{justify-self:end;width:max-content;max-width:100%;min-width:0;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.headerRight[contenteditable="true"]{overflow:visible;text-overflow:clip;max-width:min(55vw,760px);min-width:180px;width:max-content;margin-left:auto;white-space:nowrap}
@media print{
.header{grid-template-columns:52px minmax(0,1fr) minmax(180px,38%)!important;overflow:hidden!important}
.header>div:nth-child(2){min-width:0!important}
.headerRight{display:block!important;justify-self:end!important;width:max-content!important;max-width:100%!important;margin-left:auto!important;text-align:right!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;color:#0f172a!important;font-weight:700!important}
}
</style>
</head>
<body>
<div class="container">
<div class="formArea">
<div class="header">
<div class="logoBox"><img src="logo.jpg" alt="Logo"></div>
<div>
<div class="headerTitle editableHeader" data-key="title">Incident Management Form</div>
<div class="headerSub editableHeader" data-key="subtitle">(Olay/Arıza Yönetimi)</div>
</div>
<div class="headerRight editableHeader" data-key="right">OLGUN BAŞKANLIĞI</div>
</div>
<div class="card">
<div class="grid">
<div class="group"><label>Incident No</label><input id="incidentNo" type="text"></div>
<div class="group"><label>Öncelik</label><select id="oncelik"><option>Düşük</option><option selected>Orta</option><option>Yüksek</option><option>Kritik</option></select></div>
<div class="group"><label>Etki Seviyesi</label><select id="etki"><option>Düşük</option><option selected>Orta</option><option>Yüksek</option><option>Kurumsal Kritik</option></select></div>
<div class="group"><label>Tarih</label><input id="tarih" type="date"></div>
<div class="group half"><label class="olgunSectionTitle">Konu</label><input id="konu" type="text"></div>
<div class="group half"><label class="olgunSectionTitle">Problem</label><input id="problem" type="text"></div>
<div class="group full spacedGroup"><label class="olgunSectionTitle">Özet</label><textarea id="ozet" class="compactArea numbered" placeholder=""></textarea></div>
<div class="group half"><label>Bildiren Kişi</label><input id="bildiren" type="text"></div>
<div class="group half"><label>Departman</label><input id="departman" type="text"></div>
<div class="sectionTitle">Etki ve Kapsam</div>
<div class="group full sectionBody"><textarea id="etkiKapsam" class="compactArea numbered bulleted" placeholder="">• </textarea></div>
<div class="full timeGrid">
<div class="group"><label>Kesilme Tarihi</label><input id="kesilmeTarihi" type="date"></div>
<div class="group">
<label>Servis Kaybı Zaman Aralığı</label>
<div class="rangeBox">
<input id="baslangic" type="datetime-local" step="60">
<span>—</span>
<input id="bitis" type="datetime-local" step="60">
</div>
</div>
<div class="group"><label>Servis Kaybı Süresi</label><input id="servisSuresi" type="text" placeholder="Otomatik / manuel"></div>
</div>
<div class="full reportDeployGrid">
<div class="group">
<label>Bildirilme Tarihi / Saati</label>
<input id="bildirilmeTarihiSaati" type="datetime-local" step="60">
</div>
<div class="group">
<label>Devreye Alma Tarihi / Saati</label>
<input id="devreyeAlmaTarihiSaati" type="datetime-local" step="60">
</div>
<div class="group">
<label>İşlem Süresi</label>
<input id="islemSuresi" type="text" placeholder="Otomatik / manuel">
</div>
</div>
<div class="group full spacedGroup"><label class="olgunSectionTitle">Kök Neden Analizi "RCA"</label><textarea id="rca" class="bulleted" placeholder="Kök neden analizini giriniz...">• </textarea></div>
<div class="group full spacedGroup"><label class="olgunSectionTitle">Gelecek için Önlemler ve İyileştirmeler</label><textarea id="onlemler" class="numbered bulleted" placeholder="">• </textarea></div>
<div class="group full spacedGroup"><label class="olgunSectionTitle">Öğrenilmiş Dersler</label><textarea id="dersler" class="numbered bulleted" placeholder="">• </textarea></div>
<div class="personnelWrap">
<div class="personnelHeader">
<label class="olgunSectionTitle" style="margin:0;flex:1">Müdahale eden / Atanan Personel</label>
<div class="personnelActions">
<button type="button" class="iconBtn add" onclick="personelEkle()" title="Personel ekle">+</button>
<button type="button" class="iconBtn del" onclick="personelSil()" title="Son personeli çıkar">−</button>
</div>
</div>
<div class="personnel" id="personel"></div>
</div>
</div>
<div class="buttons">
<button type="button" class="btn printBtn" onclick="pdfYazdir()">PDF/Yazdır</button>
<button type="button" class="btn excelBtn" onclick="excelDisariAktar()">Excel Dışarı Aktar</button>
<button type="button" class="btn excelBtn" onclick="document.getElementById('excelFile').click()">Excel İçeri Aktar</button>
<input class="fileInput" id="excelFile" type="file" accept=".xlsx" onchange="excelIceriAktar(event)">
</div>
</div>
</div>
<div class="preview" id="preview">
<div class="header">
<div class="logoBox"><img src="logo.jpg" alt="Logo"></div>
<div>
<div class="headerTitle editableHeader" data-key="title">Incident Management Form</div>
<div class="headerSub editableHeader" data-key="subtitle">(Olay/Arıza Yönetimi)</div>
</div>
<div class="headerRight editableHeader" data-key="right">OLGUN BAŞKANLIĞI</div>
</div>
<div class="card">
<table class="previewTable" id="previewTable"></table>
</div>
</div>
</div>
<script>
const $ = id => document.getElementById(id);
const alanlar = [
["incidentNo","Incident No"],["tarih","Tarih"],["konu","Konu"],["problem","Problem"],
["ozet","Özet"],["bildiren","Bildiren Kişi"],["departman","Departman"],
["oncelik","Öncelik"],["etki","Etki Seviyesi"],["etkiKapsam","Etki ve Kapsam"],
["kesilmeTarihi","Kesilme Tarihi"],["baslangic","Servis Kaybı Başlangıç"],
["bitis","Servis Kaybı Bitiş"],["servisSuresi","Servis Kaybı Süresi"],["bildirilmeTarihiSaati","Bildirilme Tarihi / Saati"],["devreyeAlmaTarihiSaati","Devreye Alma Tarihi / Saati"],["islemSuresi","İşlem Süresi"],
["rca",'Kök Neden Analizi "RCA"'],
["onlemler","Gelecek için Önlemler ve İyileştirmeler"],["dersler","Öğrenilmiş Dersler"]
];
function autoGrow(el){el.style.height="auto";el.style.height=el.scrollHeight+"px"}
document.querySelectorAll("textarea").forEach(t=>{t.addEventListener("input",()=>autoGrow(t));autoGrow(t)});
document.querySelectorAll("textarea.bulleted").forEach(el=>{
if(!el.value.trim()) el.value="• ";
el.addEventListener("focus",function(){
if(!this.value.trim()) this.value="• ";
autoGrow(this);
});
el.addEventListener("keydown",function(e){
if(e.key!=="Enter") return;
e.preventDefault();
const start=this.selectionStart;
const end=this.selectionEnd;
const before=this.value.substring(0,start);
const after=this.value.substring(end);
const insert="\n• ";
this.value=before+insert+after;
const newPos=start+insert.length;
this.setSelectionRange(newPos,newPos);
autoGrow(this);
});
el.addEventListener("input",function(){
if(this.value==="") this.value="• ";
autoGrow(this);
});
});
function bugun(){const d=new Date();return [d.getFullYear(),String(d.getMonth()+1).padStart(2,"0"),String(d.getDate()).padStart(2,"0")].join("-")}
$("tarih").value=bugun();
function syncKesilme(){
const d=$("kesilmeTarihi").value;
if(!d) return;
const oldTime=$("baslangic").value.includes("T") ? $("baslangic").value.split("T")[1] : "00:00";
$("baslangic").value=d+"T"+oldTime;
sureHesapla();
}
$("kesilmeTarihi").addEventListener("change",syncKesilme);
$("baslangic").addEventListener("change",sureHesapla);
$("bitis").addEventListener("change",sureHesapla);
function sureHesapla(){
const a=$("baslangic").value,b=$("bitis").value;
if(!a||!b)return;
const ms=new Date(b)-new Date(a);
if(ms<0)return;
const mins=Math.round(ms/60000), days=Math.floor(mins/1440), hrs=Math.floor((mins%1440)/60), min=mins%60;
$("servisSuresi").value=(days?days+" gün ":"")+(hrs?hrs+" saat ":"")+(min+" dakika");
}
function islemSuresiHesapla(){
const bildirim=$("bildirilmeTarihiSaati").value;
const devreye=$("devreyeAlmaTarihiSaati").value;
if(!bildirim || !devreye) return;
const fark=new Date(devreye)-new Date(bildirim);
if(fark<0) return;
const toplamDakika=Math.round(fark/60000);
const saat=Math.floor(toplamDakika/60);
const dakika=toplamDakika%60;
$("islemSuresi").value=
(saat ? saat+" saat " : "") +
dakika+" dakika";
}
$("bildirilmeTarihiSaati").addEventListener("change",islemSuresiHesapla);
$("devreyeAlmaTarihiSaati").addEventListener("change",islemSuresiHesapla);
function personelEkle(value="", gorev=""){
const wrap=$("personel");
const div=document.createElement("div");
div.className="personChip";
const nameInput=document.createElement("input");
nameInput.type="text"; nameInput.className="personelInput";
nameInput.placeholder="Adı ve Soyadı"; nameInput.value=value;
const roleInput=document.createElement("input");
roleInput.type="text"; roleInput.className="personelRoleInput";
roleInput.placeholder="Görevi veya Departmanı"; roleInput.value=gorev;
div.appendChild(nameInput); div.appendChild(roleInput); wrap.appendChild(div);
}
function personelSil(){
const rows=[...document.querySelectorAll(".personChip")];
if(rows.length>1){
rows[rows.length-1].remove();
}else if(rows.length===1){
rows[0].querySelector(".personelInput").value="";
rows[0].querySelector(".personelRoleInput").value="";
rows[0].querySelector(".personelInput").focus();
}
}
personelEkle();
function personelListesi(){
return [...document.querySelectorAll(".personChip")].map(chip=>({
ad:(chip.querySelector(".personelInput")?.value||"").trim(),
gorev:(chip.querySelector(".personelRoleInput")?.value||"").trim()
})).filter(x=>x.ad||x.gorev);
}
function esc(v){return String(v??"").replace(/[&<>"']/g,m=>({"&":"&","<":"<",">":">",'"':""","'":"'"}[m]))}
function fmtDateTime(v){return v ? v.replace("T"," ") : ""}
function render(){
const rows=[];
const add=(label,val,cls="")=>rows.push(`<tr><td class="${cls}">${esc(label)}</td><td>${esc(val||"-")}</td></tr>`);
add("Incident No",$("incidentNo").value); add("Tarih",$("tarih").value);
add("Konu",$("konu").value); add("Problem",$("problem").value); add("Özet",$("ozet").value);
add("Bildiren Kişi",$("bildiren").value); add("Departman",$("departman").value);
add("Öncelik",$("oncelik").value); add("Etki Seviyesi",$("etki").value);
add("Etki ve Kapsam",$("etkiKapsam").value,"previewTitle");
add("Kesilme Tarihi",$("kesilmeTarihi").value);
add("Servis Kaybı Zaman Aralığı",(fmtDateTime($("baslangic").value)||"-")+" — "+(fmtDateTime($("bitis").value)||"-"));
add("Servis Kaybı Süresi",$("servisSuresi").value);
add("Bildirilme Tarihi / Saati",fmtDateTime($("bildirilmeTarihiSaati").value));
add("Devreye Alma Tarihi / Saati",fmtDateTime($("devreyeAlmaTarihiSaati").value));
add("İşlem Süresi",$("islemSuresi").value);
add('Kök Neden Analizi "RCA"',$("rca").value);
add("Gelecek için Önlemler ve İyileştirmeler",$("onlemler").value);
add("Öğrenilmiş Dersler",$("dersler").value);
const plist=personelListesi();
const personnelHtml=(plist.length?plist:[{ad:"Adı ve Soyadı",gorev:"Görevi veya Departmanı"}])
.map(p=>`<span class="printPerson"><span class="printPersonName">${esc(p.ad||"Adı ve Soyadı")}</span><span class="printPersonRole">${esc(p.gorev||"Görevi veya Departmanı")}</span></span>`).join("");
rows.push(`<tr class="personnelPrintRow"><td style="padding-top:8px">Müdahale eden / Atanan Personel</td><td><div class="printPersonnel">${personnelHtml}</div></td></tr>`);
$("previewTable").innerHTML=rows.join("");
}
function onizle(){render();$("preview").classList.add("active");$("preview").scrollIntoView({behavior:"smooth"})}
function pdfYazdir(){
try{
const oldTitle=document.title;
document.title="Incident Management";
document.querySelectorAll(".printTextMirror").forEach(x=>x.remove());
document.querySelectorAll("textarea").forEach(t=>{
const mirror=document.createElement("div");
mirror.className="printTextMirror";
mirror.textContent=t.value || "";
t.classList.add("printMirrored");
t.insertAdjacentElement("afterend",mirror);
});
window.focus();
setTimeout(()=>{
window.print(); // Tarayıcı penceresinde "PDF olarak kaydet" veya yazıcı seçilebilir.
document.title=oldTitle;
},120);
setTimeout(()=>{
document.querySelectorAll(".printTextMirror").forEach(x=>x.remove());
document.querySelectorAll("textarea.printMirrored").forEach(t=>t.classList.remove("printMirrored"));
document.title=oldTitle;
},1800);
}catch(err){
alert("PDF/Yazdır işlemi başlatılamadı: "+err.message);
}
}
window.addEventListener("afterprint",()=>{
document.querySelectorAll(".printTextMirror").forEach(x=>x.remove());
document.querySelectorAll("textarea.printMirrored").forEach(t=>t.classList.remove("printMirrored"));
});
function crc32(bytes){
let c=0xffffffff;
for(let i=0;i<bytes.length;i++){
c^=bytes[i];
for(let k=0;k<8;k++) c=(c>>>1)^((c&1)?0xedb88320:0);
}
return (c^0xffffffff)>>>0;
}
function u16(n){return [n&255,(n>>>8)&255]}
function u32(n){return [n&255,(n>>>8)&255,(n>>>16)&255,(n>>>24)&255]}
function xmlEsc(v){return String(v??"").replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""")}
function zipStore(files){
const enc=new TextEncoder(), locals=[], centrals=[];
let offset=0;
Object.entries(files).forEach(([name,text])=>{
const nb=enc.encode(name), data=enc.encode(text), crc=crc32(data);
const local=new Uint8Array([
...u32(0x04034b50),...u16(20),...u16(0),...u16(0),...u16(0),...u16(0),
...u32(crc),...u32(data.length),...u32(data.length),...u16(nb.length),...u16(0),...nb,...data
]);
locals.push(local);
const central=new Uint8Array([
...u32(0x02014b50),...u16(20),...u16(20),...u16(0),...u16(0),...u16(0),...u16(0),
...u32(crc),...u32(data.length),...u32(data.length),...u16(nb.length),...u16(0),...u16(0),
...u16(0),...u16(0),...u32(0),...u32(offset),...nb
]);
centrals.push(central); offset+=local.length;
});
const centralSize=centrals.reduce((a,b)=>a+b.length,0);
const end=new Uint8Array([
...u32(0x06054b50),...u16(0),...u16(0),...u16(centrals.length),...u16(centrals.length),
...u32(centralSize),...u32(offset),...u16(0)
]);
return new Blob([...locals,...centrals,end],{type:"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"});
}
function excelDisariAktar(){
const data=[["Alan","Bilgi"]];
alanlar.forEach(([id,label])=>data.push([label,$(id).value]));
personelListesi().forEach((p,i)=>{
data.push(["Müdahale eden / Atanan Personel "+(i+1),p.ad]);
data.push(["Görevi veya Departmanı "+(i+1),p.gorev]);
});
const rows=data.map((r,ri)=>`<row r="${ri+1}">`+r.map((v,ci)=>{
const col=ci===0?"A":"B";
return `<c r="${col}${ri+1}" t="inlineStr"><is><t xml:space="preserve">${xmlEsc(v)}</t></is></c>`;
}).join("")+"</row>").join("");
const files={
"[Content_Types].xml":`<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Types xmlns="http://schemas.openxmlformats.org/package/2006/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Override PartName="/xl/workbook.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml"/><Override PartName="/xl/worksheets/sheet1.xml" ContentType="application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml"/></Types>`,
"_rels/.rels":`<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/officeDocument" Target="xl/workbook.xml"/></Relationships>`,
"xl/workbook.xml":`<?xml version="1.0" encoding="UTF-8" standalone="yes"?><workbook xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main" xmlns:r="http://schemas.openxmlformats.org/officeDocument/2006/relationships"><sheets><sheet name="Incident Management" sheetId="1" r:id="rId1"/></sheets></workbook>`,
"xl/_rels/workbook.xml.rels":`<?xml version="1.0" encoding="UTF-8" standalone="yes"?><Relationships xmlns="http://schemas.openxmlformats.org/package/2006/relationships"><Relationship Id="rId1" Type="http://schemas.openxmlformats.org/officeDocument/2006/relationships/worksheet" Target="worksheets/sheet1.xml"/></Relationships>`,
"xl/worksheets/sheet1.xml":`<?xml version="1.0" encoding="UTF-8" standalone="yes"?><worksheet xmlns="http://schemas.openxmlformats.org/spreadsheetml/2006/main"><cols><col min="1" max="1" width="48" customWidth="1"/><col min="2" max="2" width="90" customWidth="1"/></cols><sheetData>${rows}</sheetData></worksheet>`
};
const blob=zipStore(files);
const a=document.createElement("a");
const url=URL.createObjectURL(blob);
a.href=url; a.download="Incident Management.xlsx";
document.body.appendChild(a); a.click(); a.remove();
setTimeout(()=>URL.revokeObjectURL(url),1000);
}
function readU16(a,o){return a[o]|(a[o+1]<<8)}
function readU32(a,o){return (a[o]|(a[o+1]<<8)|(a[o+2]<<16)|(a[o+3]<<24))>>>0}
function unzipStoredEntry(buffer,targetName){
const a=new Uint8Array(buffer);
const dec=new TextDecoder("utf-8");
let p=0;
while(p+30<=a.length){
if(readU32(a,p)!==0x04034b50) break;
const method=readU16(a,p+8);
const compSize=readU32(a,p+18);
const nameLen=readU16(a,p+26);
const extraLen=readU16(a,p+28);
const name=dec.decode(a.slice(p+30,p+30+nameLen));
const dataStart=p+30+nameLen+extraLen;
if(name===targetName){
if(method!==0) throw new Error("Bu XLSX sıkıştırma biçimi desteklenmiyor.");
return dec.decode(a.slice(dataStart,dataStart+compSize));
}
p=dataStart+compSize;
}
throw new Error("Excel çalışma sayfası bulunamadı.");
}
function decodeXmlText(v){
const ta=document.createElement("textarea");
ta.innerHTML=v;
return ta.value;
}
function excelIceriAktar(event){
const file=event.target.files && event.target.files[0];
if(!file) return;
const reader=new FileReader();
reader.onload=e=>{
try{
const xml=unzipStoredEntry(e.target.result,"xl/worksheets/sheet1.xml");
const parser=new DOMParser();
const doc=parser.parseFromString(xml,"application/xml");
if(doc.querySelector("parsererror")) throw new Error("Excel XML verisi okunamadı.");
const rows=[...doc.getElementsByTagName("row")].map(row=>{
const vals=[];
[...row.getElementsByTagName("c")].forEach(c=>{
const ref=c.getAttribute("r")||"A1";
const col=ref.charCodeAt(0)-65;
const t=c.getElementsByTagName("t")[0];
vals[col]=t ? t.textContent : "";
});
return vals;
});
const map={};
const people=[];
const roles=[];
rows.slice(1).forEach(r=>{
const k=String(r[0]||"").trim();
const v=String(r[1]||"");
if(k.startsWith("Müdahale eden / Atanan Personel")) people.push(v);
else if(k.startsWith("Görevi veya Departmanı")) roles.push(v);
else if(k) map[k]=v;
});
alanlar.forEach(([id,label])=>{
if(map[label]!==undefined && $(id)) $(id).value=map[label];
});
$("personel").innerHTML="";
const count=Math.max(people.length,roles.length,1);
for(let i=0;i<count;i++) personelEkle(people[i]||"",roles[i]||"");
document.querySelectorAll("textarea").forEach(autoGrow);
sureHesapla();
if(!$("islemSuresi").value.trim()) islemSuresiHesapla();
alert("Incident Management.xlsx içeri aktarıldı.");
}catch(err){
alert("Excel içeri aktarılamadı. Bu formdan dışarı aktarılmış Incident Management.xlsx dosyasını seçin.\n\n"+err.message);
}
event.target.value="";
};
reader.readAsArrayBuffer(file);
}
function fitRightHeader(el){
const parent=el.parentElement;
if(!parent)return;
el.style.fontSize="";
let size=parseFloat(getComputedStyle(el).fontSize);
const minSize=11;
while(el.scrollWidth>el.clientWidth && size>minSize){
size-=0.5; el.style.fontSize=size+"px";
}
}
function syncRightHeader(value){
document.querySelectorAll('.editableHeader[data-key="right"]').forEach(el=>{
if(el.textContent!==value) el.textContent=value;
fitRightHeader(el);
});
}
// OLGUN BAŞKANLIĞI: peş peşe 5 tıklamada düzenleme açılır.
document.querySelectorAll('.editableHeader[data-key="right"]').forEach(el=>{
let clickCount=0;
let clickTimer=null;
el.addEventListener("click",function(){
clickCount++;
clearTimeout(clickTimer);
clickTimer=setTimeout(()=>{ clickCount=0; },1800);
if(clickCount>=5){
clickCount=0;
clearTimeout(clickTimer);
this.setAttribute("contenteditable","true");
this.focus();
const range=document.createRange();
range.selectNodeContents(this);
range.collapse(false);
const sel=window.getSelection();
sel.removeAllRanges();
sel.addRange(range);
}
});
el.addEventListener("input",function(){
const value=this.textContent.replace(/\n/g,"");
syncRightHeader(value);
this.textContent=value;
fitRightHeader(this);
const range=document.createRange();
range.selectNodeContents(this); range.collapse(false);
const sel=window.getSelection(); sel.removeAllRanges(); sel.addRange(range);
});
el.addEventListener("blur",function(){
this.removeAttribute("contenteditable");
});
el.addEventListener("keydown",function(e){
if(e.key==="Enter"){
e.preventDefault();
this.blur();
}
});
});
window.addEventListener("load",()=>document.querySelectorAll('.editableHeader[data-key="right"]').forEach(fitRightHeader));
window.addEventListener("resize",()=>document.querySelectorAll('.editableHeader[data-key="right"]').forEach(fitRightHeader));
</script>
</body>
</html>