1427 lines
46 KiB
Python
1427 lines
46 KiB
Python
from html import escape
|
|
from pathlib import Path
|
|
import sys
|
|
from urllib.parse import quote, unquote
|
|
|
|
from fastapi import FastAPI, Form, HTTPException, Query
|
|
from fastapi.responses import HTMLResponse, RedirectResponse
|
|
|
|
|
|
BASE_DIR = Path(__file__).resolve().parent
|
|
PROJECT_DIR = BASE_DIR.parent
|
|
ML_DIR = PROJECT_DIR / "ml"
|
|
|
|
if str(ML_DIR) not in sys.path:
|
|
sys.path.append(str(ML_DIR))
|
|
|
|
from database import ( # noqa: E402
|
|
create_user,
|
|
delete_prediction_result,
|
|
delete_user,
|
|
get_database_label,
|
|
get_prediction_result,
|
|
get_user_by_id,
|
|
init_db,
|
|
list_prediction_results,
|
|
list_users,
|
|
save_prediction_result,
|
|
update_prediction_result,
|
|
update_user,
|
|
)
|
|
|
|
|
|
app = FastAPI(title="ConfiVoice Admin Web")
|
|
|
|
|
|
@app.on_event("startup")
|
|
def startup():
|
|
init_db()
|
|
|
|
|
|
@app.get("/")
|
|
def read_root():
|
|
return {
|
|
"name": "ConfiVoice Admin Web",
|
|
"status": "ok",
|
|
"admin_page": "/admin",
|
|
"database": get_database_label(),
|
|
}
|
|
|
|
|
|
@app.get("/predictions")
|
|
def read_predictions(limit: int = 500):
|
|
return {
|
|
"database": get_database_label(),
|
|
"data": list_prediction_results(limit=limit),
|
|
}
|
|
|
|
|
|
@app.post("/admin/predictions")
|
|
def create_prediction_from_admin(
|
|
student_name: str = Form(...),
|
|
student_gender: str = Form(""),
|
|
predicted_label: str = Form("PD"),
|
|
description: str = Form(""),
|
|
confidence_percent: float = Form(0),
|
|
probability_pd_percent: float = Form(0),
|
|
probability_tpd_percent: float = Form(0),
|
|
is_valid_audio: str = Form("1"),
|
|
error_message: str = Form(""),
|
|
audio_duration: float = Form(0),
|
|
):
|
|
student_name = student_name.strip()
|
|
if not student_name:
|
|
raise HTTPException(status_code=400, detail="Nama siswa/i wajib diisi.")
|
|
|
|
save_prediction_result(
|
|
student_name,
|
|
_result_payload(
|
|
predicted_label=predicted_label,
|
|
student_gender=student_gender,
|
|
description=description,
|
|
confidence_percent=confidence_percent,
|
|
probability_pd_percent=probability_pd_percent,
|
|
probability_tpd_percent=probability_tpd_percent,
|
|
is_valid_audio=is_valid_audio,
|
|
error_message=error_message,
|
|
audio_duration=audio_duration,
|
|
),
|
|
)
|
|
return _redirect_admin()
|
|
|
|
|
|
@app.get("/admin/predictions/new", response_class=HTMLResponse)
|
|
def read_new_prediction_page():
|
|
return _html_page(
|
|
title="Tambah Data",
|
|
active="prediction-new",
|
|
content=f"""
|
|
<section class="page-head">
|
|
<div>
|
|
<h1>Tambah Data</h1>
|
|
<p>Tambahkan hasil analisis secara manual jika diperlukan.</p>
|
|
</div>
|
|
</section>
|
|
<section class="panel">
|
|
{_prediction_form(action="/admin/predictions", submit_label="Tambah Data")}
|
|
</section>
|
|
""",
|
|
)
|
|
|
|
|
|
@app.get("/admin/predictions/{prediction_id}/edit", response_class=HTMLResponse)
|
|
def read_edit_prediction_page(prediction_id: int):
|
|
row = get_prediction_result(prediction_id)
|
|
if row is None:
|
|
raise HTTPException(status_code=404, detail="Data tidak ditemukan.")
|
|
|
|
return _html_page(
|
|
title=f"Edit Data #{prediction_id}",
|
|
active="dashboard",
|
|
content=f"""
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>Edit Data #{prediction_id}</h2>
|
|
<p>Ubah hasil analisis yang tersimpan di admin.</p>
|
|
</div>
|
|
<a class="button secondary" href="/admin">Kembali</a>
|
|
</div>
|
|
{_prediction_form(row=row, action=f"/admin/predictions/{prediction_id}/edit", submit_label="Simpan Perubahan")}
|
|
</section>
|
|
""",
|
|
)
|
|
|
|
|
|
@app.post("/admin/predictions/{prediction_id}/edit")
|
|
def update_prediction_from_admin(
|
|
prediction_id: int,
|
|
student_name: str = Form(...),
|
|
student_gender: str = Form(""),
|
|
predicted_label: str = Form("PD"),
|
|
description: str = Form(""),
|
|
confidence_percent: float = Form(0),
|
|
probability_pd_percent: float = Form(0),
|
|
probability_tpd_percent: float = Form(0),
|
|
is_valid_audio: str = Form("1"),
|
|
error_message: str = Form(""),
|
|
audio_duration: float = Form(0),
|
|
):
|
|
student_name = student_name.strip()
|
|
if not student_name:
|
|
raise HTTPException(status_code=400, detail="Nama siswa/i wajib diisi.")
|
|
|
|
updated = update_prediction_result(
|
|
prediction_id,
|
|
_db_values(
|
|
student_name=student_name,
|
|
student_gender=student_gender,
|
|
predicted_label=predicted_label,
|
|
description=description,
|
|
confidence_percent=confidence_percent,
|
|
probability_pd_percent=probability_pd_percent,
|
|
probability_tpd_percent=probability_tpd_percent,
|
|
is_valid_audio=is_valid_audio,
|
|
error_message=error_message,
|
|
audio_duration=audio_duration,
|
|
),
|
|
)
|
|
if not updated:
|
|
raise HTTPException(status_code=404, detail="Data tidak ditemukan.")
|
|
|
|
return _redirect_admin()
|
|
|
|
|
|
@app.post("/admin/predictions/{prediction_id}/delete")
|
|
def delete_prediction_from_admin(prediction_id: int):
|
|
delete_prediction_result(prediction_id)
|
|
return _redirect_admin()
|
|
|
|
|
|
@app.get("/admin/users", response_class=HTMLResponse)
|
|
def read_users_page():
|
|
users = list_users(limit=500)
|
|
return _html_page(
|
|
title="Tambah User",
|
|
active="users",
|
|
content=f"""
|
|
<section class="page-head">
|
|
<div>
|
|
<h1>Tambah User</h1>
|
|
<p>Kelola akun guru atau pengguna aplikasi ConfiVoice.</p>
|
|
</div>
|
|
</section>
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>Tambah User</h2>
|
|
<p>Username akan disimpan huruf kecil, password disimpan sebagai hash.</p>
|
|
</div>
|
|
</div>
|
|
{_user_form(action="/admin/users", submit_label="Tambah User", password_required=True)}
|
|
</section>
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>CRUD User</h2>
|
|
<p>Edit atau hapus user yang sudah terdaftar.</p>
|
|
</div>
|
|
</div>
|
|
{_user_table(users)}
|
|
</section>
|
|
""",
|
|
)
|
|
|
|
|
|
@app.post("/admin/users")
|
|
def create_user_from_admin(
|
|
full_name: str = Form(...),
|
|
username: str = Form(...),
|
|
password: str = Form(...),
|
|
):
|
|
full_name = full_name.strip()
|
|
username = username.strip()
|
|
password = password.strip()
|
|
if not full_name or not username or not password:
|
|
raise HTTPException(status_code=400, detail="Nama, username, dan password wajib diisi.")
|
|
|
|
try:
|
|
create_user(full_name, username, password)
|
|
except Exception as error:
|
|
raise HTTPException(
|
|
status_code=400,
|
|
detail="Username sudah dipakai atau data user tidak valid.",
|
|
) from error
|
|
return RedirectResponse(url="/admin/users", status_code=303)
|
|
|
|
|
|
@app.get("/admin/users/{user_id}/edit", response_class=HTMLResponse)
|
|
def read_edit_user_page(user_id: int):
|
|
user = get_user_by_id(user_id)
|
|
if user is None:
|
|
raise HTTPException(status_code=404, detail="User tidak ditemukan.")
|
|
|
|
return _html_page(
|
|
title=f"Edit User #{user_id}",
|
|
active="users",
|
|
content=f"""
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>Edit User #{user_id}</h2>
|
|
<p>Kosongkan password jika tidak ingin mengganti password.</p>
|
|
</div>
|
|
<a class="button secondary" href="/admin/users">Kembali</a>
|
|
</div>
|
|
{_user_form(row=user, action=f"/admin/users/{user_id}/edit", submit_label="Simpan User")}
|
|
</section>
|
|
""",
|
|
)
|
|
|
|
|
|
@app.post("/admin/users/{user_id}/edit")
|
|
def update_user_from_admin(
|
|
user_id: int,
|
|
full_name: str = Form(...),
|
|
username: str = Form(...),
|
|
password: str = Form(""),
|
|
):
|
|
full_name = full_name.strip()
|
|
username = username.strip()
|
|
if not full_name or not username:
|
|
raise HTTPException(status_code=400, detail="Nama dan username wajib diisi.")
|
|
|
|
try:
|
|
updated = update_user(user_id, full_name, username, password)
|
|
except Exception as error:
|
|
raise HTTPException(
|
|
status_code=400,
|
|
detail="Username sudah dipakai atau data user tidak valid.",
|
|
) from error
|
|
if not updated:
|
|
raise HTTPException(status_code=404, detail="User tidak ditemukan.")
|
|
return RedirectResponse(url="/admin/users", status_code=303)
|
|
|
|
|
|
@app.post("/admin/users/{user_id}/delete")
|
|
def delete_user_from_admin(user_id: int):
|
|
delete_user(user_id)
|
|
return RedirectResponse(url="/admin/users", status_code=303)
|
|
|
|
|
|
@app.get("/admin/logout", response_class=HTMLResponse)
|
|
def read_logout_page():
|
|
return _html_page(
|
|
title="Logout",
|
|
active="logout",
|
|
content="""
|
|
<section class="panel logout-panel">
|
|
<h1>Logout</h1>
|
|
<p>Sesi admin ditutup. Saat ini web admin belum memakai session login khusus, jadi halaman ini menjadi pintu keluar visual.</p>
|
|
<a class="button" href="/admin">Kembali ke Dashboard</a>
|
|
</section>
|
|
""",
|
|
)
|
|
|
|
|
|
@app.get("/admin/students/{student_name}", response_class=HTMLResponse)
|
|
def read_student_predictions_page(student_name: str):
|
|
decoded_name = unquote(student_name)
|
|
rows = [
|
|
row
|
|
for row in list_prediction_results(limit=500)
|
|
if row["student_name"] == decoded_name
|
|
]
|
|
total = len(rows)
|
|
pd_count = sum(1 for row in rows if row["predicted_label"] == "PD")
|
|
tpd_count = sum(1 for row in rows if row["predicted_label"] == "TPD")
|
|
avg_pd = _average_pd_ratio(rows)
|
|
|
|
return _html_page(
|
|
title=f"Analisis {decoded_name}",
|
|
active="dashboard",
|
|
content=f"""
|
|
<section class="page-head">
|
|
<div>
|
|
<h1>{escape(decoded_name)}</h1>
|
|
<p>Folder hasil analisis siswa/i.</p>
|
|
</div>
|
|
<a class="button secondary" href="/admin">Kembali</a>
|
|
</section>
|
|
<section class="stats">
|
|
<div class="stat"><span>Total Prediksi</span><strong>{total}</strong></div>
|
|
<div class="stat"><span>Percaya Diri</span><strong>{pd_count}</strong></div>
|
|
<div class="stat"><span>Tidak Percaya Diri</span><strong>{tpd_count}</strong></div>
|
|
<div class="stat"><span>Rata-rata PD</span><strong>{avg_pd * 100:.1f}%</strong></div>
|
|
</section>
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>Isi Folder Analisis</h2>
|
|
<p>Edit atau hapus hasil prediksi milik siswa/i ini.</p>
|
|
</div>
|
|
</div>
|
|
{_prediction_table(rows)}
|
|
</section>
|
|
""",
|
|
)
|
|
|
|
|
|
@app.get("/admin", response_class=HTMLResponse)
|
|
def read_admin_page(
|
|
q: str = Query("", alias="q"),
|
|
label: str = Query("", alias="label"),
|
|
):
|
|
rows = list_prediction_results(limit=500)
|
|
clean_query = q.strip()
|
|
clean_label = label.strip().upper()
|
|
if clean_label not in {"PD", "TPD"}:
|
|
clean_label = ""
|
|
filtered_rows = _filter_prediction_rows(rows, clean_query, clean_label)
|
|
total = len(filtered_rows)
|
|
pd_count = sum(1 for row in filtered_rows if row["predicted_label"] == "PD")
|
|
tpd_count = sum(1 for row in filtered_rows if row["predicted_label"] == "TPD")
|
|
avg_pd = _average_pd_ratio(filtered_rows)
|
|
grouped_rows = _group_predictions_by_student(filtered_rows)
|
|
|
|
return _html_page(
|
|
title="Admin ConfiVoice",
|
|
active="dashboard",
|
|
content=f"""
|
|
<section class="page-head">
|
|
<div>
|
|
<h1>Admin ConfiVoice</h1>
|
|
<p>Dashboard hasil analisis percaya diri siswa/i dari aplikasi Flutter.</p>
|
|
</div>
|
|
</section>
|
|
<section class="stats">
|
|
<div class="stat"><span>Total Data Tampil</span><strong data-stat="total">{total}</strong></div>
|
|
<div class="stat"><span>Percaya Diri</span><strong data-stat="pd">{pd_count}</strong></div>
|
|
<div class="stat"><span>Tidak Percaya Diri</span><strong data-stat="tpd">{tpd_count}</strong></div>
|
|
<div class="stat"><span>Rata-rata Percaya Diri</span><strong data-stat="avg-pd">{avg_pd * 100:.1f}%</strong></div>
|
|
</section>
|
|
<section class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>Folder Siswa/i</h2>
|
|
<p>Pilih nama siswa/i untuk melihat semua hasil analisisnya.</p>
|
|
</div>
|
|
</div>
|
|
{_dashboard_filter_form(clean_query, clean_label)}
|
|
{_student_folder_grid(grouped_rows)}
|
|
</section>
|
|
""",
|
|
)
|
|
|
|
|
|
def _redirect_admin():
|
|
return RedirectResponse(url="/admin", status_code=303)
|
|
|
|
|
|
def _result_payload(
|
|
*,
|
|
predicted_label,
|
|
student_gender,
|
|
description,
|
|
confidence_percent,
|
|
probability_pd_percent,
|
|
probability_tpd_percent,
|
|
is_valid_audio,
|
|
error_message,
|
|
audio_duration,
|
|
):
|
|
return {
|
|
"predicted_label": predicted_label,
|
|
"student_gender": _clean_student_gender(student_gender),
|
|
"description": description,
|
|
"confidence": _percent_to_ratio(confidence_percent),
|
|
"probability_pd": _percent_to_ratio(probability_pd_percent),
|
|
"probability_tpd": _percent_to_ratio(probability_tpd_percent),
|
|
"is_valid_audio": is_valid_audio == "1",
|
|
"error_message": error_message.strip() or None,
|
|
"audio_quality": {"duration": audio_duration},
|
|
"voice_indicators": {},
|
|
}
|
|
|
|
|
|
def _db_values(
|
|
*,
|
|
student_name,
|
|
student_gender,
|
|
predicted_label,
|
|
description,
|
|
confidence_percent,
|
|
probability_pd_percent,
|
|
probability_tpd_percent,
|
|
is_valid_audio,
|
|
error_message,
|
|
audio_duration,
|
|
):
|
|
return (
|
|
student_name,
|
|
_clean_student_gender(student_gender),
|
|
predicted_label.strip() or None,
|
|
description.strip() or None,
|
|
_percent_to_ratio(confidence_percent),
|
|
_percent_to_ratio(probability_pd_percent),
|
|
_percent_to_ratio(probability_tpd_percent),
|
|
1 if is_valid_audio == "1" else 0,
|
|
error_message.strip() or None,
|
|
float(audio_duration or 0),
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
0,
|
|
)
|
|
|
|
|
|
def _percent_to_ratio(value):
|
|
return max(0, min(float(value or 0), 100)) / 100
|
|
|
|
|
|
def _ratio_to_percent(value):
|
|
return f"{float(value or 0) * 100:.2f}"
|
|
|
|
|
|
def _clean_student_gender(value):
|
|
gender = (value or "").strip()
|
|
return gender if gender in {"Laki-laki", "Perempuan"} else None
|
|
|
|
|
|
def _student_gender_label(value):
|
|
return value or "Belum diisi"
|
|
|
|
|
|
def _pd_probability(row):
|
|
return float(row.get("probability_pd") or 0)
|
|
|
|
|
|
def _average_pd_ratio(rows):
|
|
return sum(_pd_probability(row) for row in rows) / len(rows) if rows else 0
|
|
|
|
|
|
def _filter_prediction_rows(rows, query, label):
|
|
query = query.strip().lower()
|
|
label = label.strip().upper()
|
|
|
|
filtered_rows = rows
|
|
if query:
|
|
filtered_rows = [
|
|
row
|
|
for row in filtered_rows
|
|
if query in (row["student_name"] or "").lower()
|
|
]
|
|
if label in {"PD", "TPD"}:
|
|
filtered_rows = [
|
|
row
|
|
for row in filtered_rows
|
|
if (row["predicted_label"] or "").upper() == label
|
|
]
|
|
return filtered_rows
|
|
|
|
|
|
def _dashboard_filter_form(query, label):
|
|
all_selected = "selected" if not label else ""
|
|
pd_selected = "selected" if label == "PD" else ""
|
|
tpd_selected = "selected" if label == "TPD" else ""
|
|
return f"""
|
|
<form class="filter-bar" method="get" action="/admin" data-auto-filter>
|
|
<label>
|
|
<span>Cari nama siswa/i</span>
|
|
<input name="q" value="{escape(query)}" placeholder="Ketik nama siswa/i...">
|
|
</label>
|
|
<label>
|
|
<span>Filter hasil</span>
|
|
<select name="label">
|
|
<option value="" {all_selected}>Semua</option>
|
|
<option value="PD" {pd_selected}>Percaya Diri</option>
|
|
<option value="TPD" {tpd_selected}>Tidak Percaya Diri</option>
|
|
</select>
|
|
</label>
|
|
<div class="filter-actions">
|
|
<a class="button secondary" href="/admin">Reset</a>
|
|
</div>
|
|
</form>
|
|
"""
|
|
|
|
|
|
def _group_predictions_by_student(rows):
|
|
groups = {}
|
|
for row in rows:
|
|
student_name = row["student_name"] or "Tanpa Nama"
|
|
groups.setdefault(student_name, []).append(row)
|
|
return sorted(groups.items(), key=lambda item: item[0].lower())
|
|
|
|
|
|
def _student_folder_grid(grouped_rows):
|
|
if not grouped_rows:
|
|
return '<div class="empty folder-empty" data-folder-empty>Belum ada folder siswa/i.</div>'
|
|
|
|
cards = []
|
|
for student_name, rows in grouped_rows:
|
|
total = len(rows)
|
|
latest = rows[0]
|
|
gender = _student_gender_label(latest.get("student_gender"))
|
|
label = latest.get("predicted_label") or "-"
|
|
pd_count = sum(1 for row in rows if (row.get("predicted_label") or "").upper() == "PD")
|
|
tpd_count = sum(1 for row in rows if (row.get("predicted_label") or "").upper() == "TPD")
|
|
pd_sum = sum(_pd_probability(row) for row in rows)
|
|
labels = " ".join(
|
|
sorted({(row.get("predicted_label") or "").upper() for row in rows})
|
|
)
|
|
latest_pd = _pd_probability(latest) * 100
|
|
pd_average = _average_pd_ratio(rows) * 100
|
|
folder_url = f"/admin/students/{quote(student_name, safe='')}"
|
|
cards.append(
|
|
f"""
|
|
<a class="student-folder" href="{folder_url}" data-student-name="{escape(student_name.lower())}" data-labels="{escape(labels)}" data-total="{total}" data-pd-count="{pd_count}" data-tpd-count="{tpd_count}" data-pd-sum="{pd_sum:.8f}">
|
|
<div class="folder-icon">{escape(student_name[:1].upper() or "?")}</div>
|
|
<div class="folder-content">
|
|
<strong>{escape(student_name)}</strong>
|
|
<span>{escape(gender)} | {total} hasil analisis</span>
|
|
<small>Label terakhir: {escape(label)} | PD terakhir {latest_pd:.1f}% | Rata-rata PD {pd_average:.1f}%</small>
|
|
</div>
|
|
</a>
|
|
"""
|
|
)
|
|
|
|
return (
|
|
f'<div class="folder-grid" data-folder-grid>{"".join(cards)}</div>'
|
|
'<div class="empty folder-empty is-hidden" data-filter-empty>'
|
|
"Tidak ada folder siswa/i yang sesuai filter."
|
|
"</div>"
|
|
)
|
|
|
|
|
|
def _prediction_form(row=None, action="/admin/predictions", submit_label="Simpan"):
|
|
row = row or {}
|
|
student_name = escape(str(row.get("student_name") or ""))
|
|
student_gender = str(row.get("student_gender") or "")
|
|
predicted_label = str(row.get("predicted_label") or "PD")
|
|
description = escape(str(row.get("description") or ""))
|
|
confidence = _ratio_to_percent(row.get("confidence"))
|
|
probability_pd = _ratio_to_percent(row.get("probability_pd"))
|
|
probability_tpd = _ratio_to_percent(row.get("probability_tpd"))
|
|
audio_duration = float(row.get("audio_duration") or 0)
|
|
error_message = escape(str(row.get("error_message") or ""))
|
|
valid_audio = str(int(row.get("is_valid_audio", 1))) == "1"
|
|
pd_selected = "selected" if predicted_label == "PD" else ""
|
|
tpd_selected = "selected" if predicted_label == "TPD" else ""
|
|
male_selected = "selected" if student_gender == "Laki-laki" else ""
|
|
female_selected = "selected" if student_gender == "Perempuan" else ""
|
|
valid_selected = "selected" if valid_audio else ""
|
|
invalid_selected = "selected" if not valid_audio else ""
|
|
|
|
return f"""
|
|
<form class="form-grid" method="post" action="{escape(action)}">
|
|
<label>
|
|
<span>Nama siswa/i</span>
|
|
<input name="student_name" value="{student_name}" required>
|
|
</label>
|
|
<label>
|
|
<span>Jenis kelamin</span>
|
|
<select name="student_gender">
|
|
<option value="">Pilih jenis kelamin</option>
|
|
<option value="Laki-laki" {male_selected}>Laki-laki</option>
|
|
<option value="Perempuan" {female_selected}>Perempuan</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>Label</span>
|
|
<select name="predicted_label">
|
|
<option value="PD" {pd_selected}>PD</option>
|
|
<option value="TPD" {tpd_selected}>TPD</option>
|
|
</select>
|
|
</label>
|
|
<label>
|
|
<span>Confidence (%)</span>
|
|
<input name="confidence_percent" type="number" min="0" max="100" step="0.01" value="{confidence}">
|
|
</label>
|
|
<label>
|
|
<span>PD (%)</span>
|
|
<input name="probability_pd_percent" type="number" min="0" max="100" step="0.01" value="{probability_pd}">
|
|
</label>
|
|
<label>
|
|
<span>TPD (%)</span>
|
|
<input name="probability_tpd_percent" type="number" min="0" max="100" step="0.01" value="{probability_tpd}">
|
|
</label>
|
|
<label>
|
|
<span>Durasi audio (detik)</span>
|
|
<input name="audio_duration" type="number" min="0" step="0.01" value="{audio_duration:.2f}">
|
|
</label>
|
|
<label>
|
|
<span>Status audio</span>
|
|
<select name="is_valid_audio">
|
|
<option value="1" {valid_selected}>Valid</option>
|
|
<option value="0" {invalid_selected}>Tidak valid</option>
|
|
</select>
|
|
</label>
|
|
<label class="wide">
|
|
<span>Keterangan</span>
|
|
<input name="description" value="{description}">
|
|
</label>
|
|
<label class="wide">
|
|
<span>Pesan error audio</span>
|
|
<input name="error_message" value="{error_message}">
|
|
</label>
|
|
<div class="form-actions">
|
|
<button class="button" type="submit">{escape(submit_label)}</button>
|
|
</div>
|
|
</form>
|
|
"""
|
|
|
|
|
|
def _prediction_table(rows):
|
|
table_rows = []
|
|
for row in rows:
|
|
valid_text = "Valid" if row["is_valid_audio"] else "Tidak valid"
|
|
table_rows.append(
|
|
"<tr>"
|
|
f"<td>{row['id']}</td>"
|
|
f"<td>{escape(str(row['created_at']))}</td>"
|
|
f"<td>{escape(row['student_name'])}</td>"
|
|
f"<td>{escape(_student_gender_label(row.get('student_gender')))}</td>"
|
|
f"<td><span class='badge'>{escape(row['predicted_label'] or '-')}</span></td>"
|
|
f"<td>{escape(row['description'] or '-')}</td>"
|
|
f"<td>{float(row['confidence'] or 0) * 100:.2f}%</td>"
|
|
f"<td>{float(row['probability_pd'] or 0) * 100:.2f}%</td>"
|
|
f"<td>{float(row['probability_tpd'] or 0) * 100:.2f}%</td>"
|
|
f"<td>{float(row['audio_duration'] or 0):.2f} dtk</td>"
|
|
f"<td>{valid_text}</td>"
|
|
"<td class='row-actions'>"
|
|
f"<a class='small-button' href='/admin/predictions/{row['id']}/edit'>Edit</a>"
|
|
f"<form method='post' action='/admin/predictions/{row['id']}/delete' "
|
|
"onsubmit=\"return confirm('Hapus data ini?');\">"
|
|
"<button class='small-button danger' type='submit'>Hapus</button>"
|
|
"</form>"
|
|
"</td>"
|
|
"</tr>"
|
|
)
|
|
|
|
body = "\n".join(table_rows) or (
|
|
'<tr><td colspan="12" class="empty">Belum ada hasil prediksi.</td></tr>'
|
|
)
|
|
|
|
return f"""
|
|
<div class="table-wrap">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Waktu</th>
|
|
<th>Nama siswa/i</th>
|
|
<th>Jenis kelamin</th>
|
|
<th>Label</th>
|
|
<th>Keterangan</th>
|
|
<th>Confidence</th>
|
|
<th>PD</th>
|
|
<th>TPD</th>
|
|
<th>Durasi</th>
|
|
<th>Status audio</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>{body}</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="modal-backdrop is-hidden" data-delete-user-modal>
|
|
<section class="modal" role="dialog" aria-modal="true" aria-labelledby="delete-user-title">
|
|
<h2 id="delete-user-title">Hapus user?</h2>
|
|
<p data-delete-user-message>User ini akan dihapus dari database.</p>
|
|
<div class="modal-actions">
|
|
<button class="button secondary" type="button" data-delete-user-cancel>Batal</button>
|
|
<button class="button danger" type="button" data-delete-user-confirm>Hapus</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
"""
|
|
|
|
|
|
def _user_form(row=None, action="/admin/users", submit_label="Simpan", password_required=False):
|
|
row = row or {}
|
|
full_name = escape(str(row.get("full_name") or ""))
|
|
username = escape(str(row.get("username") or ""))
|
|
required = "required" if password_required else ""
|
|
password_hint = "Wajib diisi untuk user baru." if password_required else "Kosongkan jika tidak diganti."
|
|
|
|
return f"""
|
|
<form class="form-grid user-form" method="post" action="{escape(action)}">
|
|
<label>
|
|
<span>Nama lengkap</span>
|
|
<input name="full_name" value="{full_name}" required>
|
|
</label>
|
|
<label>
|
|
<span>Username</span>
|
|
<input name="username" value="{username}" required>
|
|
</label>
|
|
<label>
|
|
<span>Password</span>
|
|
<input name="password" type="password" {required}>
|
|
<small>{password_hint}</small>
|
|
</label>
|
|
<div class="form-actions">
|
|
<button class="button" type="submit">{escape(submit_label)}</button>
|
|
</div>
|
|
</form>
|
|
"""
|
|
|
|
|
|
def _user_table(users):
|
|
table_rows = []
|
|
for user in users:
|
|
table_rows.append(
|
|
"<tr>"
|
|
f"<td>{user['id']}</td>"
|
|
f"<td>{escape(str(user['created_at']))}</td>"
|
|
f"<td>{escape(user['full_name'])}</td>"
|
|
f"<td>{escape(user['username'])}</td>"
|
|
"<td class='row-actions'>"
|
|
f"<a class='small-button' href='/admin/users/{user['id']}/edit'>Edit</a>"
|
|
f"<form method='post' action='/admin/users/{user['id']}/delete' "
|
|
f"data-delete-user-form data-user-name=\"{escape(user['full_name'])}\">"
|
|
"<button class='small-button danger' type='submit'>Hapus</button>"
|
|
"</form>"
|
|
"</td>"
|
|
"</tr>"
|
|
)
|
|
|
|
body = "\n".join(table_rows) or (
|
|
'<tr><td colspan="5" class="empty">Belum ada user terdaftar.</td></tr>'
|
|
)
|
|
|
|
return f"""
|
|
<div class="table-wrap">
|
|
<table class="user-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Dibuat</th>
|
|
<th>Nama lengkap</th>
|
|
<th>Username</th>
|
|
<th>Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>{body}</tbody>
|
|
</table>
|
|
</div>
|
|
"""
|
|
|
|
|
|
def _nav_active(active, name):
|
|
return " active" if active == name else ""
|
|
|
|
|
|
def _sidebar(active):
|
|
update_open = " open" if active in {"prediction-new", "users"} else ""
|
|
return f"""
|
|
<aside class="sidebar">
|
|
<div class="brand">
|
|
<span class="brand-mark">CV</span>
|
|
<div>
|
|
<strong>ConfiVoice</strong>
|
|
<small>Admin Panel</small>
|
|
</div>
|
|
</div>
|
|
<nav class="nav">
|
|
<a class="nav-link{_nav_active(active, 'dashboard')}" href="/admin">
|
|
<span>Dashboard</span>
|
|
</a>
|
|
<details class="nav-group"{update_open}>
|
|
<summary>Update</summary>
|
|
<a class="nav-link{_nav_active(active, 'prediction-new')}" href="/admin/predictions/new">Tambah Data</a>
|
|
<a class="nav-link{_nav_active(active, 'users')}" href="/admin/users">Tambah User</a>
|
|
</details>
|
|
</nav>
|
|
<a class="nav-link logout{_nav_active(active, 'logout')}" href="/admin/logout">Keluar</a>
|
|
</aside>
|
|
"""
|
|
|
|
|
|
def _html_page(title, content, active="dashboard"):
|
|
return f"""
|
|
<!doctype html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{escape(title)}</title>
|
|
<style>
|
|
:root {{
|
|
font-family: Inter, Arial, sans-serif;
|
|
background: #020817;
|
|
color: #f8fbff;
|
|
}}
|
|
* {{
|
|
box-sizing: border-box;
|
|
}}
|
|
body {{
|
|
margin: 0;
|
|
min-height: 100vh;
|
|
background:
|
|
radial-gradient(circle at top right, rgba(37, 99, 235, 0.26), transparent 32rem),
|
|
linear-gradient(135deg, #020817 0%, #071426 58%, #0b1d35 100%);
|
|
}}
|
|
.app-shell {{
|
|
display: grid;
|
|
grid-template-columns: 260px minmax(0, 1fr);
|
|
min-height: 100vh;
|
|
}}
|
|
.sidebar {{
|
|
position: sticky;
|
|
top: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100vh;
|
|
padding: 22px 16px;
|
|
background: #030b18;
|
|
border-right: 1px solid #173456;
|
|
color: #dbeafe;
|
|
}}
|
|
.brand {{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 18px;
|
|
}}
|
|
.brand-mark {{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 42px;
|
|
height: 42px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, #2563eb, #60a5fa);
|
|
color: #ffffff;
|
|
font-weight: 800;
|
|
}}
|
|
.brand strong, .brand small {{
|
|
display: block;
|
|
}}
|
|
.brand small {{
|
|
margin-top: 2px;
|
|
color: #8db8f5;
|
|
font-size: 12px;
|
|
}}
|
|
.nav {{
|
|
display: grid;
|
|
gap: 8px;
|
|
}}
|
|
.nav-link, .nav-group summary {{
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
min-height: 42px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
color: #a8c7f6;
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}}
|
|
.nav-link:hover, .nav-group summary:hover, .nav-link.active {{
|
|
background: #12345b;
|
|
color: #ffffff;
|
|
}}
|
|
.nav-group {{
|
|
border-radius: 8px;
|
|
}}
|
|
.nav-group summary {{
|
|
list-style: none;
|
|
}}
|
|
.nav-group summary::-webkit-details-marker {{
|
|
display: none;
|
|
}}
|
|
.nav-group summary::after {{
|
|
content: "v";
|
|
margin-left: auto;
|
|
font-size: 12px;
|
|
}}
|
|
.nav-group:not([open]) summary::after {{
|
|
content: ">";
|
|
}}
|
|
.nav-group .nav-link {{
|
|
min-height: 38px;
|
|
margin-top: 6px;
|
|
padding-left: 24px;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}}
|
|
.logout {{
|
|
margin-top: auto;
|
|
color: #fecaca;
|
|
}}
|
|
.logout:hover, .logout.active {{
|
|
background: #571d2b;
|
|
color: #ffffff;
|
|
}}
|
|
main {{
|
|
width: 100%;
|
|
max-width: 1440px;
|
|
padding: 24px;
|
|
}}
|
|
.page-head {{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 16px;
|
|
margin-bottom: 18px;
|
|
}}
|
|
h1, h2 {{
|
|
margin: 0 0 6px;
|
|
}}
|
|
h1 {{
|
|
font-size: 28px;
|
|
}}
|
|
h2 {{
|
|
font-size: 20px;
|
|
}}
|
|
p {{
|
|
margin: 0;
|
|
color: #9fb3ca;
|
|
}}
|
|
.stats {{
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(140px, 1fr));
|
|
gap: 12px;
|
|
margin-bottom: 16px;
|
|
}}
|
|
.stat, .panel {{
|
|
background: rgba(8, 18, 34, 0.94);
|
|
border: 1px solid #1d3558;
|
|
border-radius: 8px;
|
|
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.24);
|
|
}}
|
|
.stat {{
|
|
padding: 14px;
|
|
}}
|
|
.stat span {{
|
|
display: block;
|
|
color: #8ca6c3;
|
|
font-size: 13px;
|
|
margin-bottom: 6px;
|
|
}}
|
|
.stat strong {{
|
|
font-size: 24px;
|
|
color: #ffffff;
|
|
}}
|
|
.panel {{
|
|
margin-bottom: 16px;
|
|
padding: 16px;
|
|
}}
|
|
.panel-head {{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 12px;
|
|
margin-bottom: 14px;
|
|
}}
|
|
.form-grid {{
|
|
display: grid;
|
|
grid-template-columns: repeat(4, minmax(160px, 1fr));
|
|
gap: 12px;
|
|
}}
|
|
.filter-bar {{
|
|
display: grid;
|
|
grid-template-columns: minmax(220px, 1fr) minmax(180px, 260px) auto;
|
|
gap: 12px;
|
|
align-items: end;
|
|
margin-bottom: 16px;
|
|
padding: 14px;
|
|
border: 1px solid #1d3558;
|
|
border-radius: 8px;
|
|
background: rgba(11, 22, 40, 0.78);
|
|
}}
|
|
.filter-actions {{
|
|
display: flex;
|
|
gap: 8px;
|
|
}}
|
|
.filter-actions .button {{
|
|
white-space: nowrap;
|
|
}}
|
|
label span {{
|
|
display: block;
|
|
color: #9fb3ca;
|
|
font-size: 13px;
|
|
margin-bottom: 6px;
|
|
}}
|
|
small {{
|
|
display: block;
|
|
margin-top: 5px;
|
|
color: #8ca6c3;
|
|
font-size: 12px;
|
|
}}
|
|
input, select {{
|
|
width: 100%;
|
|
min-height: 40px;
|
|
border: 1px solid #24446d;
|
|
border-radius: 8px;
|
|
padding: 9px 10px;
|
|
font: inherit;
|
|
background: #0b1628;
|
|
color: #f8fbff;
|
|
}}
|
|
input:focus, select:focus {{
|
|
border-color: #60a5fa;
|
|
outline: 2px solid rgba(96, 165, 250, 0.18);
|
|
}}
|
|
.wide {{
|
|
grid-column: span 2;
|
|
}}
|
|
.form-actions {{
|
|
display: flex;
|
|
align-items: end;
|
|
}}
|
|
.button, .small-button {{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
background: #3b82f6;
|
|
color: #ffffff;
|
|
font-weight: 700;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}}
|
|
.button {{
|
|
min-height: 40px;
|
|
padding: 9px 14px;
|
|
}}
|
|
.button:hover, .small-button:hover {{
|
|
background: #2563eb;
|
|
}}
|
|
.button.secondary, .small-button {{
|
|
background: #122a4a;
|
|
color: #bfdbfe;
|
|
border: 1px solid #24446d;
|
|
}}
|
|
.button.secondary:hover, .small-button:hover {{
|
|
background: #173b68;
|
|
}}
|
|
.small-button {{
|
|
min-height: 32px;
|
|
padding: 7px 10px;
|
|
font-size: 13px;
|
|
}}
|
|
.small-button.danger {{
|
|
background: #421623;
|
|
color: #fecaca;
|
|
border-color: #7f1d1d;
|
|
}}
|
|
.small-button.danger:hover {{
|
|
background: #5f1b2a;
|
|
}}
|
|
.button.danger {{
|
|
background: #7f1d1d;
|
|
color: #ffffff;
|
|
}}
|
|
.button.danger:hover {{
|
|
background: #991b1b;
|
|
}}
|
|
.table-wrap {{
|
|
overflow-x: auto;
|
|
border: 1px solid #1d3558;
|
|
border-radius: 8px;
|
|
}}
|
|
table {{
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
min-width: 1240px;
|
|
}}
|
|
th, td {{
|
|
padding: 12px 14px;
|
|
border-bottom: 1px solid #182b49;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
}}
|
|
th {{
|
|
background: #0b1b31;
|
|
color: #bfdbfe;
|
|
font-size: 13px;
|
|
text-transform: uppercase;
|
|
}}
|
|
td {{
|
|
color: #e5eefc;
|
|
}}
|
|
tr:last-child td {{
|
|
border-bottom: 0;
|
|
}}
|
|
.badge {{
|
|
display: inline-block;
|
|
min-width: 40px;
|
|
padding: 4px 8px;
|
|
border-radius: 999px;
|
|
background: #12345b;
|
|
color: #bfdbfe;
|
|
text-align: center;
|
|
font-weight: 700;
|
|
}}
|
|
.empty {{
|
|
text-align: center;
|
|
color: #8ca6c3;
|
|
}}
|
|
.folder-empty {{
|
|
padding: 22px;
|
|
border: 1px dashed #24446d;
|
|
border-radius: 8px;
|
|
}}
|
|
.is-hidden {{
|
|
display: none !important;
|
|
}}
|
|
.folder-grid {{
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
|
|
gap: 12px;
|
|
}}
|
|
.student-folder {{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 14px;
|
|
min-height: 118px;
|
|
padding: 16px;
|
|
border: 1px solid #24446d;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, rgba(18, 42, 74, 0.96), rgba(8, 18, 34, 0.96));
|
|
color: #f8fbff;
|
|
text-decoration: none;
|
|
transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
|
|
}}
|
|
.student-folder:hover {{
|
|
transform: translateY(-2px);
|
|
border-color: #60a5fa;
|
|
background: linear-gradient(135deg, rgba(29, 78, 216, 0.34), rgba(8, 18, 34, 0.98));
|
|
}}
|
|
.folder-icon {{
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex: 0 0 auto;
|
|
width: 58px;
|
|
height: 58px;
|
|
border-radius: 8px;
|
|
background: #12345b;
|
|
color: #93c5fd;
|
|
font-size: 24px;
|
|
font-weight: 800;
|
|
}}
|
|
.folder-content {{
|
|
display: grid;
|
|
gap: 5px;
|
|
min-width: 0;
|
|
}}
|
|
.folder-content strong {{
|
|
overflow: hidden;
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}}
|
|
.folder-content span {{
|
|
color: #bfdbfe;
|
|
}}
|
|
.folder-content small {{
|
|
margin: 0;
|
|
}}
|
|
.row-actions {{
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}}
|
|
.row-actions form {{
|
|
margin: 0;
|
|
}}
|
|
.user-table {{
|
|
min-width: 760px;
|
|
}}
|
|
.logout-panel {{
|
|
max-width: 640px;
|
|
}}
|
|
.logout-panel .button {{
|
|
margin-top: 16px;
|
|
}}
|
|
.modal-backdrop {{
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 50;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 20px;
|
|
background: rgba(2, 8, 23, 0.72);
|
|
backdrop-filter: blur(8px);
|
|
}}
|
|
.modal {{
|
|
width: min(420px, 100%);
|
|
padding: 22px;
|
|
border: 1px solid #24446d;
|
|
border-radius: 8px;
|
|
background: #081222;
|
|
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.42);
|
|
}}
|
|
.modal h2 {{
|
|
margin-bottom: 8px;
|
|
}}
|
|
.modal p {{
|
|
line-height: 1.55;
|
|
}}
|
|
.modal-actions {{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
margin-top: 20px;
|
|
}}
|
|
.modal-actions .button {{
|
|
min-width: 88px;
|
|
}}
|
|
@media (max-width: 980px) {{
|
|
.app-shell {{
|
|
grid-template-columns: 1fr;
|
|
}}
|
|
.sidebar {{
|
|
position: static;
|
|
height: auto;
|
|
min-height: 0;
|
|
}}
|
|
.logout {{
|
|
margin-top: 8px;
|
|
}}
|
|
.form-grid {{
|
|
grid-template-columns: repeat(2, minmax(140px, 1fr));
|
|
}}
|
|
.filter-bar {{
|
|
grid-template-columns: 1fr 1fr;
|
|
}}
|
|
.filter-actions {{
|
|
grid-column: span 2;
|
|
}}
|
|
.wide {{
|
|
grid-column: span 2;
|
|
}}
|
|
}}
|
|
@media (max-width: 760px) {{
|
|
main {{
|
|
padding: 14px;
|
|
}}
|
|
.page-head {{
|
|
align-items: stretch;
|
|
flex-direction: column;
|
|
}}
|
|
.stats {{
|
|
grid-template-columns: repeat(2, minmax(120px, 1fr));
|
|
}}
|
|
.form-grid {{
|
|
grid-template-columns: 1fr;
|
|
}}
|
|
.filter-bar {{
|
|
grid-template-columns: 1fr;
|
|
}}
|
|
.filter-actions {{
|
|
grid-column: span 1;
|
|
}}
|
|
.filter-actions .button {{
|
|
flex: 1;
|
|
}}
|
|
.wide {{
|
|
grid-column: span 1;
|
|
}}
|
|
.panel-head {{
|
|
display: block;
|
|
}}
|
|
.panel-head .button {{
|
|
margin-top: 12px;
|
|
}}
|
|
}}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="app-shell">
|
|
{_sidebar(active)}
|
|
<main>
|
|
{content}
|
|
</main>
|
|
</div>
|
|
<div class="modal-backdrop is-hidden" data-delete-user-modal>
|
|
<section class="modal" role="dialog" aria-modal="true" aria-labelledby="delete-user-title">
|
|
<h2 id="delete-user-title">Hapus user?</h2>
|
|
<p data-delete-user-message>User ini akan dihapus dari database.</p>
|
|
<div class="modal-actions">
|
|
<button class="button secondary" type="button" data-delete-user-cancel>Batal</button>
|
|
<button class="button danger" type="button" data-delete-user-confirm>Hapus</button>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
<script>
|
|
const autoFilterForm = document.querySelector('[data-auto-filter]');
|
|
if (autoFilterForm) {{
|
|
const searchInput = autoFilterForm.querySelector('input[name="q"]');
|
|
const labelSelect = autoFilterForm.querySelector('select[name="label"]');
|
|
const folders = [...document.querySelectorAll('.student-folder')];
|
|
const emptyState = document.querySelector('[data-filter-empty]');
|
|
const totalStat = document.querySelector('[data-stat="total"]');
|
|
const pdStat = document.querySelector('[data-stat="pd"]');
|
|
const tpdStat = document.querySelector('[data-stat="tpd"]');
|
|
const avgPdStat = document.querySelector('[data-stat="avg-pd"]');
|
|
|
|
const applyLocalFilter = () => {{
|
|
const query = (searchInput?.value || '').trim().toLowerCase();
|
|
const label = (labelSelect?.value || '').trim().toUpperCase();
|
|
let visibleCount = 0;
|
|
let totalCount = 0;
|
|
let pdCount = 0;
|
|
let tpdCount = 0;
|
|
let pdSum = 0;
|
|
|
|
folders.forEach((folder) => {{
|
|
const studentName = folder.dataset.studentName || '';
|
|
const labels = (folder.dataset.labels || '').split(' ');
|
|
const matchesName = !query || studentName.includes(query);
|
|
const matchesLabel = !label || labels.includes(label);
|
|
const shouldShow = matchesName && matchesLabel;
|
|
folder.classList.toggle('is-hidden', !shouldShow);
|
|
if (shouldShow) {{
|
|
visibleCount += 1;
|
|
totalCount += Number(folder.dataset.total || 0);
|
|
pdCount += Number(folder.dataset.pdCount || 0);
|
|
tpdCount += Number(folder.dataset.tpdCount || 0);
|
|
pdSum += Number(folder.dataset.pdSum || 0);
|
|
}}
|
|
}});
|
|
|
|
emptyState?.classList.toggle('is-hidden', visibleCount !== 0);
|
|
if (totalStat) totalStat.textContent = String(totalCount);
|
|
if (pdStat) pdStat.textContent = String(pdCount);
|
|
if (tpdStat) tpdStat.textContent = String(tpdCount);
|
|
if (avgPdStat) {{
|
|
avgPdStat.textContent = totalCount ? `${{(pdSum / totalCount * 100).toFixed(1)}}%` : '0.0%';
|
|
}}
|
|
}};
|
|
|
|
autoFilterForm.addEventListener('submit', (event) => {{
|
|
event.preventDefault();
|
|
applyLocalFilter();
|
|
}});
|
|
searchInput?.addEventListener('input', applyLocalFilter);
|
|
labelSelect?.addEventListener('change', applyLocalFilter);
|
|
applyLocalFilter();
|
|
}}
|
|
|
|
const deleteUserModal = document.querySelector('[data-delete-user-modal]');
|
|
const deleteUserMessage = document.querySelector('[data-delete-user-message]');
|
|
const deleteUserCancel = document.querySelector('[data-delete-user-cancel]');
|
|
const deleteUserConfirm = document.querySelector('[data-delete-user-confirm]');
|
|
let pendingDeleteUserForm = null;
|
|
|
|
document.querySelectorAll('[data-delete-user-form]').forEach((form) => {{
|
|
form.addEventListener('submit', (event) => {{
|
|
event.preventDefault();
|
|
pendingDeleteUserForm = form;
|
|
const userName = form.dataset.userName || 'user ini';
|
|
if (deleteUserMessage) {{
|
|
deleteUserMessage.textContent = `Yakin ingin menghapus ${{userName}}? Data user akan dihapus dari database.`;
|
|
}}
|
|
deleteUserModal?.classList.remove('is-hidden');
|
|
}});
|
|
}});
|
|
|
|
const closeDeleteUserModal = () => {{
|
|
pendingDeleteUserForm = null;
|
|
deleteUserModal?.classList.add('is-hidden');
|
|
}};
|
|
|
|
deleteUserCancel?.addEventListener('click', closeDeleteUserModal);
|
|
deleteUserModal?.addEventListener('click', (event) => {{
|
|
if (event.target === deleteUserModal) {{
|
|
closeDeleteUserModal();
|
|
}}
|
|
}});
|
|
deleteUserConfirm?.addEventListener('click', () => {{
|
|
const form = pendingDeleteUserForm;
|
|
closeDeleteUserModal();
|
|
form?.submit();
|
|
}});
|
|
</script>
|
|
</body>
|
|
</html>
|
|
"""
|