|
|
|
<!DOCTYPE html> |
|
|
|
<html lang="en"> |
|
<head> |
|
<meta charset="utf-8"/> |
|
<meta content="width=device-width, initial-scale=1.0" name="viewport"/> |
|
<title> |
|
Work Hours Calculator |
|
</title> |
|
<meta content="noindex, nofollow" name="robots"/> |
|
<meta content="noindex, nofollow" name="robots"/></head> |
|
<body> |
|
|
|
<nav class="navbar navbar-expand-lg navbar-dark bg-primary"> |
|
<a class="navbar-brand" href="#" rel="nofollow noindex"> |
|
WorkCalc |
|
</a> |
|
<button aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation" class="navbar-toggler" data-target="#navbarNav" data-toggle="collapse" type="button"> |
|
<span class="navbar-toggler-icon"> |
|
</span> |
|
</button> |
|
<div class="collapse navbar-collapse justify-content-end" id="navbarNav"> |
|
<ul class="navbar-nav"> |
|
<li class="nav-item active"> |
|
<a class="nav-link" href="#" rel="nofollow noindex"> |
|
Home |
|
</a> |
|
</li> |
|
<li class="nav-item"> |
|
<a class="nav-link" href="#" rel="nofollow noindex"> |
|
Reports |
|
</a> |
|
</li> |
|
<li class="nav-item"> |
|
<a class="nav-link" href="#" rel="nofollow noindex"> |
|
Settings |
|
</a> |
|
</li> |
|
</ul> |
|
</div> |
|
</nav> |
|
|
|
<div class="container my-5"> |
|
<h2 class="text-center mb-4"> |
|
Mesai Hesaplama |
|
</h2> |
|
|
|
<div class="card mb-4"> |
|
<div class="card-header bg-secondary text-white"> |
|
Veri Girişi |
|
</div> |
|
<div class="card-body"> |
|
<form id="dataForm"> |
|
<div class="form-group"> |
|
<label for="timeInput"> |
|
Kopyala ve Yapıştır: |
|
</label> |
|
<textarea class="form-control" id="timeInput" placeholder="Örnek: |
|
10:01 18:00 |
|
10:06 18:00 |
|
..." rows="6"></textarea> |
|
</div> |
|
<button class="btn btn-primary" type="submit"> |
|
Hesapla |
|
</button> |
|
</form> |
|
</div> |
|
</div> |
|
|
|
<div class="card"> |
|
<div class="card-header bg-success text-white"> |
|
Haftalık Rapor |
|
</div> |
|
<div class="card-body"> |
|
<div id="reportContent"> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<footer class="bg-dark text-white text-center py-3"> |
|
© 2023 WorkCalc. Tüm hakları saklıdır. |
|
</footer> |
|
</body> |
|
</html> |
|
|
|
|
|
<style> |
|
body { |
|
background-color: #f0f4f7; |
|
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; |
|
} |
|
|
|
.navbar-brand { |
|
font-weight: bold; |
|
font-size: 1.5rem; |
|
} |
|
|
|
.card-header { |
|
font-size: 1.2rem; |
|
font-weight: bold; |
|
} |
|
|
|
#reportContent { |
|
white-space: pre-wrap; |
|
font-family: Consolas, monospace; |
|
} |
|
|
|
footer { |
|
position: fixed; |
|
width: 100%; |
|
bottom: 0; |
|
} |
|
|
|
@media (max-width: 576px) { |
|
.navbar-brand { |
|
font-size: 1.2rem; |
|
} |
|
} |
|
</style> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script> |
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.3.1/js/bootstrap.min.js"></script> |
|
<script> |
|
(function() { |
|
window.onload = function() { |
|
parent.iframeLoaded(); |
|
} |
|
})(); |
|
try { |
|
$(document).ready(function() { |
|
$('#dataForm').submit(function(e) { |
|
e.preventDefault(); |
|
const input = $('#timeInput').val().trim(); |
|
if (input === "") { |
|
alert("Lütfen zaman girişlerini giriniz."); |
|
return; |
|
} |
|
|
|
const lines = input.split('\n').filter(line => line.trim() !== ""); |
|
const sessions = []; |
|
|
|
|
|
lines.forEach(line => { |
|
const times = line.trim().split(/\s+/); |
|
if (times.length === 2) { |
|
const start = parseTime(times[0]); |
|
const end = parseTime(times[1]); |
|
if (start && end) { |
|
sessions.push({ start, end }); |
|
} |
|
} |
|
}); |
|
|
|
if (sessions.length === 0) { |
|
alert("Geçerli zaman girişleri bulunamadı."); |
|
return; |
|
} |
|
|
|
|
|
const report = calculateWeeklyReport(sessions); |
|
|
|
|
|
displayReport(report); |
|
}); |
|
|
|
function parseTime(timeStr) { |
|
const parts = timeStr.split(':'); |
|
if (parts.length !== 2) return null; |
|
const hours = parseInt(parts[0], 10); |
|
const minutes = parseInt(parts[1], 10); |
|
if (isNaN(hours) || isNaN(minutes)) return null; |
|
|
|
return new Date(2023, 0, 1, hours, minutes); |
|
} |
|
|
|
function calculateWeeklyReport(sessions) { |
|
let totalWorkMinutes = 0; |
|
let overtimeMinutes = 0; |
|
let nightOvertimeMinutes = 0; |
|
let restOvertimeMinutes = 0; |
|
|
|
sessions.forEach(session => { |
|
let duration = (session.end - session.start) / (1000 * 60); |
|
totalWorkMinutes += duration; |
|
|
|
if (duration > 11 * 60) { |
|
overtimeMinutes += duration - 11 * 60; |
|
} |
|
|
|
|
|
if (session.start.getHours() >= 20 || session.end.getHours() <= 6) { |
|
if (duration > 7.5 * 60) { |
|
nightOvertimeMinutes += duration - 7.5 * 60; |
|
} |
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
return { |
|
totalWorkHours: (totalWorkMinutes / 60).toFixed(2), |
|
overtimeHours: (overtimeMinutes / 60).toFixed(2), |
|
nightOvertimeHours: (nightOvertimeMinutes / 60).toFixed(2), |
|
restOvertimeHours: (restOvertimeMinutes / 60).toFixed(2), |
|
dailyDetails: sessions.map((s, index) => ({ |
|
day: `Gün ${index + 1}`, |
|
start: formatTime(s.start), |
|
end: formatTime(s.end), |
|
duration: ( (s.end - s.start) / (1000 * 60) / 60 ).toFixed(2) + ' saat' |
|
})) |
|
}; |
|
} |
|
|
|
function formatTime(date) { |
|
const hours = date.getHours().toString().padStart(2, '0'); |
|
const minutes = date.getMinutes().toString().padStart(2, '0'); |
|
return `${hours}:${minutes}`; |
|
} |
|
|
|
function displayReport(report) { |
|
let html = `<h4>Toplam Çalışma: ${report.totalWorkHours} saat</h4>`; |
|
html += `<h4>Fazla Mesai: ${report.overtimeHours} saat</h4>`; |
|
html += `<h4>Gece Çalışması Fazla Mesai: ${report.nightOvertimeHours} saat</h4>`; |
|
html += `<h4>Hafta Tatili Fazla Mesai: ${report.restOvertimeHours} saat</h4>`; |
|
html += `<hr>`; |
|
html += `<h5>Günlük Detaylar:</h5>`; |
|
html += `<table class="table table-striped"> |
|
<thead> |
|
<tr> |
|
<th>Gün</th> |
|
<th>Başlangıç</th> |
|
<th>Bitiş</th> |
|
<th>Toplam Süre</th> |
|
</tr> |
|
</thead> |
|
<tbody>`; |
|
report.dailyDetails.forEach(detail => { |
|
html += `<tr> |
|
<td>${detail.day}</td> |
|
<td>${detail.start}</td> |
|
<td>${detail.end}</td> |
|
<td>${detail.duration}</td> |
|
</tr>`; |
|
}); |
|
html += `</tbody></table>`; |
|
|
|
$('#reportContent').html(html); |
|
} |
|
}); |
|
} catch (e) { |
|
console.log("Error in JS code", e); |
|
} |
|
</script> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> |
|
</html> |
|
|
