utkast til salær-app (timeliste)
- Kurs Fosap
- 21. aug.
- 4 min lesing
<!DOCTYPE html>
<html lang="no">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Salærkrav for sakkyndige</title>
<!-- Tailwind CSS CDN for styling -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
body {
font-family: 'Inter', sans-serif;
background-color: #f3f4f6;
}
.form-container {
max-width: 900px;
}
/* Custom styles for printing */
@media print {
body {
background-color: #fff;
}
.no-print {
display: none;
}
.form-container {
max-width: none;
box-shadow: none;
border: none;
}
}
</style>
</head>
<body class="bg-gray-100 p-4 sm:p-8 flex justify-center">
<div class="form-container bg-white rounded-lg shadow-xl p-6 sm:p-10 w-full">
<h1 class="text-3xl font-bold mb-6 text-center text-gray-800">Salærkrav for sakkyndige</h1>
<!-- Informasjon om saken og den sakkyndige -->
<div class="space-y-4 mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="caseNumber" class="block text-sm font-medium text-gray-700">Saksnummer</label>
<input type="text" id="caseNumber" name="caseNumber" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border">
</div>
<div>
<label for="court" class="block text-sm font-medium text-gray-700">Rettsinstans</label>
<input type="text" id="court" name="court" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="expertName" class="block text-sm font-medium text-gray-700">Sakkyndiges navn</label>
<input type="text" id="expertName" name="expertName" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border">
</div>
<div>
<label for="address" class="block text-sm font-medium text-gray-700">Adresse</label>
<input type="text" id="address" name="address" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border">
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="accountNumber" class="block text-sm font-medium text-gray-700">Kontonummer</label>
<input type="text" id="accountNumber" name="accountNumber" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border">
</div>
<div>
<label for="rate" class="block text-sm font-medium text-gray-700">Timepris (NOK)</label>
<input type="number" id="rate" name="rate" value="1300" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border">
</div>
</div>
</div>
<!-- Timer og arbeidsoppgaver -->
<h2 class="text-2xl font-semibold mb-4 text-gray-800">Spesifikasjon av arbeid og timer</h2>
<div class="overflow-x-auto mb-6">
<table class="min-w-full divide-y divide-gray-200 rounded-lg overflow-hidden">
<thead class="bg-gray-50">
<tr>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Dato</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Antall timer</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Beskrivelse av arbeid</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sum</th>
<th class="px-3 py-2 text-left text-xs font-medium text-gray-500 uppercase tracking-wider no-print"></th>
</tr>
</thead>
<tbody id="workTableBody" class="bg-white divide-y divide-gray-200">
<!-- Table rows will be added here dynamically -->
</tbody>
<tfoot>
<tr class="bg-gray-50">
<td colspan="4" class="px-3 py-2 text-right text-base font-semibold text-gray-800">
Sum timer: <span id="totalHours">0</span>
</td>
<td class="no-print"></td>
</tr>
<tr class="bg-gray-50">
<td colspan="4" class="px-3 py-2 text-right text-base font-semibold text-gray-800">
Timesats sum: <span id="hoursSum">0</span> kr
</td>
<td class="no-print"></td>
</tr>
</tfoot>
</table>
</div>
<button id="addRowBtn" type="button" class="no-print mb-8 px-4 py-2 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
Legg til rad
</button>
<!-- Utlegg -->
<h2 class="text-2xl font-semibold mb-4 text-gray-800">Utlegg</h2>
<div class="space-y-4 mb-8">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<label for="travelExpenses" class="block text-sm font-medium text-gray-700">Reiseutgifter (NOK)</label>
<input type="number" id="travelExpenses" name="travelExpenses" value="0" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border">
</div>
<div>
<label for="materialExpenses" class="block text-sm font-medium text-gray-700">Materialer og andre utlegg (NOK)</label>
<input type="number" id="materialExpenses" name="materialExpenses" value="0" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border">
</div>
</div>
</div>
<!-- Totalsum -->
<h2 class="text-2xl font-semibold mb-4 text-gray-800">Oppsummering</h2>
<div class="flex justify-end items-center space-x-4 mb-8">
<p class="text-lg font-semibold text-gray-800">Totalt beløp:</p>
<p id="totalSum" class="text-2xl font-bold text-indigo-600">0 kr</p>
</div>
<!-- Dato og signatur -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-8 items-end mb-8">
<div>
<label for="date" class="block text-sm font-medium text-gray-700">Dato</label>
<input type="date" id="date" name="date" class="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 p-2 border">
</div>
<div>
<label for="signature" class="block text-sm font-medium text-gray-700">Signatur</label>
<div class="border-b border-gray-400 py-2 mt-1"></div>
</div>
</div>
<!-- Handlingsknapper -->
<div class="no-print flex justify-end space-x-4 mt-6">
<button id="printBtn" type="button" class="px-6 py-3 bg-gray-500 text-white font-medium rounded-md hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400 transition-colors">
Skriv ut
</button>
<button id="submitBtn" type="button" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors">
Send inn
</button>
</div>
</div>
<script>
// Get references to DOM elements
const addRowBtn = document.getElementById('addRowBtn');
const workTableBody = document.getElementById('workTableBody');
const rateInput = document.getElementById('rate');
const travelExpensesInput = document.getElementById('travelExpenses');
const materialExpensesInput = document.getElementById('materialExpenses');
const totalHoursSpan = document.getElementById('totalHours');
const hoursSumSpan = document.getElementById('hoursSum');
const totalSumSpan = document.getElementById('totalSum');
const printBtn = document.getElementById('printBtn');
const submitBtn = document.getElementById('submitBtn');
// Function to add a new row to the table
function addRow() {
const row = document.createElement('tr');
row.className = 'hover:bg-gray-50';
row.innerHTML = `
<td class="px-3 py-2 whitespace-nowrap"><input type="date" class="block w-full rounded-md border-gray-300 shadow-sm p-1 border"></td>
<td class="px-3 py-2 whitespace-nowrap"><input type="number" value="0" min="0" step="0.5" class="hours-input block w-full rounded-md border-gray-300 shadow-sm p-1 border"></td>
<td class="px-3 py-2"><textarea rows="1" class="block w-full rounded-md border-gray-300 shadow-sm p-1 border"></textarea></td>
<td class="px-3 py-2 whitespace-nowrap"><span class="sum-output font-medium">0</span> kr</td>
<td class="px-3 py-2 whitespace-nowrap no-print">
<button type="button" class="remove-row-btn text-red-600 hover:text-red-900 transition-colors">
Slett
</button>
</td>
`;
workTableBody.appendChild(row);
// Add event listeners to the new row's inputs
const newHoursInput = row.querySelector('.hours-input');
const newRemoveBtn = row.querySelector('.remove-row-btn');
newHoursInput.addEventListener('input', calculateSums);
newRemoveBtn.addEventListener('click', () => {
row.remove();
calculateSums();
});
}
// Function to calculate all sums
function calculateSums() {
const rate = parseFloat(rateInput.value) || 0;
const hoursInputs = document.querySelectorAll('.hours-input');
const sumOutputs = document.querySelectorAll('.sum-output');
let totalHours = 0;
hoursInputs.forEach((input, index) => {
const hours = parseFloat(input.value) || 0;
totalHours += hours;
sumOutputs[index].textContent = (hours * rate).toFixed(2);
});
totalHoursSpan.textContent = totalHours.toFixed(1);
hoursSumSpan.textContent = (totalHours * rate).toFixed(2);
const travelExpenses = parseFloat(travelExpensesInput.value) || 0;
const materialExpenses = parseFloat(materialExpensesInput.value) || 0;
const totalSum = (totalHours * rate) + travelExpenses + materialExpenses;
totalSumSpan.textContent = totalSum.toFixed(2) + " kr";
}
// Add initial row
addRow();
// Event listeners
addRowBtn.addEventListener('click', addRow);
rateInput.addEventListener('input', calculateSums);
travelExpensesInput.addEventListener('input', calculateSums);
materialExpensesInput.addEventListener('input', calculateSums);
printBtn.addEventListener('click', () => {
window.print();
});
submitBtn.addEventListener('click', () => {
// Placeholder for form submission logic
console.log('Form data submitted!');
alert('Salærkravet er "sendt inn"! I en fullversjon ville dette sendt data til en server.');
});
</script>
</body>
</html>
Kommentarer