opelly/WinStudentGoalTracker
1
0
Fork 0
mirror of https://github.com/opelly27/WinStudentGoalTracker.git synced 2026-05-20 02:57:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'main' of https://github.com/opelly27/WinStudentGoalTracker

Browse Source
This commit is contained in:
ivan-pelly
2026-04-19 14:09:33 -07:00
parent cd204e4d10 a8f4b06b66
commit b49f8d9cda
18 changed files with 425 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/technical.html
+207 -12
View File
@@ -1224,25 +1224,220 @@
<section id="install"> <section id="install">
<h2>5. Application Installation</h2> <h2>5. Application Installation</h2>
<p>
The application is composed of three moving parts — an Angular 20 SPA (<code>ui/winstudentgoaltracker</code>),
a .NET 9 Web API (<code>api/</code>), and a MySQL 8 database initialised from the SQL objects in
<code>db/Objects/</code>. Configuration for every tier is read from a single <code>.env</code> file at the
repository root. Two workflows are supported: running the stack directly on a developer workstation, or
deploying the full stack to a server with <code>docker compose</code> behind an existing Traefik reverse
proxy.
</p>
<h3>Prerequisites</h3> <h3>5.1 Local Development Environment</h3>
<p>Node.js, .NET 9 SDK, MySQL, Docker</p> <p>
The recommended local workflow runs MySQL in Docker (so the schema initialises itself from
<code>db/docker-init/01-schema.sh</code>) while the API and UI run on the host for fast iteration and
debugging.
</p>
<h3>Frontend</h3> <h4>Prerequisites</h4>
<pre><code>cd frontend <ul>
npm install <li><strong>Node.js 22+</strong> and <strong>npm</strong> — to run the Angular CLI</li>
npm start</code></pre> <li><strong>.NET 9 SDK</strong> — to build and run the API</li>
<li><strong>Docker Desktop</strong> (or Docker Engine + Compose plugin) — to run MySQL</li>
<li><strong>Git</strong> — to clone the repository</li>
</ul>
<h3>Backend</h3> <h4>Step 1 — Clone and create <code>.env</code></h4>
<pre><code>cd backend <p>
Clone the repository and create a <code>.env</code> file at the project root. The API reads it via
<code>DotNetEnv</code> (which traverses parent directories), the UI/API containers read it through
<code>docker-compose.yml</code>'s <code>env_file</code> directive, and the MySQL container consumes the
<code>MYSQL_*</code> variables natively.
</p>
<pre><code>git clone &lt;repo-url&gt; WinStudentGoalTracker
cd WinStudentGoalTracker</code></pre>
<p>Create <code>.env</code> with the following keys (replace the secrets before sharing or deploying):</p>
<pre><code># MySQL container bootstrap
MYSQL_ROOT_PASSWORD=change_me_root
MYSQL_DATABASE=winstudentgoaltracker
MYSQL_USER=appuser
MYSQL_PASSWORD=change_me_app
# Connection used by the .NET API
MYSQL_HOST=127.0.0.1
MYSQL_PORT=3309
# (the api falls back to root/no-password if MYSQL_USER/PASSWORD are omitted)
# JWT signing key — must be &gt;= 32 bytes
JWT_KEY=replace_with_a_long_random_string_at_least_32_chars</code></pre>
<p>
<code>.env</code> is listed in <code>.gitignore</code>; never commit it. For local dev, point
<code>MYSQL_HOST</code> at <code>127.0.0.1</code> so the host-side API can reach the containerised MySQL
through the published port <code>3309</code>.
</p>
<h4>Step 2 — Start MySQL</h4>
<p>
Bring up only the database service from the root compose file. On first run it creates the volume, creates
the database and application user, and executes <code>db/docker-init/01-schema.sh</code> which loads tables,
functions, views, and stored procedures from <code>db/Objects/</code> in the correct order.
</p>
<pre><code>docker compose up -d mysql
docker compose logs -f mysql # watch for "Schema initialization complete"</code></pre>
<p>
MySQL is exposed on host port <code>3309</code> (mapped to container port <code>3306</code>). To reset the
database during development, stop the container and remove the named volume:
<code>docker compose down &amp;&amp; docker volume rm winstudentgoaltracker_win_mysql_data</code>.
</p>
<h4>Step 3 — Run the API</h4>
<pre><code>cd api
dotnet restore dotnet restore
dotnet run</code></pre> dotnet run</code></pre>
<p>
The API listens on <code>http://localhost:5000</code> (and <code>https://localhost:5001</code>) by default
via Kestrel. Swagger UI is available at <code>/swagger</code> when running in the
<code>Development</code> environment (the default for <code>dotnet run</code>). On startup the console
prints the resolved MySQL connection string — verify it points at <code>127.0.0.1:3309</code> and the
database name from your <code>.env</code>.
</p>
<h3>Database</h3> <h4>Step 4 — Run the UI</h4>
<p>Create DB, import schema, update <code>.env</code>.</p> <pre><code>cd ui/winstudentgoaltracker
npm install
npm start</code></pre>
<p>
The Angular dev server starts on <code>http://localhost:4200</code>. The base URL the UI calls is defined in
<code>src/environments/environment.development.ts</code>. For a fully local stack, edit that file so
<code>apiBaseUrl</code> points at your locally running API (e.g. <code>http://localhost:5000</code>) instead
of the deployed <code>https://winapi.opelly.me</code>. The API's CORS policy already allows any origin in
development.
</p>
<h3>Docker</h3> <h4>Step 5 — Seed a user</h4>
<pre><code>docker-compose up --build</code></pre> <p>
The schema initialises empty. To sign in, insert at least one <code>user</code>, one
<code>school_district</code>, one <code>program</code>, and a <code>user_program</code> row linking the user
to the program with a role. Passwords are hashed with PBKDF2 by <code>PasswordHasher</code>; the simplest
path is to use an existing seeded dump (ask a team member for <code>seed.sql</code>) or register via a
<code>super_admin</code> account using the admin endpoints.
</p>
<h3>5.2 Production Deployment (Docker Compose + Traefik)</h3>
<p>
Production deploys all four tiers — MySQL, .NET API, Nginx-served Angular build, and the Traefik reverse
proxy — as Docker containers on a single VPS. The repository's <code>docker-compose.yml</code> brings up
MySQL, the API, and the UI; <strong>Traefik runs in a separate compose stack</strong> on the same host and
publishes ports 80/443 for the whole server. The two stacks communicate through an external Docker network
named <code>web</code>.
</p>
<h4>Prerequisites on the server</h4>
<ul>
<li>Linux VPS with <strong>Docker Engine</strong> and the <strong>Compose plugin</strong> installed</li>
<li>Ports <strong>80</strong> and <strong>443</strong> open on the server's firewall</li>
<li>Two DNS <code>A</code> records pointing at the server's public IP:
<code>win.&lt;your-domain&gt;</code> (UI) and <code>winapi.&lt;your-domain&gt;</code> (API)</li>
<li>A working Traefik stack on the host (see next section)</li>
</ul>
<h4>Setting up Traefik (one-time)</h4>
<p>
Traefik is the edge router that terminates TLS, requests Let's Encrypt certificates, and forwards traffic to
the correct container based on the <code>Host()</code> rule. The WIN compose file assumes Traefik is already
running on the host and configured with:
</p>
<ul>
<li>An <strong>external Docker network named <code>web</code></strong> that Traefik is attached to. The
application's UI and API containers join this network so Traefik can reach them.
<pre><code>docker network create web</code></pre>
</li>
<li>An entrypoint named <strong><code>websecure</code></strong> listening on <code>:443</code> (and typically
a redirect from <code>:80</code>).</li>
<li>A certificate resolver named <strong><code>letsencrypt</code></strong> (ACME, HTTP or DNS challenge)
configured with an email and a persistent <code>acme.json</code> volume.</li>
<li>Two file-provider middlewares referenced by the labels in <code>docker-compose.yml</code>:
<strong><code>gzip@file</code></strong> (compression) and
<strong><code>security-headers@file</code></strong> (HSTS, frame-deny, etc.).</li>
</ul>
<p>
A minimal Traefik <code>docker-compose.yml</code> typically lives in <code>/opt/traefik/</code> alongside a
<code>traefik.yml</code> static config (declaring the entrypoints, providers, and ACME resolver) and a
<code>dynamic/</code> directory containing the <code>gzip</code> and <code>security-headers</code>
middleware definitions. Traefik's official documentation at
<a href="https://doc.traefik.io/traefik/">doc.traefik.io</a> covers this setup in detail — the WIN stack
does not prescribe a specific Traefik configuration, it only requires that the network, entrypoint, cert
resolver, and middleware names above exist.
</p>
<h4>Step 1 — Prepare the repository on the server</h4>
<pre><code>git clone &lt;repo-url&gt; /opt/winstudentgoaltracker
cd /opt/winstudentgoaltracker</code></pre>
<h4>Step 2 — Populate <code>.env</code></h4>
<p>Same keys as the local workflow, but with production-safe values. For the containerised deployment,
<code>MYSQL_HOST</code> must be the service name <code>mysql</code> (the API container resolves it over the
internal <code>backend</code> Docker network) and <code>MYSQL_PORT</code> must be <code>3306</code> (the
container's internal port, not the host-mapped <code>3309</code>):</p>
<pre><code>MYSQL_ROOT_PASSWORD=&lt;strong-random&gt;
MYSQL_DATABASE=winstudentgoaltracker
MYSQL_USER=appuser
MYSQL_PASSWORD=&lt;strong-random&gt;
MYSQL_HOST=mysql
MYSQL_PORT=3306
JWT_KEY=&lt;32+ byte random secret&gt;</code></pre>
<h4>Step 3 — Update domain labels (if not using <code>opelly.me</code>)</h4>
<p>
<code>docker-compose.yml</code> hard-codes the Traefik <code>Host()</code> rules
<code>winapi.opelly.me</code> and <code>win.opelly.me</code>. Edit those two labels to match your DNS
records before bringing the stack up. The UI also points at <code>https://winapi.opelly.me</code> via
<code>src/environments/environment.ts</code>; update that file and rebuild the UI image so the browser calls
your API host.
</p>
<h4>Step 4 — Build and start the stack</h4>
<pre><code>docker compose up -d --build</code></pre>
<p>This creates:</p>
<ul>
<li><code>winstudent-mysql</code> — MySQL 8 on the internal <code>backend</code> network, volume
<code>win_mysql_data</code>, schema loaded on first start.</li>
<li><code>winstudent-api</code> — .NET 9 API on port <code>8005</code>, attached to both
<code>backend</code> (to reach MySQL) and <code>web</code> (to be reached by Traefik). Published at
<code>winapi.&lt;your-domain&gt;</code> over HTTPS.</li>
<li><code>winstudent-ui</code> — Angular build served by Nginx on port <code>8006</code>, attached to
<code>web</code>. Published at <code>win.&lt;your-domain&gt;</code> over HTTPS.</li>
</ul>
<p>
Traefik picks up the new containers automatically via its Docker provider, requests TLS certificates from
Let's Encrypt on first request, and begins routing traffic. Confirm with
<code>docker compose ps</code> (all services <code>healthy</code>/<code>running</code>) and
<code>docker compose logs -f api</code> (look for the Kestrel startup line and the printed connection
string).
</p>
<h4>Step 5 — Verify</h4>
<ul>
<li>Visit <code>https://win.&lt;your-domain&gt;</code> — the login page should load over HTTPS with a valid
Let's Encrypt certificate.</li>
<li>Visit <code>https://winapi.&lt;your-domain&gt;/swagger</code> — should return 404 in production (Swagger
is only enabled in <code>Development</code>); a 404 from the API itself confirms routing works.</li>
<li>Sign in with a seeded user and check <code>docker compose logs api</code> for successful
<code>/api/Auth/Login</code> requests.</li>
</ul>
<h4>Updating a running deployment</h4>
<pre><code>cd /opt/winstudentgoaltracker
git pull
docker compose up -d --build # rebuilds changed images and recreates containers
docker compose logs -f</code></pre>
<p>
MySQL is <strong>not</strong> rebuilt by <code>--build</code> (it uses the upstream image) and its volume
persists across <code>up</code>/<code>down</code> cycles, so data survives code deployments. Schema
migrations should be applied by running the appropriate SQL files from <code>db/migrations/</code> against
the running MySQL container; see section 7 for backup procedures before running migrations.
</p>
</section> </section>
<section id="auth"> <section id="auth">
ui/winstudentgoaltracker/src/app/desktop/components/confirm-modal/confirm-modal.scss
+7 -7
View File
@@ -6,7 +6,7 @@
} }
.second-confirm-message { .second-confirm-message {
color: #DC2626; color: var(--danger);
font-weight: 600; font-weight: 600;
} }
@@ -14,29 +14,29 @@
padding: 8px 20px; padding: 8px 20px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: none; border: none;
background: #DC2626; background: var(--danger);
color: #fff; color: #fff;
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #B91C1C; background: var(--danger-dark);
} }
} }
:host ::ng-deep .btn-danger-confirm { :host ::ng-deep .btn-danger-confirm {
padding: 8px 20px; padding: 8px 20px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 2px solid #DC2626; border: 2px solid var(--danger);
background: #FEF2F2; background: var(--danger-bg-light);
color: #DC2626; color: var(--danger);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #DC2626; background: var(--danger);
color: #fff; color: #fff;
} }
} }
ui/winstudentgoaltracker/src/app/desktop/components/edit-benchmark-modal/edit-benchmark-modal.scss
+5 -5
View File
@@ -6,16 +6,16 @@
.btn-ai { .btn-ai {
padding: 7px 14px; padding: 7px 14px;
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1px solid #c4b5fd; border: 1px solid var(--accent-purple-border);
background: #f5f3ff; background: var(--accent-purple-bg);
color: #6d28d9; color: var(--accent-purple);
font-size: 13px; font-size: 13px;
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: background 0.15s; transition: background 0.15s;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: #ede9fe; background: var(--accent-purple-hover);
} }
&:disabled { &:disabled {
@@ -26,7 +26,7 @@
.recommend-error { .recommend-error {
font-size: 12px; font-size: 12px;
color: #dc2626; color: var(--danger);
margin: 6px 0 0; margin: 6px 0 0;
} }
} }
ui/winstudentgoaltracker/src/app/desktop/components/edit-event-modal/edit-event-modal.scss
+3 -3
View File
@@ -8,9 +8,9 @@
padding: 4px 10px; padding: 4px 10px;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 12px;
border: 1.5px solid #D5D5D0; border: 1.5px solid var(--border-muted);
background: #FFF; background: var(--bg-surface);
color: #666; color: var(--text-secondary);
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
transition: all 0.15s ease; transition: all 0.15s ease;
ui/winstudentgoaltracker/src/app/desktop/components/modal-shell/modal-shell.scss
+4 -4
View File
@@ -64,7 +64,7 @@
display: block; display: block;
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #666; color: var(--text-secondary);
margin-bottom: 4px; margin-bottom: 4px;
} }
@@ -102,7 +102,7 @@
cursor: pointer; cursor: pointer;
&:hover:not(:disabled) { &:hover:not(:disabled) {
background: #3730A3; background: var(--accent-indigo-dark);
} }
&:disabled { &:disabled {
@@ -122,13 +122,13 @@
cursor: pointer; cursor: pointer;
&:hover { &:hover {
background: #e5e5e0; background: var(--border-color);
} }
} }
.error { .error {
font-size: 13px; font-size: 13px;
color: #dc2626; color: var(--danger);
margin: 0 0 8px; margin: 0 0 8px;
} }
} }
ui/winstudentgoaltracker/src/app/desktop/components/student-progress-report/student-progress-report.scss
+1 -1
View File
@@ -93,6 +93,6 @@
min-width: 6rem; min-width: 6rem;
&:hover { &:hover {
background: #3730A3 !important; background: var(--accent-indigo-dark) !important;
} }
} }
ui/winstudentgoaltracker/src/app/desktop/components/toast-host/toast-host.html
+13
View File
@@ -0,0 +1,13 @@
<div class="toast-stack">
@for (t of toast.toasts(); track t.id) {
<div class="toast" [class]="'toast--' + t.type">
<span class="toast-msg">{{ t.message }}</span>
<button class="toast-close" (click)="toast.dismiss(t.id)" aria-label="Dismiss">
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round">
<line x1="18" y1="6" x2="6" y2="18"/>
<line x1="6" y1="6" x2="18" y2="18"/>
</svg>
</button>
</div>
}
</div>
ui/winstudentgoaltracker/src/app/desktop/components/toast-host/toast-host.scss
+75
View File
@@ -0,0 +1,75 @@
.toast-stack {
position: fixed;
top: 16px;
right: 16px;
z-index: 9999;
display: flex;
flex-direction: column;
gap: 8px;
pointer-events: none;
}
.toast {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 12px;
border-radius: var(--radius-lg);
font-size: 13px;
font-weight: 500;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
pointer-events: all;
animation: toast-in 0.15s ease;
min-width: 180px;
max-width: 300px;
&--success {
background: var(--bg-surface);
border: 1px solid var(--border-color);
color: var(--text-primary);
}
&--error {
background: var(--danger-bg-light);
border: 1px solid var(--danger);
color: var(--danger);
}
&--info {
background: var(--accent-indigo-bg);
border: 1px solid var(--accent-indigo-border-light);
color: var(--accent-indigo);
}
}
.toast-msg {
flex: 1;
}
.toast-close {
background: none;
border: none;
padding: 2px;
cursor: pointer;
color: inherit;
opacity: 0.45;
display: flex;
align-items: center;
flex-shrink: 0;
border-radius: var(--radius-sm);
&:hover {
opacity: 1;
}
}
@keyframes toast-in {
from {
opacity: 0;
transform: translateX(8px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
ui/winstudentgoaltracker/src/app/desktop/components/toast-host/toast-host.ts
+11
View File
@@ -0,0 +1,11 @@
import { Component, inject } from '@angular/core';
import { ToastService } from '../../../shared/services/toast.service';
@Component({
selector: 'app-toast-host',
templateUrl: './toast-host.html',
styleUrl: './toast-host.scss',
})
export class ToastHost {
protected readonly toast = inject(ToastService);
}
ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.html
+3 -2
View File
@@ -68,13 +68,14 @@
<div class="student-info"> <div class="student-info">
<h1 class="student-name">{{ student()!.identifier }}</h1> <h1 class="student-name">{{ student()!.identifier }}</h1>
<span class="student-iep">IEP {{ formatDate(student()!.nextIepDate) }}</span> <span class="student-iep">IEP {{ formatDate(student()!.nextIepDate) }}</span>
<button class="delete-student-btn" (click)="onDeleteStudent()" aria-label="Delete student" title="Delete student"> <button class="delete-student-btn" (click)="onDeleteStudent()" aria-label="Delete student">
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"> <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<polyline points="3 6 5 6 21 6"/> <polyline points="3 6 5 6 21 6"/>
<path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/> <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
<line x1="10" y1="11" x2="10" y2="17"/> <line x1="10" y1="11" x2="10" y2="17"/>
<line x1="14" y1="11" x2="14" y2="17"/> <line x1="14" y1="11" x2="14" y2="17"/>
</svg> </svg>
Delete student
</button> </button>
</div> </div>
<div class="goal-tabs"> <div class="goal-tabs">
ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.scss
+34 -30
View File
@@ -46,20 +46,24 @@
.delete-student-btn { .delete-student-btn {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; gap: 6px;
margin-left: auto; margin-left: auto;
align-self: center; align-self: center;
padding: 4px; padding: 6px 12px;
border: none; border: 1px solid var(--border-muted);
background: none; background: none;
color: var(--text-faint); color: var(--text-muted);
font-size: 12px;
font-weight: 500;
font-family: inherit;
cursor: pointer; cursor: pointer;
border-radius: var(--radius-sm); border-radius: var(--radius-md);
transition: color var(--transition-fast), background var(--transition-fast); transition: color var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast);
&:hover { &:hover {
color: #DC2626; color: var(--danger);
background: #FEE2E2; background: var(--danger-bg);
border-color: var(--danger);
} }
} }
@@ -76,7 +80,7 @@
border-radius: var(--radius-md); border-radius: var(--radius-md);
border: 1.5px solid var(--border-color); border: 1.5px solid var(--border-color);
background: var(--bg-surface); background: var(--bg-surface);
color: #666; color: var(--text-secondary);
font-weight: 400; font-weight: 400;
font-size: 13px; font-size: 13px;
cursor: pointer; cursor: pointer;
@@ -85,9 +89,9 @@
&.active { &.active {
font-weight: 600; font-weight: 600;
border-color: #818CF8; border-color: var(--accent-indigo-border);
background: #EEF2FF; background: var(--accent-indigo-bg);
color: #4338CA; color: var(--accent-indigo);
} }
&.add-goal { &.add-goal {
@@ -127,8 +131,8 @@
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 3px 8px; padding: 3px 8px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
color: #4338CA; color: var(--accent-indigo);
background: #EEF2FF; background: var(--accent-indigo-bg);
} }
.goal-due { .goal-due {
@@ -172,8 +176,8 @@
transition: color var(--transition-fast), background var(--transition-fast); transition: color var(--transition-fast), background var(--transition-fast);
&:hover { &:hover {
color: #DC2626; color: var(--danger);
background: #FEE2E2; background: var(--danger-bg);
} }
} }
@@ -181,7 +185,7 @@
font-size: 15px; font-size: 15px;
line-height: 1.55; line-height: 1.55;
margin: 0; margin: 0;
color: #333; color: var(--text-primary);
} }
/* ─── Sub Tabs ─── */ /* ─── Sub Tabs ─── */
@@ -207,8 +211,8 @@
&.active { &.active {
font-weight: 600; font-weight: 600;
color: #4338CA; color: var(--accent-indigo);
border-bottom-color: #6366F1; border-bottom-color: var(--accent-indigo-light);
} }
} }
@@ -237,7 +241,7 @@
.benchmark-name { .benchmark-name {
font-weight: 600; font-weight: 600;
font-size: 14px; font-size: 14px;
color: #4338CA; color: var(--accent-indigo);
} }
.benchmark-events { .benchmark-events {
@@ -267,8 +271,8 @@
transition: color var(--transition-fast), background var(--transition-fast); transition: color var(--transition-fast), background var(--transition-fast);
&:hover { &:hover {
color: #DC2626; color: var(--danger);
background: #FEE2E2; background: var(--danger-bg);
} }
} }
@@ -300,8 +304,8 @@
width: 12px; width: 12px;
height: 12px; height: 12px;
border-radius: 50%; border-radius: 50%;
border: 2px solid #818CF8; border: 2px solid var(--accent-indigo-border);
background: #EEF2FF; background: var(--accent-indigo-bg);
} }
.event-card { .event-card {
@@ -327,7 +331,7 @@
font-size: 13px; font-size: 13px;
line-height: 1.55; line-height: 1.55;
margin: 0; margin: 0;
color: #333; color: var(--text-primary);
} }
.delete-event-btn { .delete-event-btn {
@@ -344,8 +348,8 @@
transition: color var(--transition-fast), background var(--transition-fast); transition: color var(--transition-fast), background var(--transition-fast);
&:hover { &:hover {
color: #DC2626; color: var(--danger);
background: #FEE2E2; background: var(--danger-bg);
} }
} }
@@ -359,11 +363,11 @@
.benchmark-tag { .benchmark-tag {
font-size: 11px; font-size: 11px;
font-weight: 500; font-weight: 500;
color: #4338CA; color: var(--accent-indigo);
background: #EEF2FF; background: var(--accent-indigo-bg);
padding: 3px 8px; padding: 3px 8px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
border: 1px solid #C7D2FE; border: 1px solid var(--accent-indigo-border-light);
} }
/* ─── Add Buttons ─── */ /* ─── Add Buttons ─── */
ui/winstudentgoaltracker/src/app/desktop/components/workspace/workspace.ts
+10
View File
@@ -10,6 +10,7 @@ import { EditBenchmarkModal } from '../edit-benchmark-modal/edit-benchmark-modal
import { EditEventModal } from '../edit-event-modal/edit-event-modal'; import { EditEventModal } from '../edit-event-modal/edit-event-modal';
import { EditIcon } from '../edit-icon/edit-icon'; import { EditIcon } from '../edit-icon/edit-icon';
import { ConfirmModal } from '../confirm-modal/confirm-modal'; import { ConfirmModal } from '../confirm-modal/confirm-modal';
import { ToastService } from '../../../shared/services/toast.service';
import { formatDate } from '../../../shared/utils/format-date'; import { formatDate } from '../../../shared/utils/format-date';
type TabView = 'benchmarks' | 'progress'; type TabView = 'benchmarks' | 'progress';
@@ -66,6 +67,7 @@ export class Workspace {
private readonly studentService = inject(StudentService); private readonly studentService = inject(StudentService);
private readonly route = inject(ActivatedRoute); private readonly route = inject(ActivatedRoute);
private readonly router = inject(Router); private readonly router = inject(Router);
private readonly toast = inject(ToastService);
protected readonly studentId = signal<string | null>(null); protected readonly studentId = signal<string | null>(null);
protected readonly student = signal<StudentCardDto | null>(null); protected readonly student = signal<StudentCardDto | null>(null);
@@ -136,6 +138,7 @@ export class Workspace {
onGoalSaved() { onGoalSaved() {
this.showGoalModal.set(null); this.showGoalModal.set(null);
this.refetchProfile(); this.refetchProfile();
this.toast.show('Goal updated');
} }
onAddGoal() { onAddGoal() {
@@ -162,6 +165,7 @@ export class Workspace {
this.selectedGoalId.set(null); this.selectedGoalId.set(null);
this.studentService.notifyDataChanged(); this.studentService.notifyDataChanged();
await this.refetchProfile(); await this.refetchProfile();
this.toast.show('Goal deleted');
} }
onGoalCreated(goal: StudentGoalItem) { onGoalCreated(goal: StudentGoalItem) {
@@ -170,6 +174,7 @@ export class Workspace {
this.refetchProfile().then(() => { this.refetchProfile().then(() => {
this.selectedGoalId.set(goal.goalId); this.selectedGoalId.set(goal.goalId);
}); });
this.toast.show('Goal added');
} }
onEditBenchmark(b: BenchmarkDto) { onEditBenchmark(b: BenchmarkDto) {
@@ -179,6 +184,7 @@ export class Workspace {
onEditBenchmarkSaved() { onEditBenchmarkSaved() {
this.showEditBenchmarkModal.set(null); this.showEditBenchmarkModal.set(null);
this.refetchProfile(); this.refetchProfile();
this.toast.show('Benchmark saved');
} }
onAddBenchmark() { onAddBenchmark() {
@@ -204,6 +210,7 @@ export class Workspace {
if (!result.success) return; if (!result.success) return;
await this.refetchProfile(); await this.refetchProfile();
this.toast.show('Benchmark deleted');
} }
onNewEvent() { onNewEvent() {
@@ -217,6 +224,7 @@ export class Workspace {
onEventSaved() { onEventSaved() {
this.showEditEventModal.set(null); this.showEditEventModal.set(null);
this.refetchProfile(); this.refetchProfile();
this.toast.show('Progress event saved');
} }
onDeleteEvent(ev: ProgressEventWithGoalDto) { onDeleteEvent(ev: ProgressEventWithGoalDto) {
@@ -238,6 +246,7 @@ export class Workspace {
if (!result.success) return; if (!result.success) return;
await this.refetchProfile(); await this.refetchProfile();
this.toast.show('Progress event deleted');
} }
// ***************************************************************** // *****************************************************************
@@ -274,6 +283,7 @@ export class Workspace {
if (!result.success) return; if (!result.success) return;
this.studentService.notifyDataChanged(); this.studentService.notifyDataChanged();
this.toast.show('Student deleted');
this.router.navigate(['/']); this.router.navigate(['/']);
} }
ui/winstudentgoaltracker/src/app/desktop/pages/home/home.html
+1
View File
@@ -1,3 +1,4 @@
<app-toast-host />
<div class="shell"> <div class="shell">
<!-- Modals --> <!-- Modals -->
@if (showStudentModal()) { @if (showStudentModal()) {
ui/winstudentgoaltracker/src/app/desktop/pages/home/home.scss
+4 -4
View File
@@ -68,7 +68,7 @@
align-items: center; align-items: center;
width: 30px; width: 30px;
height: 16px; height: 16px;
background: #d1d5db; background: var(--toggle-inactive);
border-radius: 8px; border-radius: 8px;
padding: 2px; padding: 2px;
transition: background var(--transition-normal); transition: background var(--transition-normal);
@@ -102,11 +102,11 @@
font-weight: 600; font-weight: 600;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.04em; letter-spacing: 0.04em;
color: #4338CA; color: var(--accent-indigo);
background: #EEF2FF; background: var(--accent-indigo-bg);
padding: 6px 12px; padding: 6px 12px;
margin-top: 6px; margin-top: 6px;
border-left: 3px solid #818CF8; border-left: 3px solid var(--accent-indigo-border);
} }
.student-item { .student-item {
ui/winstudentgoaltracker/src/app/desktop/pages/home/home.ts
+6 -1
View File
@@ -5,11 +5,13 @@ import { StudentService } from '../../../shared/services/student.service';
import { StudentCardDto } from '../../../shared/classes/student-card.dto'; import { StudentCardDto } from '../../../shared/classes/student-card.dto';
import { StudentModal } from '../../components/student-modal/student-modal'; import { StudentModal } from '../../components/student-modal/student-modal';
import { EditIcon } from '../../components/edit-icon/edit-icon'; import { EditIcon } from '../../components/edit-icon/edit-icon';
import { ToastHost } from '../../components/toast-host/toast-host';
import { ToastService } from '../../../shared/services/toast.service';
import { formatDate } from '../../../shared/utils/format-date'; import { formatDate } from '../../../shared/utils/format-date';
@Component({ @Component({
selector: 'app-home', selector: 'app-home',
imports: [RouterOutlet, RouterLink, StudentModal, EditIcon], imports: [RouterOutlet, RouterLink, StudentModal, EditIcon, ToastHost],
templateUrl: './home.html', templateUrl: './home.html',
styleUrl: './home.scss', styleUrl: './home.scss',
}) })
@@ -36,6 +38,7 @@ export class Home {
protected readonly auth = inject(Auth); protected readonly auth = inject(Auth);
private readonly router = inject(Router); private readonly router = inject(Router);
private readonly studentService = inject(StudentService); private readonly studentService = inject(StudentService);
private readonly toast = inject(ToastService);
protected readonly students = signal<StudentCardDto[]>([]); protected readonly students = signal<StudentCardDto[]>([]);
protected readonly selectedStudentId = signal<string | null>(null); protected readonly selectedStudentId = signal<string | null>(null);
@@ -96,6 +99,7 @@ export class Home {
this.studentService.notifyDataChanged(); this.studentService.notifyDataChanged();
this.selectedStudentId.set(student.studentId); this.selectedStudentId.set(student.studentId);
this.router.navigate(['/students', student.studentId]); this.router.navigate(['/students', student.studentId]);
this.toast.show('Student added');
} }
onEditStudent(student: StudentCardDto, event: Event) { onEditStudent(student: StudentCardDto, event: Event) {
@@ -106,6 +110,7 @@ export class Home {
onStudentSaved() { onStudentSaved() {
this.showStudentModal.set(null); this.showStudentModal.set(null);
this.loadStudents(); this.loadStudents();
this.toast.show('Student updated');
} }
onLogout() { onLogout() {
ui/winstudentgoaltracker/src/app/desktop/styles/_detail-page.scss
+3 -3
View File
@@ -25,7 +25,7 @@
font-family: inherit; font-family: inherit;
&:hover { &:hover {
background: #EEF2FF; background: var(--accent-indigo-bg);
} }
&:disabled { &:disabled {
@@ -60,7 +60,7 @@
.field-label { .field-label {
font-size: 12px; font-size: 12px;
font-weight: 600; font-weight: 600;
color: #666; color: var(--text-secondary);
margin-bottom: 4px; margin-bottom: 4px;
} }
@@ -80,7 +80,7 @@
.error { .error {
font-size: 13px; font-size: 13px;
color: #dc2626; color: var(--danger);
margin: 0 0 12px; margin: 0 0 12px;
} }
ui/winstudentgoaltracker/src/app/shared/services/toast.service.ts
+25
View File
@@ -0,0 +1,25 @@
import { Injectable, signal } from '@angular/core';
export type ToastType = 'success' | 'error' | 'info';
export interface Toast {
id: number;
message: string;
type: ToastType;
}
@Injectable({ providedIn: 'root' })
export class ToastService {
private nextId = 0;
readonly toasts = signal<Toast[]>([]);
show(message: string, type: ToastType = 'success') {
const id = ++this.nextId;
this.toasts.update(list => [...list, { id, message, type }]);
setTimeout(() => this.dismiss(id), 3000);
}
dismiss(id: number) {
this.toasts.update(list => list.filter(t => t.id !== id));
}
}
ui/winstudentgoaltracker/src/styles.scss
+13
View File
@@ -15,6 +15,19 @@
--text-dim: #bbb; --text-dim: #bbb;
--accent-indigo: #4338CA; --accent-indigo: #4338CA;
--accent-indigo-light: #6366F1; --accent-indigo-light: #6366F1;
--accent-indigo-dark: #3730A3;
--accent-indigo-bg: #EEF2FF;
--accent-indigo-border: #818CF8;
--accent-indigo-border-light: #C7D2FE;
--accent-purple: #6d28d9;
--accent-purple-bg: #f5f3ff;
--accent-purple-border: #c4b5fd;
--accent-purple-hover: #ede9fe;
--danger: #DC2626;
--danger-dark: #B91C1C;
--danger-bg: #FEE2E2;
--danger-bg-light: #FEF2F2;
--toggle-inactive: #d1d5db;
--radius-sm: 4px; --radius-sm: 4px;
--radius-md: 6px; --radius-md: 6px;
--radius-lg: 8px; --radius-lg: 8px;