penambahan data penelitian

This commit is contained in:
Naufalakram 2024-04-12 22:07:48 +08:00
parent 4b340095a6
commit c1514a4b2e
26 changed files with 913 additions and 573 deletions

BIN
.DS_Store vendored

Binary file not shown.

BIN
._dataset.json Executable file

Binary file not shown.

5
.gitignore vendored
View File

@ -1,6 +1,5 @@
# env folder
env/
faces/
image1.jpg
image2.jpg
image3.jpg
__pycache__/
*.jpg

View File

@ -1,50 +1,319 @@
[
{
"date": "22/09/2023",
"absensi": [
{
"name": "Aran",
"jam_masuk": "00:04:01",
"jam_keluar": "13:14:01"
}
]
},
{
"date": "22/10/2023",
"absensi": [
{
"name": "Aran",
"jam_masuk": "00:04:01",
"jam_keluar": "13:14:01"
}
]
},
{
"date": "23/11/2023",
"absensi": [
{
"name": "Aran",
"jam_masuk": "00:04:01",
"jam_keluar": "13:14:01"
}
]
},
{
"date": "23/11/2023",
"date": "23/02/2024",
"absensi": [
{
"name": "Naufal",
"jam_masuk": "00:04:01",
"jam_keluar": "13:14:01"
"jam_masuk": "20:28:59",
"jam_keluar": "20:50:27"
},
{
"name": "Aran",
"jam_masuk": "20:29:03",
"jam_keluar": "20:29:06"
}
]
},
{
"date": "25/11/2023",
"date": "27/02/2024",
"absensi": [
{
"name": "Naufal",
"jam_masuk": "16:31:23",
"jam_keluar": "16:31:35"
}
]
},
{
"date": "07/03/2024",
"absensi": [
{
"name": "Aran",
"jam_masuk": "00:14:28"
"jam_masuk": "16:58:46",
"jam_keluar": "17:02:35"
},
{
"name": "Naufal",
"jam_masuk": "16:58:46",
"jam_keluar": "17:02:35"
}
]
},
{
"date": "13/03/2024",
"absensi": [
{
"name": "Naufal",
"jam_masuk": "23:34:34",
"jam_keluar": "23:35:15"
}
]
},
{
"date": "24/03/2024",
"absensi": [
{
"name": "Naufal",
"jam_masuk": "13:09:36",
"jam_keluar": "13:10:54"
}
]
},
{
"date": "25/03/2024",
"absensi": [
{
"name": "Armin",
"jam_masuk": "10:35:37"
},
{
"name": "Naufal",
"jam_masuk": "10:42:31",
"jam_keluar": "12:57:56"
},
{
"name": "Zul",
"jam_masuk": "10:42:42"
},
{
"name": "Ramli",
"jam_masuk": "10:42:58"
},
{
"name": "Dyah",
"jam_masuk": "10:43:15"
},
{
"name": "Radit",
"jam_masuk": "11:03:55"
}
]
},
{
"date": "27/03/2024",
"absensi": [
{
"name": "Armin",
"jam_masuk": "08:51:09",
"jam_keluar": "13:10:15"
},
{
"name": "Dyah",
"jam_masuk": "08:53:23",
"jam_keluar": "13:06:21"
},
{
"name": "Arjun",
"jam_masuk": "08:54:03",
"jam_keluar": "13:10:03"
},
{
"name": "Ayyub",
"jam_masuk": "08:54:35",
"jam_keluar": "13:10:01"
},
{
"name": "Zul",
"jam_masuk": "08:54:45",
"jam_keluar": "13:10:08"
},
{
"name": "Naufal",
"jam_masuk": "09:01:23",
"jam_keluar": "13:11:09"
},
{
"name": "Adit",
"jam_masuk": "09:01:57",
"jam_keluar": "13:09:55"
},
{
"name": "Ramli",
"jam_masuk": "09:07:24",
"jam_keluar": "13:10:12"
},
{
"name": "Radit",
"jam_masuk": "09:24:40",
"jam_keluar": "13:09:58"
},
{
"name": "Adi",
"jam_masuk": "09:24:43",
"jam_keluar": "13:06:34"
}
]
},
{
"date": "28/03/2024",
"absensi": [
{
"name": "Naufal",
"jam_masuk": "11:03:55",
"jam_keluar": "13:48:18"
},
{
"name": "Aran",
"jam_masuk": "11:03:57"
},
{
"name": "Radit",
"jam_masuk": "11:04:12",
"jam_keluar": "13:47:00"
},
{
"name": "Dyah",
"jam_masuk": "11:05:12",
"jam_keluar": "13:47:14"
},
{
"name": "Adi",
"jam_masuk": "11:05:16",
"jam_keluar": "13:47:11"
},
{
"name": "Adit",
"jam_masuk": "11:05:21",
"jam_keluar": "13:47:03"
},
{
"name": "Ayyub",
"jam_masuk": "11:05:28",
"jam_keluar": "13:46:57"
},
{
"name": "Arjun",
"jam_masuk": "11:05:31",
"jam_keluar": "13:46:52"
},
{
"name": "Zul",
"jam_masuk": "11:05:33",
"jam_keluar": "13:48:18"
},
{
"name": "Ramli",
"jam_masuk": "11:05:36",
"jam_keluar": "13:46:36"
},
{
"name": "Armin",
"jam_masuk": "11:05:38",
"jam_keluar": "13:46:29"
}
]
},
{
"date": "29/03/2024",
"absensi": [
{
"name": "Radit",
"jam_masuk": "10:30:09",
"jam_keluar": "16:05:32"
},
{
"name": "Naufal",
"jam_masuk": "10:30:09",
"jam_keluar": "16:04:09"
},
{
"name": "Dyah",
"jam_masuk": "10:34:38",
"jam_keluar": "16:06:05"
},
{
"name": "Adit",
"jam_masuk": "10:34:52",
"jam_keluar": "16:06:03"
},
{
"name": "Adi",
"jam_masuk": "10:34:56",
"jam_keluar": "16:05:40"
},
{
"name": "Arjun",
"jam_masuk": "10:35:08",
"jam_keluar": "16:05:19"
},
{
"name": "Zul",
"jam_masuk": "10:35:24",
"jam_keluar": "16:05:12"
},
{
"name": "Armin",
"jam_masuk": "10:35:34",
"jam_keluar": "16:05:02"
},
{
"name": "Ramli",
"jam_masuk": "10:35:38",
"jam_keluar": "16:05:06"
},
{
"name": "Ayyub",
"jam_masuk": "10:36:00",
"jam_keluar": "16:05:26"
}
]
},
{
"date": "03/04/2024",
"absensi": [
{
"name": "Naufal",
"jam_masuk": "10:15:09",
"jam_keluar": "15:04:09"
},
{
"name": "Radit",
"jam_masuk": "10:15:11",
"jam_keluar": "15:04:26"
},
{
"name": "Armin",
"jam_masuk": "10:15:29",
"jam_keluar": "15:04:10"
},
{
"name": "Dyah",
"jam_masuk": "10:15:30",
"jam_keluar": "15:04:35"
},
{
"name": "Ramli",
"jam_masuk": "10:16:08",
"jam_keluar": "15:04:15"
},
{
"name": "Ayyub",
"jam_masuk": "10:17:00",
"jam_keluar": "15:04:29"
},
{
"name": "Aran",
"jam_masuk": "10:20:02"
},
{
"name": "Zul",
"jam_masuk": "10:20:34",
"jam_keluar": "15:04:23"
},
{
"name": "Adi",
"jam_masuk": "10:26:48",
"jam_keluar": "15:04:38"
},
{
"name": "Arjun",
"jam_masuk": "10:28:08",
"jam_keluar": "15:04:20"
},
{
"name": "Adit",
"jam_masuk": "10:30:32",
"jam_keluar": "15:04:31"
}
]
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -1 +1 @@
[{"name": "Naufal", "nik": "1", "gaji": 50000}, {"name": "Aran", "nik": "12345", "gaji": 20000}]
[{"name": "Naufal", "nik": "1", "gaji": 50000}, {"name": "Armin", "nik": "7372033007880005", "gaji": 50000}, {"name": "Dyah", "nik": "7372017112850107", "gaji": 50000}, {"name": "Ramli", "nik": "7372011502720001", "gaji": 50000}, {"name": "Zul", "nik": "7372012010010006", "gaji": 30000}, {"name": "Ayyub", "nik": "7372032007840005", "gaji": 50000}, {"name": "Adit", "nik": "7372021506960009", "gaji": 100000}, {"name": "Arjun", "nik": "73720416604010002", "gaji": 50000}, {"name": "Radit", "nik": "7372043112880024", "gaji": 50000}, {"name": "Adi", "nik": "7372041012970004", "gaji": 50000}]

View File

@ -1,8 +1,10 @@
from flask import Flask, render_template , request
from flask import Flask, render_template , request,send_from_directory, abort
import subprocess
import threading
import json
import time
from werkzeug.utils import secure_filename
import os
dataset = "dataset.json"
absensi = "absensi.json"
@ -60,6 +62,14 @@ def home():
return render_template('index.html', data=all_data, length=len_all_data, today_date=today_date)
@app.route('/faces/<path:filename>')
def serve_image(filename):
try:
return send_from_directory('faces', filename)
except FileNotFoundError:
abort(404)
@app.route('/cek_absensi')
def cek_absensi():
today_date = time.strftime("%d/%m/%Y")
@ -150,9 +160,14 @@ def tambah_karyawan_post():
nama = request.form['nama']
nik = request.form['nik']
gaji = int(request.form['gaji'])
foto = request.files['file']
# print(nama)
# print(nik)
if foto:
foto_filename = secure_filename(nama + '.jpg')
foto.save(os.path.join('faces', foto_filename))
# open the dataset file
with open(dataset, 'r') as f:
data = json.load(f)

View File

@ -16,7 +16,7 @@ today_date = time.strftime("%d/%m/%Y")
with open(absensi_file, 'r') as f:
data = json.load(f)
def face_confidence(face_distance, face_match_threshold=0.6):
def face_confidence(face_distance, face_match_threshold=0.6): #jika nilai face distance lebih kecil dari 0.6
range = (1.0 - face_match_threshold)
linear_val = (1.0 - face_distance) / (range * 2.0)
@ -26,6 +26,7 @@ def face_confidence(face_distance, face_match_threshold=0.6):
value = (linear_val + ((1.0 - linear_val) * math.pow((linear_val - 0.5) * 2, 0.2))) * 100
return str(round(value, 2)) + "%"
# melakukan fungsi face recognition
class FaceRecognition:
face_locations = []
face_encodings = []
@ -59,7 +60,7 @@ class FaceRecognition:
sys.exit('Video capture is not opened')
no_face_timer = 0
no_face_threshold = 5 # Adjust this to your desired timeout in seconds
no_face_threshold = 60 # Adjust this to your desired timeout in seconds
while True:
ret, frame = video_capture.read()

View File

@ -1,7 +1,8 @@
# daftar karyawan baru menggunakan haarcascade
import cv2
import json
dataset = "dataset.json"
dataset = "dataset.json" # dataset karyawan
@ -24,6 +25,7 @@ cv2.namedWindow('Image Capture', cv2.WINDOW_NORMAL)
# Set the window to full screen
cv2.setWindowProperty('Image Capture', cv2.WND_PROP_FULLSCREEN, cv2.WINDOW_FULLSCREEN)
face_cascade = cv2.CascadeClassifier(cv2.data.haarcascades + 'haarcascade_frontalface_default.xml')
while True:

View File

@ -51,14 +51,14 @@
<div id="wrapper">
<div class="main-content container">
<div class="row small-spacing">
<!-- <div class="row small-spacing">
<div class="col-lg-4 col-md-4 col-xs-6">
<div class="box-content bg-success text-white" style="background :grey;cursor: pointer;"
onclick="goto('home')">
<h4 class="box-title">Halaman Utama</h4>
</div>
<!-- /.box-content -->
</div>
<div class="col-lg-4 col-md-4 col-xs-6">
<div class="box-content bg-info text-white" style="background :grey;cursor: pointer"
@ -66,9 +66,9 @@
<h4 class=" box-title">Tambah Data Karyawan</h4>
</div>
<!-- /.box-content -->
</div>
</div>
</div> -->
<!-- create a button on center of this -->
<div class="row small-spacing text-center">
<a href="{{url_for('scan_face')}}" class="btn btn-primary btn-bordered waves-effect waves-light">Lakukan
@ -127,7 +127,7 @@
<footer class="footer">
<ul class="list-inline">
<li>2023 © Naufal.</li>
<li>2024 ©CV.TIRTA RAHMAN PAREPARE.</li>
<!-- <li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Help</a></li> -->

View File

@ -2,30 +2,30 @@
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sistem Absensi - Halaman Utama</title>
<title>Sistem Absensi - Cek Absensi</title>
<!-- Main Styles -->
<link rel="stylesheet" href="assets/styles/style-horizontal.min.css">
<link rel="stylesheet" href="assets/styles/style-horizontal.min.css" />
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css" />
<!-- Waves Effect -->
<link rel="stylesheet" href="assets/plugin/waves/waves.min.css">
<link rel="stylesheet" href="assets/plugin/waves/waves.min.css" />
<!-- Sweet Alert -->
<link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css">
<link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css" />
<!-- Color Picker -->
<link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css">
<link rel="stylesheet" href="assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css" />
<link rel="stylesheet" href="assets/plugin/datatables/media/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css" />
</head>
<body>
@ -47,11 +47,8 @@
</header>
<!-- /.fixed-header -->
<div id="wrapper">
<div class="main-content container">
<div class="row small-spacing">
<div class="col-xs-2 col-md-2"></div>
<div class="col-xs-8 col-md-8">
@ -64,13 +61,10 @@
<td><b>Nama</b></td>
<td><b>Jam Masuk</b></td>
<td><b>Jam Keluar</b></td>
</tr>
</thead>
<tbody>
{%if data %}
{% for i in range(0, length) %}
{%if data %} {% for i in range(0, length) %}
<tr>
<td>{{data[i]['name']}}</td>
@ -83,22 +77,17 @@
<td>-</td>
{% endif %}
</tr>
{% endfor %}
{% else %}
{% endfor %} {% else %}
<tr>
<td colspan="3" class="text-center">Tidak ada data</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2"></div>
</div>
<div class="row small-spacing">
@ -114,13 +103,10 @@
<td><b>Gaji/Hari</b></td>
<td><b>Pendapatan/Bulan</b></td>
<td><b>Aksi</b></td>
</tr>
</thead>
<tbody>
{%if data_karyawan %}
{% for i in range(0, length_karyawan) %}
{%if data_karyawan %} {% for i in range(0, length_karyawan) %}
<tr>
<td>{{data_karyawan[i]['name']}}</td>
@ -133,31 +119,23 @@
onclick="printDiv(`{{data_karyawan[i]['name']}}`,`{{data_karyawan[i]['gaji']}}`,`{{data_karyawan[i]['pendapatan']}}`)">Print
Slip Gaji</button>
</td>
</tr>
{% endfor %}
{% else %}
{% endfor %} {% else %}
<tr>
<td colspan="3" class="text-center">Tidak ada data</td>
</tr>
{% endif %}
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2"></div>
</div>
<footer class="footer">
<ul class="list-inline">
<li>2023 © Naufal.</li>
<li>2024 ©CV.TIRTA RAHMAN PAREPARE.</li>
<!-- <li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Help</a></li> -->
@ -165,7 +143,8 @@
</footer>
</div>
<!-- /.main-content -->
</div><!--/#wrapper -->
</div>
<!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/script/html5shiv.min.js"></script>
@ -191,9 +170,9 @@
<script src="assets/scripts/main.min.js"></script>
<script>
function goto(stat) {
if (stat == 'home') {
if (stat == "home") {
window.location.href = "{{url_for('home')}}";
} else if (stat == 'tambah_karyawan') {
} else if (stat == "tambah_karyawan") {
window.location.href = "{{url_for('tambah_karyawan')}}";
}
}
@ -204,55 +183,79 @@
let numStr = number.toString();
// Use a regular expression to add commas as thousand separators
numStr = numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
numStr = numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return numStr;
}
// Get all <td> elements with the class "ini dia"
const tdElements = document.querySelectorAll('td.gajinya');
const tdElements = document.querySelectorAll("td.gajinya");
// Iterate through each <td> element
tdElements.forEach(td => {
tdElements.forEach((td) => {
// Get the current value of the <td>
let currentValue = parseFloat(td.textContent);
// Check if the value is a valid number
if (!isNaN(currentValue)) {
// Update the content of the <td> with the formatted value
td.textContent = 'Rp. ' + addThousandSeparator(currentValue);
td.textContent = "Rp. " + addThousandSeparator(currentValue);
}
});
function addThousandSeparators(value) {
return value.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function printDiv(name, gaji, pendapatan) {
console.log(name, gaji, pendapatan);
var printWindow = window.open('', '', 'height=400,width=800');
printWindow.document.write('<html><head><title>DIV Contents</title>');
printWindow.document.write('</head><body >');
printWindow.document.write('<h1>Slip Gaji</h1>');
printWindow.document.write('<p>Nama : ' + name + '</p>');
printWindow.document.write('<p>Gaji : Rp.' + addThousandSeparator(gaji) + '</p>');
printWindow.document.write('<p>Pendapatan : Rp. ' + addThousandSeparator(pendapatan) + '</p>');
printWindow.document.write('<p>Tanggal : {{today_date}}</p>');
printWindow.document.write('<p>Terima kasih atas kerja keras anda</p>');
// ttd
printWindow.document.write('<br><br><br><br>');
printWindow.document.write('<p>TTD</p>');
printWindow.document.write('<p>Naufal</p>');
printWindow.document.write('</body></html>');
var this_month = getMonthName(new Date().getMonth()); // Get the current month name
var printWindow = window.open("", "", "height=600,width=400");
printWindow.document.write("<html><head><title>Slip Gaji Bulan " + this_month + "</title>");
printWindow.document.write("<style>");
printWindow.document.write("body { font-family: Arial, sans-serif; }");
printWindow.document.write(".header { text-align: center; margin-bottom: 20px; }");
printWindow.document.write(".line { border-top: 2px solid #000; margin-bottom: 20px; }");
printWindow.document.write(".content { display: flex; align-items: flex-start; margin-bottom: 20px; }");
printWindow.document.write(".content img { width: 110px; height: 160px; margin-right: 20px; }");
printWindow.document.write(".footer { display: flex; justify-content: space-between; margin-top: 20px; }");
printWindow.document.write(".footer p { margin: 0; }");
printWindow.document.write(".signature { margin-top: 40px; text-align: right; }");
printWindow.document.write("</style>");
printWindow.document.write("</head><body>");
printWindow.document.write("<div class='header'><h1>Slip Gaji Bulan " + this_month + "</h1></div>");
printWindow.document.write("<div class='line'></div>");
printWindow.document.write("<div class='content'>");
printWindow.document.write("<img src='https://absensi_karyawan.kicap-karan.com/faces/" + name + ".jpg' alt='Foto Karyawan'>");
printWindow.document.write("<div>");
printWindow.document.write("<p>Nama: " + name + "</p>");
printWindow.document.write("<p>Gaji: Rp." + addThousandSeparator(gaji) + "</p>");
printWindow.document.write("<p>Pendapatan: Rp. " + addThousandSeparator(pendapatan) + "</p>");
printWindow.document.write("<p>Tanggal: {{today_date}}</p>");
printWindow.document.write("</div>");
printWindow.document.write("</div>");
printWindow.document.write("<p>Terima kasih atas kerja keras Anda</p>");
printWindow.document.write("<div class='line'></div>");
printWindow.document.write("<br><br><br><br>");
printWindow.document.write("<div class='footer'>");
printWindow.document.write("<div class='left-signature'>");
printWindow.document.write("<hr>");
printWindow.document.write("<p>Tanda Tangan " + name + "</p>");
printWindow.document.write("</div>");
printWindow.document.write("<div class='right-signature'>");
printWindow.document.write("<hr>");
printWindow.document.write("<p>Tanda Tangan Pimpinan</p>");
printWindow.document.write("</div>");
printWindow.document.write("</div>");
printWindow.document.write("</body></html>");
printWindow.document.close();
printWindow.print();
}
</script>
function getMonthName(month) {
var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
return months[month];
}
</script>
</body>
</html>

View File

@ -1,29 +1,28 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sistem Absensi - Halaman Utama</title>
<title>Sistem Absensi - Halaman Scan</title>
<!-- Main Styles -->
<link rel="stylesheet" href="assets/styles/style-horizontal.min.css">
<link rel="stylesheet" href="assets/styles/style-horizontal.min.css" />
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css" />
<!-- Waves Effect -->
<link rel="stylesheet" href="assets/plugin/waves/waves.min.css">
<link rel="stylesheet" href="assets/plugin/waves/waves.min.css" />
<!-- Sweet Alert -->
<link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css">
<link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css" />
<!-- Color Picker -->
<link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css">
<link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css" />
</head>
<body>
@ -45,24 +44,18 @@
</header>
<!-- /.fixed-header -->
<div id="wrapper">
<div class="main-content container">
<div class="row small-spacing">
<div class="col-lg-4 col-md-4 col-xs-12">
<div class="box-content bg-warning text-white">
<h4 class="box-title">Loading...</h4>
</div>
<!-- /.box-content -->
</div>
</div>
<!-- create a button on center of this -->
<footer class="footer">
<ul class="list-inline">
<li>2023 © Naufal.</li>
@ -73,7 +66,8 @@
</footer>
</div>
<!-- /.main-content -->
</div><!--/#wrapper -->
</div>
<!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/script/html5shiv.min.js"></script>
@ -98,14 +92,14 @@
$.blockUI({
message: "Sedang Proses Database",
css: {
border: 'none',
padding: '15px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .5,
color: '#fff'
}
border: "none",
padding: "15px",
backgroundColor: "#000",
"-webkit-border-radius": "10px",
"-moz-border-radius": "10px",
opacity: 0.5,
color: "#fff",
},
});
function checkScanStatus() {
// Make an AJAX request to the /scan_status route
@ -124,14 +118,12 @@
error: function (xhr, status, error) {
// Handle errors
console.log("Error: " + error);
}
},
});
}
// Periodically check the scan status every 2 seconds
setInterval(checkScanStatus, 2000);
</script>
</body>
</html>

View File

@ -1,32 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<meta name="description" content="">
<meta name="author" content="">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<meta name="description" content="" />
<meta name="author" content="" />
<title>Sistem Absensi - Halaman Tambah Karyawan</title>
<!-- Main Styles -->
<link rel="stylesheet" href="assets/styles/style-horizontal.min.css">
<link rel="stylesheet" href="assets/styles/style-horizontal.min.css" />
<!-- mCustomScrollbar -->
<link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css">
<link rel="stylesheet" href="assets/plugin/mCustomScrollbar/jquery.mCustomScrollbar.min.css" />
<!-- Waves Effect -->
<link rel="stylesheet" href="assets/plugin/waves/waves.min.css">
<link rel="stylesheet" href="assets/plugin/waves/waves.min.css" />
<!-- Sweet Alert -->
<link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css">
<link rel="stylesheet" href="assets/plugin/sweet-alert/sweetalert.css" />
<!-- Color Picker -->
<link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css">
<link rel="stylesheet" href="assets/color-switcher/color-switcher.min.css" />
<!-- Data Tables -->
<link rel="stylesheet" href="assets/plugin/datatables/media/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css">
<link rel="stylesheet" href="assets/plugin/datatables/media/css/dataTables.bootstrap.min.css" />
<link rel="stylesheet" href="assets/plugin/datatables/extensions/Responsive/css/responsive.bootstrap.min.css" />
#preview { max-width: 300px; max-height: 300px; margin-top: 20px; }
</head>
<body>
@ -48,65 +48,77 @@
</header>
<!-- /.fixed-header -->
<div id="wrapper">
<div class="main-content container">
<div class="row small-spacing">
<!-- <div class="row small-spacing">
<div class="col-lg-4 col-md-4 col-xs-6">
<div class="box-content bg-success text-white" style="background :grey;cursor: pointer;"
onclick="goto('home')">
<h4 class="box-title">Halaman Utama</h4>
</div>
<!-- /.box-content -->
</div>
<div class="col-lg-4 col-md-4 col-xs-6">
<div class="box-content bg-info text-white" style="background :grey;cursor: pointer"
onclick="goto('tambah_karyawan')"">
onclick="goto('tambah_karyawan')">
<h4 class=" box-title">Tambah Data Karyawan</h4>
</div>
<!-- /.box-content -->
</div>
</div>
</div> -->
<!-- create a button on center of this -->
<div class="row small-spacing">
<div class="col-lg-4 col-md-4 col-xs-2"></div>
<div class="col-lg-4 col-md-4 col-xs-8">
<div class="col-lg-2 col-md-2 col-xs-2"></div>
<div class="col-lg-8 col-md-8 col-xs-8">
<div class="box-content">
<h4 class="box-title">Informasi Karyawan</h4>
<div class="card-content">
<form>
<div class="form-group">
<label for="nik">Nomor Induk Karyawan</label>
<input type="text" class="form-control" id="nik" name="nik"
placeholder="Masukkan Nomor Induk Karyawan">
<input type="text" class="form-control" id="nik" name="nik" placeholder="Masukkan Nomor Induk Karyawan" />
</div>
<div class="form-group">
<label for="nik">Nama Karyawan</label>
<input type="text" class="form-control" id="nama" name="nama"
placeholder="Masukkan Nama Karyawan">
<input type="text" class="form-control" id="nama" name="nama" placeholder="Masukkan Nama Karyawan" />
</div>
<div class="form-group">
<label for="nik">Gaji Karyawan / Hari</label>
<input type="text" class="form-control" id="gaji" name="gaji"
<input
type="text"
class="form-control"
id="gaji"
name="gaji"
oninput="this.value = this.value.replace(/[^0-9]/g, '').replace(/\B(?=(\d{3})+(?!\d))/g, ',');"
placeholder="Masukkan Gaji/Hari Karyawan" minlength="6" maxlength="7">
placeholder="Masukkan Gaji/Hari Karyawan"
minlength="6"
maxlength="7"
/>
</div>
<div class="form-group">
<label for="nik">Foto Karyawan</label>
<input type="file" class="form-control" id="fileInput" name="fileInput" accept="image/*" onchange="previewImage(event)" />
<!-- <div id="imageDisplay"></div> -->
</div>
<div class="form-group" id="div-preview" style="display: none">
<center>
<div id="preview" style="height: 250px; width: 150px"></div>
</center>
</div>
<div class="form-group text-center">
<button type="button" onclick="tambah_data()"
class="btn btn-primary btn-sm waves-effect waves-light">
Submit
</button>
<button type="button" onclick="tambah_data()" class="btn btn-primary btn-sm waves-effect waves-light">Submit</button>
</div>
</form>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-xs-2"></div>
<div class="col-lg-2 col-md-2 col-xs-2"></div>
</div>
<div class="row small-spacing">
@ -122,13 +134,10 @@
<td><b>NIK</b></td>
<td><b>Nama</b></td>
<td><b>Gaji/Hari</b></td>
</tr>
</thead>
<tbody>
{%if data %}
{% for i in range(0, length) %}
{%if data %} {% for i in range(0, length) %}
<tr>
<td>{{i+1}}</td>
@ -136,25 +145,18 @@
<td>{{data[i]['name']}}</td>
<td class="gajinya">{{data[i]['gaji']}}</td>
</tr>
{% endfor %}
{% endif %}
{% endfor %} {% endif %}
</tbody>
</table>
</div>
</div>
</div>
<div class="col-xs-2 col-md-2"></div>
</div>
<footer class="footer">
<ul class="list-inline">
<li>2023 © Naufal.</li>
<li>2024 © CV.TIRTA RAHMAN PAREPARE.</li>
<!-- <li><a href="#">Privacy</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Help</a></li> -->
@ -162,7 +164,8 @@
</footer>
</div>
<!-- /.main-content -->
</div><!--/#wrapper -->
</div>
<!--/#wrapper -->
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="assets/script/html5shiv.min.js"></script>
@ -187,46 +190,105 @@
<script src="assets/scripts/main.min.js"></script>
<script>
function previewImage(event) {
var file = event.target.files[0];
// Check if the file is an image
if (file && file.type.startsWith("image/")) {
var reader = new FileReader();
reader.onload = function () {
var imgElement = document.createElement("img");
imgElement.setAttribute("src", reader.result);
imgElement.setAttribute("alt", "Preview Image");
var previewDiv = document.getElementById("preview");
previewDiv.innerHTML = "";
previewDiv.appendChild(imgElement);
document.getElementById("div-preview").style.display = "block";
document.getElementById("preview").style.display = "block";
// // Display the image in a separate div
// var imageDisplayDiv = document.getElementById('imageDisplay');
// imageDisplayDiv.innerHTML = '';
// var imgClone = imgElement.cloneNode(true);
// imageDisplayDiv.appendChild(imgClone);
};
reader.readAsDataURL(file);
} else {
alert("Please select an image file.");
document.getElementById("fileInput").value = ""; // Clear the input
document.getElementById("preview").innerHTML = "";
document.getElementById("preview").style.display = "none";
document.getElementById("div-preview").style.display = "none";
}
}
function goto(stat) {
if (stat == 'home') {
if (stat == "home") {
window.location.href = "{{url_for('home')}}";
} else if (stat == 'tambah_karyawan') {
} else if (stat == "tambah_karyawan") {
window.location.href = "{{url_for('tambah_karyawan')}}";
}
}
function tambah_data() {
var nik = $('#nik').val();
var nama = $('#nama').val();
var gaji = $('#gaji').val();
if (nik == '' || nama == '' || gaji == '') {
var nik = $("#nik").val();
var nama = $("#nama").val();
var gaji = $("#gaji").val();
var fileInput = document.getElementById("fileInput");
if (nik == "" || nama == "" || gaji == "") {
swal({
title: "Gagal",
text: "Data tidak boleh kosong",
type: "error",
confirmButtonClass: "btn-danger",
confirmButtonText: "Ok",
closeOnConfirm: false
closeOnConfirm: false,
});
} else if (!fileInput.files || fileInput.files.length === 0) {
swal({
title: "Gagal",
text: "Silakan pilih foto karyawan",
type: "error",
confirmButtonClass: "btn-danger",
confirmButtonText: "Ok",
closeOnConfirm: false,
});
} else {
// remove comma from gaji
gaji = gaji.replace(/,/g, '');
gaji = gaji.replace(/,/g, "");
var file = fileInput.files[0];
var formData = new FormData();
formData.append("file", file);
formData.append("nik", nik);
formData.append("nama", nama);
formData.append("gaji", gaji);
$.ajax({
url: "http://127.0.0.1:5000/tambah_karyawan",
url: "https://absensi_karyawan.kicap-karan.com/tambah_karyawan",
type: "POST",
data: {
nik: nik,
nama: nama,
gaji: gaji
},
data: formData,
contentType: false,
processData: false,
success: function (data) {
// console.log(data)
window.location.href = "{{url_for('scan_face2')}}";
console.log(data);
// window.location.href = "{{url_for('scan_face2')}}";
// create swal message
swal({
title: "Berhasil",
text: "Data karyawan berhasil ditambahkan",
type: "success",
confirmButtonClass: "btn-success",
});
// delay 1.5 seconds then reload this page
setTimeout(function () {
window.location.href = "{{url_for('tambah_karyawan')}}";
}, 1500);
},
error: function (jqXhr, textStatus, errorThrown) {
console.log(errorThrown);
}
},
});
}
}
@ -237,28 +299,25 @@
let numStr = number.toString();
// Use a regular expression to add commas as thousand separators
numStr = numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
numStr = numStr.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
return numStr;
}
// Get all <td> elements with the class "ini dia"
const tdElements = document.querySelectorAll('td.gajinya');
const tdElements = document.querySelectorAll("td.gajinya");
// Iterate through each <td> element
tdElements.forEach(td => {
tdElements.forEach((td) => {
// Get the current value of the <td>
let currentValue = parseFloat(td.textContent);
// Check if the value is a valid number
if (!isNaN(currentValue)) {
// Update the content of the <td> with the formatted value
td.textContent = 'Rp. ' + addThousandSeparator(currentValue);
td.textContent = "Rp. " + addThousandSeparator(currentValue);
}
});
</script>
</body>
</html>

View File