924 lines
32 KiB
HTML
924 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<!--
|
|
Description: Project dashboard page for listing, creating, opening, and managing user projects.
|
|
Inside functions: addLog, applyTheme, openProject, loadProfile, loadProjects, loadTechnologies
|
|
Developer : Qin Yue @ 2026
|
|
Organization : OptiHK Limited
|
|
-->
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard</title>
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap" rel="stylesheet">
|
|
|
|
<style>
|
|
:root {
|
|
--bg-main: #060b16;
|
|
--bg-card: #0d1626;
|
|
--bg-elevated: #121d31;
|
|
--bg-panel: #162238;
|
|
--text-main: #f6f8fb;
|
|
--text-muted: #93a3b8;
|
|
--accent: #6ee7ff;
|
|
--accent-hover: #7c3aed;
|
|
--accent-green: #34d399;
|
|
--accent-warm: #f97316;
|
|
--border: #28364c;
|
|
--border-strong: #42516a;
|
|
--danger: #ef4444;
|
|
--panel-soft: #09111f;
|
|
--folder-icon: #f8c14a;
|
|
--shadow: rgba(0, 0, 0, 0.34);
|
|
}
|
|
|
|
body.light-mode {
|
|
--bg-main: #edf3f8;
|
|
--bg-card: #ffffff;
|
|
--bg-elevated: #f8fbff;
|
|
--bg-panel: #eef5fb;
|
|
--text-main: #132032;
|
|
--text-muted: #64758a;
|
|
--accent: #2563eb;
|
|
--accent-hover: #0f9f7a;
|
|
--accent-green: #16a34a;
|
|
--accent-warm: #38bdf8;
|
|
--border: #d5e0eb;
|
|
--border-strong: #b8c7d8;
|
|
--panel-soft: #f4f8fb;
|
|
--folder-icon: #38bdf8;
|
|
--shadow: rgba(37, 99, 235, 0.12);
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'IBM Plex Sans', "Segoe UI", sans-serif;
|
|
background:
|
|
linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px),
|
|
radial-gradient(circle at 16% 8%, rgba(124, 58, 237, 0.2), transparent 28%),
|
|
radial-gradient(circle at 82% 16%, rgba(249, 115, 22, 0.11), transparent 24%),
|
|
var(--bg-main);
|
|
background-size: 44px 44px, 44px 44px, auto, auto, auto;
|
|
color: var(--text-main);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
body.light-mode {
|
|
background:
|
|
linear-gradient(90deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
|
|
linear-gradient(0deg, rgba(37, 99, 235, 0.045) 1px, transparent 1px),
|
|
radial-gradient(circle at 16% 8%, rgba(56, 189, 248, 0.16), transparent 28%),
|
|
radial-gradient(circle at 82% 16%, rgba(34, 197, 94, 0.12), transparent 24%),
|
|
var(--bg-main);
|
|
}
|
|
|
|
header {
|
|
width: 100%;
|
|
background: rgba(13, 22, 38, 0.9);
|
|
padding: 14px 42px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
border-bottom: 1px solid var(--border);
|
|
box-sizing: border-box;
|
|
backdrop-filter: blur(14px);
|
|
}
|
|
|
|
body.light-mode header {
|
|
background: rgba(255, 255, 255, 0.86);
|
|
}
|
|
|
|
.theme-toggle {
|
|
margin-left: auto;
|
|
margin-right: 20px;
|
|
border: 1px solid var(--border);
|
|
background: var(--panel-soft);
|
|
color: var(--text-main);
|
|
border-radius: 8px;
|
|
height: 34px;
|
|
padding: 0 13px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.brand {
|
|
font-size: 1.22rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.brand span {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.brand::before {
|
|
content: "";
|
|
width: 30px;
|
|
height: 30px;
|
|
border-radius: 8px;
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-hover) 60%, var(--accent-warm));
|
|
box-shadow: 0 0 0 5px rgba(110, 231, 255, 0.08);
|
|
}
|
|
|
|
.logout-btn {
|
|
color: var(--text-muted);
|
|
text-decoration: none;
|
|
font-size: 0.9rem;
|
|
font-weight: 600;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
.logout-btn:hover {
|
|
color: #ef4444;
|
|
}
|
|
|
|
.container {
|
|
width: 100%;
|
|
max-width: 1060px;
|
|
padding: 46px 22px 28px;
|
|
flex-grow: 1;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: 700;
|
|
margin: 0 0 10px 0;
|
|
font-size: clamp(1.75rem, 3vw, 2.45rem);
|
|
line-height: 1.05;
|
|
}
|
|
|
|
h2 strong {
|
|
color: var(--accent);
|
|
}
|
|
|
|
.profile-panel {
|
|
margin-top: 24px;
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
|
|
var(--bg-elevated);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 18px;
|
|
box-shadow: 0 16px 34px var(--shadow);
|
|
}
|
|
|
|
.profile-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: 14px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.profile-title {
|
|
font-family: 'IBM Plex Mono', Consolas, monospace;
|
|
color: var(--text-muted);
|
|
font-size: 0.78rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.profile-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(120px, 1fr));
|
|
gap: 12px;
|
|
}
|
|
|
|
.profile-item {
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
background: var(--panel-soft);
|
|
padding: 12px;
|
|
min-width: 0;
|
|
}
|
|
|
|
.profile-item label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: var(--text-muted);
|
|
font-size: 0.72rem;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.profile-value {
|
|
color: var(--text-main);
|
|
font-weight: 700;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.profile-item select {
|
|
width: 100%;
|
|
background: var(--panel-soft);
|
|
border: none;
|
|
color: var(--text-main);
|
|
font: inherit;
|
|
font-weight: 700;
|
|
outline: none;
|
|
}
|
|
|
|
.profile-item select option {
|
|
background: var(--bg-card);
|
|
color: var(--text-main);
|
|
}
|
|
|
|
.profile-action {
|
|
border: 1px solid var(--border);
|
|
background: var(--panel-soft);
|
|
color: var(--text-main);
|
|
border-radius: 8px;
|
|
height: 34px;
|
|
padding: 0 13px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-weight: 700;
|
|
}
|
|
|
|
.profile-action:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
}
|
|
|
|
.section-title {
|
|
font-family: 'IBM Plex Mono', Consolas, monospace;
|
|
font-size: 0.78rem;
|
|
color: var(--text-muted);
|
|
margin: 34px 0 14px;
|
|
border-bottom: 1px solid var(--border);
|
|
padding-bottom: 10px;
|
|
text-transform: uppercase;
|
|
font-weight: 700;
|
|
letter-spacing: 0.04em;
|
|
}
|
|
|
|
.project-list {
|
|
list-style: none;
|
|
padding: 0;
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
|
gap: 14px;
|
|
margin: 0 0 30px;
|
|
}
|
|
|
|
.project-card {
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.035), transparent),
|
|
var(--bg-elevated);
|
|
border: 1px solid var(--border);
|
|
min-height: 76px;
|
|
padding: 16px;
|
|
border-radius: 8px;
|
|
display: grid;
|
|
grid-template-columns: 30px minmax(0, 1fr) minmax(64px, auto) auto;
|
|
gap: 12px;
|
|
align-items: center;
|
|
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
|
|
cursor: pointer;
|
|
font-size: 0.95rem;
|
|
box-shadow: 0 16px 34px var(--shadow);
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.project-card::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: 0;
|
|
height: 2px;
|
|
background: linear-gradient(90deg, var(--accent), var(--accent-green), transparent);
|
|
opacity: 0.75;
|
|
}
|
|
|
|
.project-card:hover {
|
|
transform: translateY(-2px);
|
|
border-color: var(--accent);
|
|
box-shadow: 0 20px 44px rgba(37, 99, 235, 0.18);
|
|
}
|
|
|
|
.project-card.empty-project-card {
|
|
display: flex;
|
|
align-items: center;
|
|
grid-column: 1 / -1;
|
|
cursor: default;
|
|
color: var(--text-muted);
|
|
white-space: normal;
|
|
}
|
|
|
|
.project-card.empty-project-card:hover {
|
|
transform: none;
|
|
border-color: var(--border);
|
|
box-shadow: 0 16px 34px var(--shadow);
|
|
}
|
|
|
|
.project-meta {
|
|
color: var(--text-muted);
|
|
font-family: 'IBM Plex Mono', Consolas, monospace;
|
|
font-size: 0.76rem;
|
|
margin-top: 4px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.project-details {
|
|
min-width: 0;
|
|
}
|
|
|
|
.project-name {
|
|
display: block;
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
min-width: 0;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.delete-project-btn {
|
|
border: 1px solid rgba(239, 68, 68, 0.45);
|
|
background: rgba(239, 68, 68, 0.08);
|
|
color: #fecaca;
|
|
border-radius: 8px;
|
|
height: 30px;
|
|
padding: 0 10px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-size: 0.8rem;
|
|
font-weight: 600;
|
|
}
|
|
|
|
body.light-mode .delete-project-btn {
|
|
color: #b91c1c;
|
|
}
|
|
|
|
.delete-project-btn:hover {
|
|
background: rgba(239, 68, 68, 0.18);
|
|
border-color: var(--danger);
|
|
}
|
|
|
|
.file-icon,
|
|
.project-icon {
|
|
margin-right: 15px;
|
|
width: 30px;
|
|
height: 24px;
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
border-radius: 6px;
|
|
background: linear-gradient(135deg, var(--folder-icon), var(--accent-green));
|
|
box-shadow: inset 0 -7px 0 rgba(255, 255, 255, 0.16);
|
|
}
|
|
|
|
.file-icon::before,
|
|
.project-icon::before {
|
|
content: "";
|
|
position: absolute;
|
|
left: 3px;
|
|
top: -5px;
|
|
width: 13px;
|
|
height: 7px;
|
|
background: var(--folder-icon);
|
|
border-radius: 4px 4px 0 0;
|
|
}
|
|
|
|
.new-project-form {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.new-project-btn {
|
|
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
|
|
color: #06111f;
|
|
font-family: inherit;
|
|
font-size: 15px;
|
|
font-weight: 700;
|
|
padding: 12px 24px;
|
|
border: none;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
box-shadow: 0 16px 34px rgba(37, 99, 235, 0.24);
|
|
transition: background-color 0.2s ease, transform 0.1s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.new-project-btn:hover {
|
|
color: white;
|
|
transform: translateY(-1px);
|
|
}
|
|
|
|
.new-project-btn:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
footer {
|
|
padding: 20px;
|
|
color: var(--text-muted);
|
|
font-size: 0.75rem;
|
|
text-align: center;
|
|
width: 100%;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(5, 11, 22, 0.74);
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 100;
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
.modal-backdrop.open {
|
|
display: flex;
|
|
}
|
|
|
|
.modal-panel {
|
|
width: min(460px, calc(100vw - 32px));
|
|
background:
|
|
linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent),
|
|
var(--bg-card);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 22px;
|
|
box-shadow: 0 28px 86px var(--shadow);
|
|
}
|
|
|
|
.modal-panel h3 {
|
|
margin: 0 0 16px 0;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.modal-field {
|
|
margin-bottom: 14px;
|
|
}
|
|
|
|
.modal-field label {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
color: var(--text-muted);
|
|
font-size: 0.82rem;
|
|
font-weight: 700;
|
|
letter-spacing: 0.02em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.modal-panel input,
|
|
.modal-panel select {
|
|
width: 100%;
|
|
background: var(--panel-soft);
|
|
color: var(--text-main);
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 11px;
|
|
font-family: inherit;
|
|
outline: none;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.modal-panel input:focus,
|
|
.modal-panel select:focus {
|
|
border-color: var(--accent);
|
|
box-shadow: 0 0 0 3px rgba(110, 231, 255, 0.12);
|
|
}
|
|
|
|
.modal-actions {
|
|
margin-top: 18px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 10px;
|
|
}
|
|
|
|
.secondary-btn {
|
|
border: 1px solid var(--border);
|
|
background: transparent;
|
|
color: var(--text-main);
|
|
border-radius: 8px;
|
|
padding: 10px 14px;
|
|
cursor: pointer;
|
|
font-family: inherit;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.log-terminal {
|
|
margin-top: 28px;
|
|
min-height: 96px;
|
|
max-height: 150px;
|
|
overflow: auto;
|
|
background: #020617;
|
|
color: #c7f9ff;
|
|
border: 1px solid var(--border);
|
|
border-radius: 8px;
|
|
padding: 12px 14px;
|
|
font-family: 'IBM Plex Mono', Consolas, Monaco, monospace;
|
|
font-size: 0.78rem;
|
|
line-height: 1.5;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
body.light-mode .log-terminal {
|
|
background: #f8fafc;
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
header {
|
|
padding: 12px 16px;
|
|
gap: 12px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.theme-toggle {
|
|
margin-left: 0;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.project-list {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.profile-header {
|
|
align-items: flex-start;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.profile-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.project-card {
|
|
align-items: flex-start;
|
|
grid-template-columns: 30px minmax(0, 1fr) auto;
|
|
gap: 8px;
|
|
}
|
|
|
|
.project-meta {
|
|
grid-column: 2 / 4;
|
|
margin-top: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.delete-project-btn {
|
|
grid-column: 3;
|
|
grid-row: 1;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<header>
|
|
<div class="brand">opti<span>hk</span></div>
|
|
<button class="theme-toggle" id="theme-toggle" type="button">Bright Mode</button>
|
|
<a href="/logout" class="logout-btn">Logout</a>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<h2>Welcome back, <strong>{{ username }}</strong>!</h2>
|
|
|
|
<section class="profile-panel">
|
|
<div class="profile-header">
|
|
<div class="profile-title">Account Profile</div>
|
|
<button class="profile-action" type="button" id="open-password-modal">Change Password</button>
|
|
</div>
|
|
<div class="profile-grid">
|
|
<div class="profile-item">
|
|
<label>User ID</label>
|
|
<div class="profile-value" id="profile-id">-</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label>Account Name</label>
|
|
<div class="profile-value" id="profile-username">{{ username }}</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label>Registration Date</label>
|
|
<div class="profile-value" id="profile-created">-</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label>Credits</label>
|
|
<div class="profile-value" id="profile-credits">0</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label>User Group</label>
|
|
<div class="profile-value" id="profile-group">-</div>
|
|
</div>
|
|
<div class="profile-item">
|
|
<label>Occupation</label>
|
|
<select id="profile-occupation"></select>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="section-title">Your Projects</div>
|
|
<ul class="project-list" id="project-list">
|
|
<li class="project-card">Loading projects...</li>
|
|
</ul>
|
|
|
|
<form id="new-project-form" class="new-project-form">
|
|
<button type="submit" class="new-project-btn">
|
|
<span>+</span> New PIC Layout
|
|
</button>
|
|
</form>
|
|
|
|
<footer>
|
|
Powered by mxpic core
|
|
</footer>
|
|
|
|
<div class="log-terminal" id="log-terminal">
|
|
<div>[system] Dashboard ready.</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-backdrop" id="technology-modal">
|
|
<div class="modal-panel">
|
|
<h3>Create Project</h3>
|
|
<div class="modal-field">
|
|
<label for="project-name-input">Project Name</label>
|
|
<input id="project-name-input" type="text" value="mxpic_project_1" autocomplete="off" />
|
|
</div>
|
|
<div class="modal-field">
|
|
<label for="technology-select">Technology</label>
|
|
<select id="technology-select"></select>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" type="button" id="cancel-project">Cancel</button>
|
|
<button class="new-project-btn" type="button" id="create-project">Create Project</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal-backdrop" id="password-modal">
|
|
<div class="modal-panel">
|
|
<h3>Change Password</h3>
|
|
<div class="modal-field">
|
|
<label for="current-password-input">Current Password</label>
|
|
<input id="current-password-input" type="password" autocomplete="current-password" />
|
|
</div>
|
|
<div class="modal-field">
|
|
<label for="new-password-input">New Password</label>
|
|
<input id="new-password-input" type="password" autocomplete="new-password" />
|
|
</div>
|
|
<div class="modal-field">
|
|
<label for="confirm-password-input">Confirm New Password</label>
|
|
<input id="confirm-password-input" type="password" autocomplete="new-password" />
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button class="secondary-btn" type="button" id="cancel-password">Cancel</button>
|
|
<button class="new-project-btn" type="button" id="save-password">Update Password</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const projectList = document.getElementById('project-list');
|
|
const newProjectForm = document.getElementById('new-project-form');
|
|
const technologyModal = document.getElementById('technology-modal');
|
|
const technologySelect = document.getElementById('technology-select');
|
|
const projectNameInput = document.getElementById('project-name-input');
|
|
const createProjectButton = document.getElementById('create-project');
|
|
const cancelProjectButton = document.getElementById('cancel-project');
|
|
const passwordModal = document.getElementById('password-modal');
|
|
const openPasswordModalButton = document.getElementById('open-password-modal');
|
|
const cancelPasswordButton = document.getElementById('cancel-password');
|
|
const savePasswordButton = document.getElementById('save-password');
|
|
const currentPasswordInput = document.getElementById('current-password-input');
|
|
const newPasswordInput = document.getElementById('new-password-input');
|
|
const confirmPasswordInput = document.getElementById('confirm-password-input');
|
|
const profileId = document.getElementById('profile-id');
|
|
const profileUsername = document.getElementById('profile-username');
|
|
const profileCreated = document.getElementById('profile-created');
|
|
const profileCredits = document.getElementById('profile-credits');
|
|
const profileGroup = document.getElementById('profile-group');
|
|
const profileOccupation = document.getElementById('profile-occupation');
|
|
const themeToggle = document.getElementById('theme-toggle');
|
|
const logTerminal = document.getElementById('log-terminal');
|
|
let technologies = [];
|
|
|
|
// Append a dashboard status message with a timestamp.
|
|
function addLog(message) {
|
|
const line = document.createElement('div');
|
|
line.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
|
|
logTerminal.appendChild(line);
|
|
logTerminal.scrollTop = logTerminal.scrollHeight;
|
|
}
|
|
|
|
// Apply the selected dashboard theme class and persist it for later sessions.
|
|
function applyTheme(mode) {
|
|
document.body.classList.toggle('light-mode', mode === 'light');
|
|
themeToggle.textContent = mode === 'light' ? 'Dark Mode' : 'Bright Mode';
|
|
localStorage.setItem('mxpic-theme', mode);
|
|
}
|
|
|
|
applyTheme(localStorage.getItem('mxpic-theme') || 'dark');
|
|
themeToggle.addEventListener('click', () => {
|
|
applyTheme(document.body.classList.contains('light-mode') ? 'dark' : 'light');
|
|
});
|
|
|
|
// Navigate from the dashboard into the canvas editor for a saved project.
|
|
function openProject(name) {
|
|
window.location.href = `/canvas?project=${encodeURIComponent(name)}`;
|
|
}
|
|
|
|
// Load account profile details and available occupation choices.
|
|
async function loadProfile() {
|
|
try {
|
|
const response = await fetch('/api/profile');
|
|
const profile = await response.json();
|
|
if (!response.ok) {
|
|
addLog(profile.error || 'Failed to load profile.');
|
|
return;
|
|
}
|
|
profileId.textContent = profile.id;
|
|
profileUsername.textContent = profile.username;
|
|
profileCreated.textContent = profile.created_at || '-';
|
|
profileCredits.textContent = profile.credits ?? 0;
|
|
profileGroup.textContent = profile.user_group || 'user';
|
|
profileOccupation.innerHTML = '';
|
|
(profile.occupations || []).forEach(occupation => {
|
|
const option = document.createElement('option');
|
|
option.value = occupation;
|
|
option.textContent = occupation;
|
|
option.selected = occupation === profile.occupation;
|
|
profileOccupation.appendChild(option);
|
|
});
|
|
} catch (error) {
|
|
addLog('Failed to load profile.');
|
|
}
|
|
}
|
|
|
|
profileOccupation.addEventListener('change', async () => {
|
|
const response = await fetch('/api/profile', {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ occupation: profileOccupation.value })
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok) {
|
|
addLog(result.error || 'Failed to update occupation.');
|
|
loadProfile();
|
|
return;
|
|
}
|
|
addLog(`Updated occupation to "${result.occupation}".`);
|
|
});
|
|
|
|
openPasswordModalButton.addEventListener('click', () => {
|
|
currentPasswordInput.value = '';
|
|
newPasswordInput.value = '';
|
|
confirmPasswordInput.value = '';
|
|
passwordModal.classList.add('open');
|
|
currentPasswordInput.focus();
|
|
});
|
|
|
|
cancelPasswordButton.addEventListener('click', () => {
|
|
passwordModal.classList.remove('open');
|
|
});
|
|
|
|
savePasswordButton.addEventListener('click', async () => {
|
|
const newPassword = newPasswordInput.value;
|
|
if (newPassword !== confirmPasswordInput.value) {
|
|
addLog('Password update failed: confirmation does not match.');
|
|
return;
|
|
}
|
|
const response = await fetch('/api/profile/password', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
current_password: currentPasswordInput.value,
|
|
new_password: newPassword
|
|
})
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok) {
|
|
addLog(result.error || 'Password update failed.');
|
|
return;
|
|
}
|
|
passwordModal.classList.remove('open');
|
|
addLog('Password updated.');
|
|
});
|
|
|
|
// Fetch saved projects and render the dashboard project list.
|
|
async function loadProjects() {
|
|
try {
|
|
const response = await fetch('/api/projects');
|
|
const data = await response.json();
|
|
projectList.innerHTML = '';
|
|
|
|
if (!data.projects || data.projects.length === 0) {
|
|
const empty = document.createElement('li');
|
|
empty.className = 'project-card empty-project-card';
|
|
empty.textContent = 'No projects yet. Create a new PIC layout to begin.';
|
|
projectList.appendChild(empty);
|
|
return;
|
|
}
|
|
|
|
data.projects.forEach(project => {
|
|
const item = document.createElement('li');
|
|
item.className = 'project-card';
|
|
item.onclick = () => openProject(project.name);
|
|
const cellCount = project.cells ? project.cells.length : 0;
|
|
const technology = project.technology ? ` · ${project.technology}` : '';
|
|
item.innerHTML = `<span class="project-icon"></span><span class="project-name">${project.name}</span><span class="project-meta">${cellCount} cells${technology}</span>`;
|
|
const deleteButton = document.createElement('button');
|
|
deleteButton.className = 'delete-project-btn';
|
|
deleteButton.type = 'button';
|
|
deleteButton.textContent = 'Delete';
|
|
deleteButton.onclick = async (event) => {
|
|
event.stopPropagation();
|
|
if (deleteButton.dataset.confirm !== 'true') {
|
|
deleteButton.dataset.confirm = 'true';
|
|
deleteButton.textContent = 'Confirm';
|
|
addLog(`Click Confirm to delete project "${project.name}".`);
|
|
setTimeout(() => {
|
|
deleteButton.dataset.confirm = 'false';
|
|
deleteButton.textContent = 'Delete';
|
|
}, 3200);
|
|
return;
|
|
}
|
|
const result = await fetch(`/api/projects/${encodeURIComponent(project.name)}`, {
|
|
method: 'DELETE'
|
|
});
|
|
if (!result.ok) {
|
|
addLog(`Delete failed for "${project.name}".`);
|
|
return;
|
|
}
|
|
addLog(`Deleted project "${project.name}".`);
|
|
loadProjects();
|
|
};
|
|
item.appendChild(deleteButton);
|
|
projectList.appendChild(item);
|
|
});
|
|
} catch (error) {
|
|
projectList.innerHTML = '<li class="project-card empty-project-card">Failed to load projects.</li>';
|
|
}
|
|
}
|
|
|
|
newProjectForm.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
projectNameInput.value = 'mxpic_project_1';
|
|
technologyModal.classList.add('open');
|
|
projectNameInput.focus();
|
|
projectNameInput.select();
|
|
});
|
|
|
|
cancelProjectButton.addEventListener('click', () => {
|
|
technologyModal.classList.remove('open');
|
|
});
|
|
|
|
createProjectButton.addEventListener('click', async () => {
|
|
const selectedTechnology = technologySelect.value;
|
|
const requestedName = projectNameInput.value.trim() || 'mxpic_project_1';
|
|
const response = await fetch('/api/projects', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ name: requestedName, technology: selectedTechnology })
|
|
});
|
|
const project = await response.json();
|
|
addLog(`Created project "${project.name}" with technology "${selectedTechnology}".`);
|
|
openProject(project.name);
|
|
});
|
|
|
|
// Fetch available foundry/technology choices for new project creation.
|
|
async function loadTechnologies() {
|
|
const response = await fetch('/api/technologies');
|
|
const data = await response.json();
|
|
technologies = data.technologies || [];
|
|
technologySelect.innerHTML = '';
|
|
technologies.forEach(tech => {
|
|
const option = document.createElement('option');
|
|
option.value = tech.id;
|
|
option.textContent = tech.label;
|
|
technologySelect.appendChild(option);
|
|
});
|
|
if (technologies.length === 0) {
|
|
const option = document.createElement('option');
|
|
option.value = '';
|
|
option.textContent = 'No technology found';
|
|
technologySelect.appendChild(option);
|
|
}
|
|
}
|
|
|
|
loadTechnologies();
|
|
loadProfile();
|
|
loadProjects();
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|