|
|
<!DOCTYPE html> |
|
|
<html lang="sv"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Förundersökningsprotokoll</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script> |
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Roboto', sans-serif; |
|
|
} |
|
|
.section-container { |
|
|
transition: all 0.3s ease; |
|
|
cursor: move; |
|
|
} |
|
|
.section-container:hover { |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
.section-container.dragging { |
|
|
opacity: 0.5; |
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); |
|
|
} |
|
|
|
|
|
|
|
|
.skadekarta-body { |
|
|
position: relative; |
|
|
width: 200px; |
|
|
height: 400px; |
|
|
margin: 0 auto; |
|
|
cursor: crosshair; |
|
|
} |
|
|
.skadekarta-front, .skadekarta-back { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
background-size: contain; |
|
|
background-repeat: no-repeat; |
|
|
background-position: center; |
|
|
} |
|
|
.skadekarta-front { |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M50,10 C60,10 65,15 65,25 L65,35 C65,45 70,50 60,50 L40,50 C30,50 35,45 35,35 L35,25 C35,15 40,10 50,10 Z M30,55 L70,55 L65,75 L70,95 L65,115 L70,135 L65,155 L70,175 L35,175 L40,155 L35,135 L40,115 L35,95 L40,75 L35,55 Z M30,55 L20,65 M70,55 L80,65" fill="none" stroke="black" stroke-width="1"/><circle cx="40" cy="30" r="3" fill="black"/><circle cx="60" cy="30" r="3" fill="black"/><path d="M45,40 Q50,45 55,40" fill="none" stroke="black" stroke-width="1"/></svg>'); |
|
|
} |
|
|
.skadekarta-back { |
|
|
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 200"><path d="M50,10 C60,10 65,15 65,25 L65,35 C65,45 70,50 60,50 L40,50 C30,50 35,45 35,35 L35,25 C35,15 40,10 50,10 Z M30,55 L70,55 L65,75 L70,95 L65,115 L70,135 L65,155 L70,175 L35,175 L40,155 L35,135 L40,115 L35,95 L40,75 L35,55 Z M30,55 L20,65 M70,55 L80,65" fill="none" stroke="black" stroke-width="1"/></svg>'); |
|
|
display: none; |
|
|
} |
|
|
.skada-circle { |
|
|
position: absolute; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border: 2px solid red; |
|
|
border-radius: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
z-index: 2; |
|
|
} |
|
|
.skada-line { |
|
|
position: absolute; |
|
|
background-color: red; |
|
|
height: 2px; |
|
|
transform-origin: left center; |
|
|
z-index: 1; |
|
|
} |
|
|
.skada-number { |
|
|
position: absolute; |
|
|
color: black; |
|
|
font-weight: bold; |
|
|
font-size: 12px; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
z-index: 3; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="container mx-auto px-4 py-8 max-w-4xl"> |
|
|
<header class="mb-8 text-center"> |
|
|
<h1 class="text-3xl font-bold text-blue-800 mb-2">Förundersökningsprotokoll</h1> |
|
|
<p class="text-gray-600">Fyll i formuläret nedan för att skapa ett komplett förundersökningsprotokoll</p> |
|
|
</header> |
|
|
|
|
|
<div class="bg-white rounded-lg shadow-md p-6 mb-8"> |
|
|
<h2 class="text-xl font-semibold text-blue-700 mb-4 border-b pb-2">Grundinformation</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="investigator">Ledande utredare</label> |
|
|
<input type="text" id="investigator" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="victim">Målsägande</label> |
|
|
<input type="text" id="victim" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="date">Datum</label> |
|
|
<input type="date" id="date" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="caseNumber">Diarienummer</label> |
|
|
<input type="text" id="caseNumber" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="crimeType">Brottsrubricering</label> |
|
|
<input type="text" id="crimeType" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"> |
|
|
</div> |
|
|
|
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="suspect">Misstänkt (namn och personuppgifter)</label> |
|
|
<textarea id="suspect" rows="2" class="w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"></textarea> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="dynamic-sections" class="space-y-6"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="mt-6 flex flex-wrap gap-3"> |
|
|
<button onclick="addSection('witness')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
Lägg till vittnesmål |
|
|
</button> |
|
|
<button onclick="addSection('police-report')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" /> |
|
|
<path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
Lägg till polisrapport |
|
|
</button> |
|
|
<button onclick="addSection('crime-scene')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
Lägg till brottsplatsundersökning |
|
|
</button> |
|
|
<button onclick="addSection('evidence')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2h-1V9z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
Lägg till bevismaterial |
|
|
</button> |
|
|
<button onclick="addSection('skadekarta')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-8-3a1 1 0 00-.867.5 1 1 0 11-1.731-1A3 3 0 0113 8a3.001 3.001 0 01-2 2.83V11a1 1 0 11-2 0v-1a1 1 0 011-1 1 1 0 100-2zm0 8a1 1 0 100-2 1 1 0 000 2z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
Lägg till skadekarta |
|
|
</button> |
|
|
<button onclick="addSection('timeline')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-12a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
Lägg till händelseförlopp |
|
|
</button> |
|
|
<button onclick="addSection('persons')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v1h8v-1zM6 8a2 2 0 11-4 0 2 2 0 014 0zM16 18v-1a5.972 5.972 0 00-.75-2.906A3.005 3.005 0 0119 15v1h-3zM4.75 12.094A5.973 5.973 0 004 15v1H1v-1a3 3 0 013.75-2.906z" /> |
|
|
</svg> |
|
|
Lägg till personer inblandade |
|
|
</button> |
|
|
<button onclick="addSection('police')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M11 17a1 1 0 001.447.894l4-2A1 1 0 0017 15V9.236a1 1 0 00-1.447-.894l-4 2a1 1 0 00-.553.894V17zM15.211 6.276a1 1 0 000-1.788l-4.764-2.382a1 1 0 00-.894 0L4.789 4.488a1 1 0 000 1.788l4.764 2.382a1 1 0 00.894 0l4.764-2.382zM4.447 8.342A1 1 0 003 9.236V15a1 1 0 00.553.894l4 2A1 1 0 009 17v-5.764a1 1 0 00-.553-.894l-4-2z" /> |
|
|
</svg> |
|
|
Lägg till polismän inblandade |
|
|
</button> |
|
|
<button onclick="addSection('contact-persons')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path d="M2.003 5.884L10 9.882l7.997-3.998A2 2 0 0016 4H4a2 2 0 00-1.997 1.884z" /> |
|
|
<path d="M18 8.118l-8 4-8-4V14a2 2 0 002 2h12a2 2 0 002-2V8.118z" /> |
|
|
</svg> |
|
|
Lägg till kontaktpersoner |
|
|
</button> |
|
|
<button onclick="addSection('seized-items')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 2a4 4 0 00-4 4v1H5a1 1 0 00-.994.89l-1 9A1 1 0 004 18h12a1 1 0 00.994-1.11l-1-9A1 1 0 0015 7h-1V6a4 4 0 00-4-4zm2 5V6a2 2 0 10-4 0v1h4zm-6 3a1 1 0 112 0 1 1 0 01-2 0zm7-1a1 1 0 100 2 1 1 0 000-2z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
Lägg till beslagtagna föremål |
|
|
</button> |
|
|
<button onclick="addSection('other')" class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-2" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm1-11a1 1 0 10-2 0v2H7a1 1 0 100 2h2v2a1 1 0 102 0v-2h2a1 1 0 100-2h-2V7z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
Lägg till övrig dokumentation |
|
|
</button> |
|
|
</div> |
|
|
|
|
|
<div class="mt-10 text-center"> |
|
|
<button onclick="generatePDF()" class="bg-green-600 hover:bg-green-700 text-white px-6 py-3 rounded-lg font-medium text-lg flex items-center mx-auto"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 mr-2" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" /> |
|
|
</svg> |
|
|
Generera PDF-protokoll |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
// Global variables |
|
|
let skadaCounter = 0; |
|
|
let sectionCounter = 0; |
|
|
let currentView = 'front'; |
|
|
let draggedSection = null; |
|
|
|
|
|
// Initialize drag and drop functionality |
|
|
function initDragAndDrop() { |
|
|
const container = document.getElementById('dynamic-sections'); |
|
|
|
|
|
container.addEventListener('dragstart', function(e) { |
|
|
if (e.target.classList.contains('section-container')) { |
|
|
draggedSection = e.target; |
|
|
e.target.classList.add('dragging'); |
|
|
e.dataTransfer.setData('text/plain', e.target.id); |
|
|
e.dataTransfer.effectAllowed = 'move'; |
|
|
} |
|
|
}); |
|
|
|
|
|
container.addEventListener('dragend', function(e) { |
|
|
if (e.target.classList.contains('section-container')) { |
|
|
e.target.classList.remove('dragging'); |
|
|
} |
|
|
}); |
|
|
|
|
|
container.addEventListener('dragover', function(e) { |
|
|
e.preventDefault(); |
|
|
e.dataTransfer.dropEffect = 'move'; |
|
|
|
|
|
const afterElement = getDragAfterElement(container, e.clientY); |
|
|
if (afterElement == null) { |
|
|
container.appendChild(draggedSection); |
|
|
} else { |
|
|
container.insertBefore(draggedSection, afterElement); |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
function getDragAfterElement(container, y) { |
|
|
const draggableElements = [...container.querySelectorAll('.section-container:not(.dragging)')]; |
|
|
|
|
|
return draggableElements.reduce((closest, child) => { |
|
|
const box = child.getBoundingClientRect(); |
|
|
const offset = y - box.top - box.height / 2; |
|
|
|
|
|
if (offset < 0 && offset > closest.offset) { |
|
|
return { offset: offset, element: child }; |
|
|
} else { |
|
|
return closest; |
|
|
} |
|
|
}, { offset: Number.NEGATIVE_INFINITY }).element; |
|
|
} |
|
|
|
|
|
// Add section based on type |
|
|
function addSection(type) { |
|
|
const container = document.getElementById('dynamic-sections'); |
|
|
const sectionId = `section-${sectionCounter++}`; |
|
|
|
|
|
let sectionHTML = ''; |
|
|
let sectionTitle = ''; |
|
|
|
|
|
switch(type) { |
|
|
case 'witness': |
|
|
sectionTitle = 'Vittnesmål'; |
|
|
sectionHTML = ` |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-name">Vittnes namn</label> |
|
|
<input type="text" id="${sectionId}-witness-name" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-contact">Kontaktuppgifter</label> |
|
|
<input type="text" id="${sectionId}-witness-contact" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-location">Plats för förhör</label> |
|
|
<input type="text" id="${sectionId}-witness-location" class="w-full px-4 py-2 border rounded-lg" placeholder="Var utfördes förhöret"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-time">Tidpunkt för förhör</label> |
|
|
<input type="datetime-local" id="${sectionId}-witness-time" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-witness-statement">Vittnesutsaga</label> |
|
|
<textarea id="${sectionId}-witness-statement" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'police-report': |
|
|
sectionTitle = 'Polisrapport'; |
|
|
sectionHTML = ` |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-report-author">Rapportförfattare</label> |
|
|
<input type="text" id="${sectionId}-report-author" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-report-rank">Rang</label> |
|
|
<select id="${sectionId}-report-rank" class="w-full px-4 py-2 border rounded-lg"> |
|
|
<option value="aspirant">Aspirant</option> |
|
|
<option value="assistent">Assistent</option> |
|
|
<option value="inspektor">Inspektör</option> |
|
|
<option value="kommissarie">Kommissarie</option> |
|
|
<option value="sekreterare">Sekreterare</option> |
|
|
<option value="intendent">Intendent</option> |
|
|
<option value="polismästare">Polismästare</option> |
|
|
<option value="bitr-direktör">Bitr. Direktör</option> |
|
|
<option value="direktör">Direktör</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-report-date">Datum för rapport</label> |
|
|
<input type="date" id="${sectionId}-report-date" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-report-content">Rapportens innehåll</label> |
|
|
<textarea id="${sectionId}-report-content" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'crime-scene': |
|
|
sectionTitle = 'Brottsplatsundersökning'; |
|
|
sectionHTML = ` |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-scene-location">Plats</label> |
|
|
<input type="text" id="${sectionId}-scene-location" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-scene-date">Datum för undersökning</label> |
|
|
<input type="date" id="${sectionId}-scene-date" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2">Kriminaltekniker</label> |
|
|
<div id="${sectionId}-technicians" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
<button onclick="addTechnicianItem('${sectionId}')" class="mt-2 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg"> |
|
|
Lägg till kriminaltekniker |
|
|
</button> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-scene-findings">Anteckningar</label> |
|
|
<textarea id="${sectionId}-scene-findings" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'evidence': |
|
|
sectionTitle = 'Bevismaterial'; |
|
|
sectionHTML = ` |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-evidence-type">Typ av bevismaterial</label> |
|
|
<select id="${sectionId}-evidence-type" class="w-full px-4 py-2 border rounded-lg"> |
|
|
<option value="dna">DNA-prov</option> |
|
|
<option value="fingerprint">Fingeravtryck</option> |
|
|
<option value="photo">Fotografier</option> |
|
|
<option value="video">Videoinspelning</option> |
|
|
<option value="object">Föremål</option> |
|
|
<option value="other">Övrigt</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-evidence-id">ID-nummer</label> |
|
|
<input type="text" id="${sectionId}-evidence-id" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="mb-4"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-evidence-collected">Insamlat datum och tid</label> |
|
|
<input type="datetime-local" id="${sectionId}-evidence-collected" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-evidence-notes">Anteckningar</label> |
|
|
<textarea id="${sectionId}-evidence-notes" rows="3" class="w-full px-4 py-2 border rounded-lg"></textarea> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'skadekarta': |
|
|
sectionTitle = 'Skadekarta'; |
|
|
sectionHTML = ` |
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-center mb-4"> |
|
|
<button onclick="toggleBodyView('${sectionId}')" class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg"> |
|
|
Växla till ${currentView === 'front' ? 'baksida' : 'framsida'} |
|
|
</button> |
|
|
</div> |
|
|
<div class="skadekarta-body" id="${sectionId}-body-map" onclick="addSkada(event, '${sectionId}')"> |
|
|
<div class="skadekarta-front" id="${sectionId}-body-front"></div> |
|
|
<div class="skadekarta-back" id="${sectionId}-body-back"></div> |
|
|
</div> |
|
|
<div id="${sectionId}-skada-list" class="mt-6 space-y-2"> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-skada-doctor">Ansvarig</label> |
|
|
<input type="text" id="${sectionId}-skada-doctor" class="w-full px-4 py-2 border rounded-lg mb-4"> |
|
|
|
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-skada-date">Datum</label> |
|
|
<input type="date" id="${sectionId}-skada-date" class="w-full px-4 py-2 border rounded-lg mb-4"> |
|
|
|
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-skada-findings">Beskrivning av skador</label> |
|
|
<textarea id="${sectionId}-skada-findings" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'timeline': |
|
|
sectionTitle = 'Händelseförlopp'; |
|
|
sectionHTML = ` |
|
|
<div id="${sectionId}-timeline-items" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
<button onclick="addTimelineItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg"> |
|
|
Lägg till händelse |
|
|
</button> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'persons': |
|
|
sectionTitle = 'Personer inblandade'; |
|
|
sectionHTML = ` |
|
|
<div id="${sectionId}-person-items" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
<button onclick="addPersonItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg"> |
|
|
Lägg till person |
|
|
</button> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'police': |
|
|
sectionTitle = 'Polismän inblandade'; |
|
|
sectionHTML = ` |
|
|
<div id="${sectionId}-police-items" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
<button onclick="addPoliceItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg"> |
|
|
Lägg till polisman |
|
|
</button> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'contact-persons': |
|
|
sectionTitle = 'Kontaktpersoner'; |
|
|
sectionHTML = ` |
|
|
<div id="${sectionId}-contact-items" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
<button onclick="addContactItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg"> |
|
|
Lägg till kontaktperson |
|
|
</button> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'seized-items': |
|
|
sectionTitle = 'Beslagtagna föremål'; |
|
|
sectionHTML = ` |
|
|
<div id="${sectionId}-seized-items" class="space-y-4"> |
|
|
|
|
|
</div> |
|
|
<button onclick="addSeizedItem('${sectionId}')" class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg"> |
|
|
Lägg till beslagtagen föremål |
|
|
</button> |
|
|
`; |
|
|
break; |
|
|
|
|
|
case 'other': |
|
|
sectionTitle = 'Övrig dokumentation'; |
|
|
sectionHTML = ` |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-other-title">Titel</label> |
|
|
<input type="text" id="${sectionId}-other-title" class="w-full px-4 py-2 border rounded-lg mb-4"> |
|
|
|
|
|
<label class="block text-gray-700 font-medium mb-2" for="${sectionId}-other-content">Innehåll</label> |
|
|
<textarea id="${sectionId}-other-content" rows="4" class="w-full px-4 py-2 border rounded-lg"></textarea> |
|
|
</div> |
|
|
`; |
|
|
break; |
|
|
} |
|
|
|
|
|
const sectionElement = document.createElement('div'); |
|
|
sectionElement.id = sectionId; |
|
|
sectionElement.className = 'section-container bg-white rounded-lg shadow-md p-6'; |
|
|
sectionElement.draggable = true; |
|
|
|
|
|
sectionElement.innerHTML = ` |
|
|
<div class="flex justify-between items-center mb-4 border-b pb-2"> |
|
|
<h3 class="text-lg font-semibold text-blue-700">${sectionTitle}</h3> |
|
|
<button onclick="removeSection('${sectionId}')" class="text-red-500 hover:text-red-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
${sectionHTML} |
|
|
`; |
|
|
|
|
|
container.appendChild(sectionElement); |
|
|
|
|
|
// Initialize specific section functionality |
|
|
if (type === 'skadekarta') { |
|
|
initSkadekarta(sectionId); |
|
|
} |
|
|
} |
|
|
|
|
|
// Remove section |
|
|
function removeSection(sectionId) { |
|
|
const section = document.getElementById(sectionId); |
|
|
if (section) { |
|
|
section.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
// Toggle body view between front and back |
|
|
function toggleBodyView(sectionId) { |
|
|
const front = document.getElementById(`${sectionId}-body-front`); |
|
|
const back = document.getElementById(`${sectionId}-body-back`); |
|
|
|
|
|
if (currentView === 'front') { |
|
|
front.style.display = 'none'; |
|
|
back.style.display = 'block'; |
|
|
currentView = 'back'; |
|
|
document.querySelector(`button[onclick="toggleBodyView('${sectionId}')"]`).textContent = 'Växla till framsida'; |
|
|
} else { |
|
|
front.style.display = 'block'; |
|
|
back.style.display = 'none'; |
|
|
currentView = 'front'; |
|
|
document.querySelector(`button[onclick="toggleBodyView('${sectionId}')"]`).textContent = 'Växla till baksida'; |
|
|
} |
|
|
} |
|
|
|
|
|
// Initialize skadekarta |
|
|
function initSkadekarta(sectionId) { |
|
|
const skadekarta = document.getElementById(`${sectionId}-body-map`); |
|
|
skadekarta.addEventListener('click', function(e) { |
|
|
addSkada(e, sectionId); |
|
|
}); |
|
|
} |
|
|
|
|
|
// Add skada to skadekarta |
|
|
function addSkada(event, sectionId) { |
|
|
const skadekarta = document.getElementById(`${sectionId}-body-map`); |
|
|
const rect = skadekarta.getBoundingClientRect(); |
|
|
|
|
|
// Calculate position relative to the skadekarta |
|
|
const x = event.clientX - rect.left; |
|
|
const y = event.clientY - rect.top; |
|
|
|
|
|
// Create skada marker |
|
|
const skadaId = `skada-${skadaCounter++}`; |
|
|
|
|
|
// Create circle |
|
|
const circle = document.createElement('div'); |
|
|
circle.className = 'skada-circle'; |
|
|
circle.style.left = `${x}px`; |
|
|
circle.style.top = `${y}px`; |
|
|
circle.id = `${skadaId}-circle`; |
|
|
|
|
|
// Create number |
|
|
const number = document.createElement('div'); |
|
|
number.className = 'skada-number'; |
|
|
number.textContent = skadaCounter; |
|
|
number.id = `${skadaId}-number`; |
|
|
|
|
|
// Create line (direction depends on click position) |
|
|
const line = document.createElement('div'); |
|
|
line.className = 'skada-line'; |
|
|
line.style.left = `${x}px`; |
|
|
line.style.top = `${y}px`; |
|
|
line.style.width = '50px'; |
|
|
line.id = `${skadaId}-line`; |
|
|
|
|
|
// Position line to left or right |
|
|
if (x > rect.width / 2) { |
|
|
line.style.transform = 'rotate(180deg)'; |
|
|
line.style.left = `${x - 50}px`; |
|
|
} |
|
|
|
|
|
// Add elements to skadekarta |
|
|
skadekarta.appendChild(line); |
|
|
skadekarta.appendChild(circle); |
|
|
skadekarta.appendChild(number); |
|
|
|
|
|
// Add skada to list |
|
|
addSkadaToList(sectionId, skadaId, skadaCounter, x, y); |
|
|
} |
|
|
|
|
|
// Add skada to the list below skadekarta |
|
|
function addSkadaToList(sectionId, skadaId, number, x, y) { |
|
|
const list = document.getElementById(`${sectionId}-skada-list`); |
|
|
|
|
|
const item = document.createElement('div'); |
|
|
item.className = 'flex items-center justify-between bg-gray-100 p-2 rounded'; |
|
|
item.id = `${skadaId}-list-item`; |
|
|
|
|
|
item.innerHTML = ` |
|
|
<div class="flex items-center"> |
|
|
<span class="inline-block w-6 h-6 rounded-full bg-red-500 text-white text-center mr-2">${number}</span> |
|
|
<input type="text" placeholder="Beskrivning av skada" class="px-2 py-1 border rounded"> |
|
|
</div> |
|
|
<button onclick="removeSkada('${sectionId}', '${skadaId}')" class="text-red-500 hover:text-red-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
`; |
|
|
|
|
|
list.appendChild(item); |
|
|
} |
|
|
|
|
|
// Remove skada from skadekarta and list |
|
|
function removeSkada(sectionId, skadaId) { |
|
|
// Remove from skadekarta |
|
|
const circle = document.getElementById(`${skadaId}-circle`); |
|
|
const line = document.getElementById(`${skadaId}-line`); |
|
|
const number = document.getElementById(`${skadaId}-number`); |
|
|
|
|
|
if (circle) circle.remove(); |
|
|
if (line) line.remove(); |
|
|
if (number) number.remove(); |
|
|
|
|
|
// Remove from list |
|
|
const listItem = document.getElementById(`${skadaId}-list-item`); |
|
|
if (listItem) listItem.remove(); |
|
|
} |
|
|
|
|
|
// Add technician item to crime scene section |
|
|
function addTechnicianItem(sectionId) { |
|
|
const container = document.getElementById(`${sectionId}-technicians`); |
|
|
const itemId = `technician-${Date.now()}`; |
|
|
|
|
|
const item = document.createElement('div'); |
|
|
item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end'; |
|
|
item.id = itemId; |
|
|
|
|
|
item.innerHTML = ` |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-name">Namn</label> |
|
|
<input type="text" id="${itemId}-name" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-rank">Rang</label> |
|
|
<select id="${itemId}-rank" class="w-full px-4 py-2 border rounded-lg"> |
|
|
<option value="aspirant">Aspirant</option> |
|
|
<option value="assistent">Assistent</option> |
|
|
<option value="inspektor">Inspektör</option> |
|
|
<option value="kommissarie">Kommissarie</option> |
|
|
<option value="sekreterare">Sekreterare</option> |
|
|
<option value="intendent">Intendent</option> |
|
|
<option value="polismästare">Polismästare</option> |
|
|
<option value="bitr-direktör">Bitr. Direktör</option> |
|
|
<option value="direktör">Direktör</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex items-end"> |
|
|
<div class="flex-grow"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-role">Roll</label> |
|
|
<input type="text" id="${itemId}-role" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<button onclick="removeTechnicianItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(item); |
|
|
} |
|
|
|
|
|
// Remove technician item |
|
|
function removeTechnicianItem(sectionId, itemId) { |
|
|
const item = document.getElementById(itemId); |
|
|
if (item) { |
|
|
item.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
// Add timeline item |
|
|
function addTimelineItem(sectionId) { |
|
|
const container = document.getElementById(`${sectionId}-timeline-items`); |
|
|
const itemId = `timeline-${Date.now()}`; |
|
|
|
|
|
const item = document.createElement('div'); |
|
|
item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end'; |
|
|
item.id = itemId; |
|
|
|
|
|
item.innerHTML = ` |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-time">Tidpunkt</label> |
|
|
<input type="datetime-local" id="${itemId}-time" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<div class="flex"> |
|
|
<div class="flex-grow"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-description">Händelse</label> |
|
|
<input type="text" id="${itemId}-description" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<button onclick="removeTimelineItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(item); |
|
|
} |
|
|
|
|
|
// Remove timeline item |
|
|
function removeTimelineItem(sectionId, itemId) { |
|
|
const item = document.getElementById(itemId); |
|
|
if (item) { |
|
|
item.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
// Add person item |
|
|
function addPersonItem(sectionId) { |
|
|
const container = document.getElementById(`${sectionId}-person-items`); |
|
|
const itemId = `person-${Date.now()}`; |
|
|
|
|
|
const item = document.createElement('div'); |
|
|
item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end'; |
|
|
item.id = itemId; |
|
|
|
|
|
item.innerHTML = ` |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-name">Namn</label> |
|
|
<input type="text" id="${itemId}-name" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-role">Roll</label> |
|
|
<input type="text" id="${itemId}-role" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="flex-grow"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-contact">Kontaktuppgifter</label> |
|
|
<input type="text" id="${itemId}-contact" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<button onclick="removePersonItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(item); |
|
|
} |
|
|
|
|
|
// Remove person item |
|
|
function removePersonItem(sectionId, itemId) { |
|
|
const item = document.getElementById(itemId); |
|
|
if (item) { |
|
|
item.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
// Add police item |
|
|
function addPoliceItem(sectionId) { |
|
|
const container = document.getElementById(`${sectionId}-police-items`); |
|
|
const itemId = `police-${Date.now()}`; |
|
|
|
|
|
const item = document.createElement('div'); |
|
|
item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end'; |
|
|
item.id = itemId; |
|
|
|
|
|
item.innerHTML = ` |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-name">Namn</label> |
|
|
<input type="text" id="${itemId}-name" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-rank">Rang</label> |
|
|
<select id="${itemId}-rank" class="w-full px-4 py-2 border rounded-lg"> |
|
|
<option value="aspirant">Aspirant</option> |
|
|
<option value="assistent">Assistent</option> |
|
|
<option value="inspektor">Inspektör</option> |
|
|
<option value="kommissarie">Kommissarie</option> |
|
|
<option value="sekreterare">Sekreterare</option> |
|
|
<option value="intendent">Intendent</option> |
|
|
<option value="polismästare">Polismästare</option> |
|
|
<option value="bitr-direktör">Bitr. Direktör</option> |
|
|
<option value="direktör">Direktör</option> |
|
|
</select> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="flex-grow"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-role">Roll</label> |
|
|
<input type="text" id="${itemId}-role" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<button onclick="removePoliceItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(item); |
|
|
} |
|
|
|
|
|
// Remove police item |
|
|
function removePoliceItem(sectionId, itemId) { |
|
|
const item = document.getElementById(itemId); |
|
|
if (item) { |
|
|
item.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
// Add contact item |
|
|
function addContactItem(sectionId) { |
|
|
const container = document.getElementById(`${sectionId}-contact-items`); |
|
|
const itemId = `contact-${Date.now()}`; |
|
|
|
|
|
const item = document.createElement('div'); |
|
|
item.className = 'grid grid-cols-1 md:grid-cols-3 gap-4 items-end'; |
|
|
item.id = itemId; |
|
|
|
|
|
item.innerHTML = ` |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-name">Namn</label> |
|
|
<input type="text" id="${itemId}-name" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-info">Kontaktuppgifter</label> |
|
|
<input type="text" id="${itemId}-info" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="flex"> |
|
|
<div class="flex-grow"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-connection">Koppling till ärendet</label> |
|
|
<input type="text" id="${itemId}-connection" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<button onclick="removeContactItem('${sectionId}', '${itemId}')" class="ml-2 text-red-500 hover:text-red-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(item); |
|
|
} |
|
|
|
|
|
// Remove contact item |
|
|
function removeContactItem(sectionId, itemId) { |
|
|
const item = document.getElementById(itemId); |
|
|
if (item) { |
|
|
item.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
// Add seized item |
|
|
function addSeizedItem(sectionId) { |
|
|
const container = document.getElementById(`${sectionId}-seized-items`); |
|
|
const itemId = `seized-${Date.now()}`; |
|
|
|
|
|
const item = document.createElement('div'); |
|
|
item.className = 'grid grid-cols-1 md:grid-cols-2 gap-4'; |
|
|
item.id = itemId; |
|
|
|
|
|
item.innerHTML = ` |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-item">Beslagtaget föremål</label> |
|
|
<input type="text" id="${itemId}-item" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-location">Plats</label> |
|
|
<input type="text" id="${itemId}-location" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-from">Från vem</label> |
|
|
<input type="text" id="${itemId}-from" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-date">Datum och tid</label> |
|
|
<input type="datetime-local" id="${itemId}-date" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-reason">Anledning till beslag</label> |
|
|
<input type="text" id="${itemId}-reason" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-notes">Anteckningar</label> |
|
|
<textarea id="${itemId}-notes" rows="2" class="w-full px-4 py-2 border rounded-lg"></textarea> |
|
|
</div> |
|
|
<div class="md:col-span-2"> |
|
|
<label class="block text-gray-700 font-medium mb-2" for="${itemId}-officer">Beslag utfört av</label> |
|
|
<input type="text" id="${itemId}-officer" class="w-full px-4 py-2 border rounded-lg"> |
|
|
</div> |
|
|
<div class="md:col-span-2 flex justify-end"> |
|
|
<button onclick="removeSeizedItem('${sectionId}', '${itemId}')" class="text-red-500 hover:text-red-700"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor"> |
|
|
<path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
`; |
|
|
|
|
|
container.appendChild(item); |
|
|
} |
|
|
|
|
|
// Remove seized item |
|
|
function removeSeizedItem(sectionId, itemId) { |
|
|
const item = document.getElementById(itemId); |
|
|
if (item) { |
|
|
item.remove(); |
|
|
} |
|
|
} |
|
|
|
|
|
// Generate PDF |
|
|
function generatePDF() { |
|
|
const { jsPDF } = window.jspdf; |
|
|
const doc = new jsPDF(); |
|
|
|
|
|
// Add title |
|
|
doc.setFontSize(20); |
|
|
doc.text('Förundersökningsprotokoll', 105, 15, { align: 'center' }); |
|
|
|
|
|
// Add basic information |
|
|
doc.setFontSize(12); |
|
|
doc.text('Grundinformation', 14, 25); |
|
|
|
|
|
const investigator = document.getElementById('investigator').value; |
|
|
const victim = document.getElementById('victim').value; |
|
|
const date = document.getElementById('date').value; |
|
|
const caseNumber = document.getElementById('caseNumber').value; |
|
|
const crimeType = document.getElementById('crimeType').value; |
|
|
const suspect = document.getElementById('suspect').value; |
|
|
|
|
|
doc.text(`Ledande utredare: ${investigator}`, 14, 35); |
|
|
doc.text(`Målsägande: ${victim}`, 14, 40); |
|
|
doc.text(`Datum: ${date}`, 14, 45); |
|
|
doc.text(`Diarienummer: ${caseNumber}`, 14, 50); |
|
|
doc.text(`Brottsrubricering: ${crimeType}`, 14, 55); |
|
|
doc.text(`Misstänkt: ${suspect}`, 14, 60); |
|
|
|
|
|
// Add sections |
|
|
const sections = document.getElementById('dynamic-sections').children; |
|
|
let yPosition = 70; |
|
|
|
|
|
for (let i = 0; i < sections.length; i++) { |
|
|
const section = sections[i]; |
|
|
const title = section.querySelector('h3').textContent; |
|
|
|
|
|
// Add new page if needed |
|
|
if (yPosition > 250) { |
|
|
doc.addPage(); |
|
|
yPosition = 20; |
|
|
} |
|
|
|
|
|
doc.setFontSize(14); |
|
|
doc.text(title, 14, yPosition); |
|
|
yPosition += 10; |
|
|
|
|
|
// Add section content (simplified for this example) |
|
|
doc.setFontSize(10); |
|
|
const inputs = section.querySelectorAll('input, textarea, select'); |
|
|
|
|
|
for (let j = 0; j < inputs.length; j++) { |
|
|
const input = inputs[j]; |
|
|
const label = input.previousElementSibling.textContent; |
|
|
const value = input.value; |
|
|
|
|
|
if (yPosition > 280) { |
|
|
doc.addPage(); |
|
|
yPosition = 20; |
|
|
} |
|
|
|
|
|
doc.text(`${label}: ${value}`, 20, yPosition); |
|
|
yPosition += 7; |
|
|
} |
|
|
|
|
|
yPosition += 10; |
|
|
} |
|
|
|
|
|
// Save the PDF |
|
|
doc.save('forundersokningsprotokoll.pdf'); |
|
|
} |
|
|
|
|
|
// Initialize drag and drop when page loads |
|
|
document.addEventListener('DOMContentLoaded', function() { |
|
|
initDragAndDrop(); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=cokai/f-runders-kningsprotokoll" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
