mirror of
https://github.com/opelly27/WinStudentGoalTracker.git
synced 2026-05-20 01:47:41 +00:00
Merge branch 'main' of https://github.com/opelly27/WinStudentGoalTracker
This commit is contained in:
ivan-pelly
+321
-228
@@ -1,296 +1,389 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>WIN Student Goal Tracker - Technical Documentation</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>WIN Student Goal Tracker – Developer Documentation</title>
|
||||
|
||||
<style>
|
||||
:root{
|
||||
--bg:#f5f7fb;
|
||||
--card:#ffffff;
|
||||
--text:#1f2937;
|
||||
--muted:#6b7280;
|
||||
--accent:#1d4ed8;
|
||||
--accent-dark:#0f172a;
|
||||
--border:#dbe3f0;
|
||||
}
|
||||
|
||||
*{
|
||||
box-sizing:border-box;
|
||||
}
|
||||
|
||||
html{
|
||||
scroll-behavior:smooth;
|
||||
}
|
||||
|
||||
body{
|
||||
font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Ubuntu,sans-serif;
|
||||
margin:0;
|
||||
background:#f5f7fa;
|
||||
color:#111827;
|
||||
font-family:Arial, Helvetica, sans-serif;
|
||||
background:var(--bg);
|
||||
color:var(--text);
|
||||
line-height:1.6;
|
||||
}
|
||||
|
||||
header{
|
||||
background:#111827;
|
||||
color:white;
|
||||
padding:3rem 1.5rem;
|
||||
text-align:center;
|
||||
.page{
|
||||
max-width:1300px;
|
||||
margin:0 auto;
|
||||
padding:24px 20px 40px;
|
||||
display:grid;
|
||||
grid-template-columns:280px minmax(0, 1fr);
|
||||
gap:24px;
|
||||
align-items:start;
|
||||
}
|
||||
|
||||
header h1{
|
||||
.sidebar{
|
||||
position:sticky;
|
||||
top:20px;
|
||||
align-self:start;
|
||||
background:var(--card);
|
||||
border:1px solid var(--border);
|
||||
border-radius:18px;
|
||||
padding:20px;
|
||||
box-shadow:0 8px 20px rgba(15,23,42,.05);
|
||||
max-height:calc(100vh - 40px);
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
.sidebar h2{
|
||||
margin:0 0 14px;
|
||||
font-size:1.1rem;
|
||||
color:var(--accent);
|
||||
}
|
||||
|
||||
.sidebar ul{
|
||||
list-style:none;
|
||||
padding:0;
|
||||
margin:0;
|
||||
font-size:2.4rem;
|
||||
}
|
||||
|
||||
header p{
|
||||
opacity:.9;
|
||||
margin-top:.5rem;
|
||||
.sidebar li{
|
||||
margin:0;
|
||||
padding:0;
|
||||
}
|
||||
|
||||
main{
|
||||
max-width:1000px;
|
||||
margin:auto;
|
||||
padding:2rem 1rem 3rem;
|
||||
.sidebar a{
|
||||
display:block;
|
||||
padding:9px 10px;
|
||||
border-radius:10px;
|
||||
color:var(--text);
|
||||
text-decoration:none;
|
||||
font-size:.96rem;
|
||||
}
|
||||
|
||||
.card{
|
||||
background:white;
|
||||
border-radius:14px;
|
||||
padding:1.5rem;
|
||||
margin-bottom:1rem;
|
||||
box-shadow:0 8px 20px rgba(0,0,0,.05);
|
||||
.sidebar a:hover{
|
||||
background:#eff6ff;
|
||||
color:var(--accent);
|
||||
}
|
||||
|
||||
.content{
|
||||
min-width:0;
|
||||
}
|
||||
|
||||
.hero{
|
||||
background:linear-gradient(135deg,#0f172a,#1d4ed8);
|
||||
color:#fff;
|
||||
padding:40px;
|
||||
border-radius:18px;
|
||||
margin-bottom:20px;
|
||||
box-shadow:0 12px 30px rgba(15,23,42,.14);
|
||||
}
|
||||
|
||||
.hero h1{
|
||||
margin:0 0 12px;
|
||||
color:#fff;
|
||||
line-height:1.2;
|
||||
font-size:2rem;
|
||||
}
|
||||
|
||||
.hero p{
|
||||
margin:6px 0;
|
||||
}
|
||||
|
||||
section{
|
||||
background:var(--card);
|
||||
padding:24px;
|
||||
border-radius:18px;
|
||||
margin-bottom:20px;
|
||||
border:1px solid var(--border);
|
||||
box-shadow:0 8px 20px rgba(15,23,42,.05);
|
||||
scroll-margin-top:20px;
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-top:0;
|
||||
color:var(--accent);
|
||||
}
|
||||
|
||||
h3{
|
||||
color:var(--accent-dark);
|
||||
margin-top:24px;
|
||||
}
|
||||
|
||||
.grid{
|
||||
display:grid;
|
||||
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
|
||||
gap:12px;
|
||||
}
|
||||
|
||||
.card{
|
||||
border:1px solid var(--border);
|
||||
padding:14px;
|
||||
border-radius:12px;
|
||||
background:#fbfdff;
|
||||
}
|
||||
|
||||
pre{
|
||||
background:#111827;
|
||||
color:#e5e7eb;
|
||||
padding:12px 14px;
|
||||
border-radius:10px;
|
||||
overflow:auto;
|
||||
}
|
||||
|
||||
code{
|
||||
background:#eef2ff;
|
||||
padding:.2rem .4rem;
|
||||
border-radius:5px;
|
||||
font-family:"Courier New", Courier, monospace;
|
||||
}
|
||||
|
||||
table{
|
||||
ul{
|
||||
padding-left:20px;
|
||||
}
|
||||
|
||||
.mobile-nav{
|
||||
display:none;
|
||||
background:var(--card);
|
||||
border:1px solid var(--border);
|
||||
border-radius:14px;
|
||||
padding:14px;
|
||||
margin-bottom:18px;
|
||||
}
|
||||
|
||||
.mobile-nav label{
|
||||
display:block;
|
||||
font-weight:bold;
|
||||
margin-bottom:8px;
|
||||
color:var(--accent);
|
||||
}
|
||||
|
||||
.mobile-nav select{
|
||||
width:100%;
|
||||
border-collapse:collapse;
|
||||
margin-top:1rem;
|
||||
padding:10px;
|
||||
border-radius:10px;
|
||||
border:1px solid var(--border);
|
||||
background:#fff;
|
||||
color:var(--text);
|
||||
font-size:1rem;
|
||||
}
|
||||
|
||||
th,td{
|
||||
padding:.7rem;
|
||||
border-bottom:1px solid #e5e7eb;
|
||||
text-align:left;
|
||||
@media (max-width: 920px){
|
||||
.page{
|
||||
grid-template-columns:1fr;
|
||||
}
|
||||
|
||||
.btn{
|
||||
display:inline-block;
|
||||
margin-top:1rem;
|
||||
padding:.6rem 1rem;
|
||||
background:#2563eb;
|
||||
color:white;
|
||||
text-decoration:none;
|
||||
border-radius:8px;
|
||||
.sidebar{
|
||||
display:none;
|
||||
}
|
||||
|
||||
footer{
|
||||
text-align:center;
|
||||
padding:2rem;
|
||||
color:#6b7280;
|
||||
.mobile-nav{
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 640px){
|
||||
.page{
|
||||
padding:16px 14px 32px;
|
||||
}
|
||||
|
||||
.hero{
|
||||
padding:28px 22px;
|
||||
}
|
||||
|
||||
.hero h1{
|
||||
font-size:1.65rem;
|
||||
}
|
||||
|
||||
section{
|
||||
padding:20px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header>
|
||||
<h1>Technical Documentation</h1>
|
||||
<p>WIN Student Goal Tracker Architecture and Implementation</p>
|
||||
</header>
|
||||
|
||||
<main>
|
||||
|
||||
<div class="card">
|
||||
<h2>System Overview</h2>
|
||||
<p>
|
||||
The WIN Student Goal Tracker is a containerized web application designed to allow
|
||||
teachers and program staff to track student progress, goals, benchmarks, and
|
||||
events. The system follows a modern multi-tier architecture separating the
|
||||
frontend interface, backend services, and database layer.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>System Architecture</h2>
|
||||
|
||||
<p>The system architecture is organized into four main components:</p>
|
||||
|
||||
<pre>
|
||||
Browser
|
||||
│
|
||||
▼
|
||||
Angular Frontend
|
||||
│
|
||||
▼
|
||||
Traefik Reverse Proxy
|
||||
│
|
||||
▼
|
||||
.NET Core API
|
||||
│
|
||||
▼
|
||||
MySQL Database
|
||||
</pre>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Technology Stack</h2>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Layer</th>
|
||||
<th>Technology</th>
|
||||
<th>Purpose</th>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Frontend</td>
|
||||
<td>Angular 20</td>
|
||||
<td>User interface and client-side logic</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Backend</td>
|
||||
<td>.NET Core 9.0 (C#)</td>
|
||||
<td>Business logic and REST APIs</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>ORM</td>
|
||||
<td>Dapper</td>
|
||||
<td>Lightweight database access</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Authentication</td>
|
||||
<td>JWT + Refresh Tokens</td>
|
||||
<td>Secure user authentication</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Database</td>
|
||||
<td>MySQL</td>
|
||||
<td>Persistent data storage</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Infrastructure</td>
|
||||
<td>Docker Containers</td>
|
||||
<td>Application deployment</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td>Reverse Proxy</td>
|
||||
<td>Traefik</td>
|
||||
<td>Routing and SSL certificate management</td>
|
||||
</tr>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Authentication</h2>
|
||||
|
||||
<p>
|
||||
The application uses <strong>JSON Web Tokens (JWT)</strong> for authentication.
|
||||
After login, the server generates a JWT token which is used to authenticate
|
||||
subsequent API requests.
|
||||
</p>
|
||||
|
||||
<div class="page">
|
||||
<aside class="sidebar">
|
||||
<h2>Navigation</h2>
|
||||
<ul>
|
||||
<li>Access Tokens authenticate API requests</li>
|
||||
<li>Refresh Tokens extend user sessions</li>
|
||||
<li>Program-scoped tokens restrict access to authorized programs</li>
|
||||
<li><a href="#project-description">1. Project Description</a></li>
|
||||
<li><a href="#architecture">2. Architecture</a></li>
|
||||
<li><a href="#data-flow">3. Data Flow</a></li>
|
||||
<li><a href="#hosting">4. Hosting</a></li>
|
||||
<li><a href="#installation">5. Installation</a></li>
|
||||
<li><a href="#authentication">6. Authentication</a></li>
|
||||
<li><a href="#backup">7. Database Backup</a></li>
|
||||
<li><a href="#environment">8. Environment Variables</a></li>
|
||||
<li><a href="#partner-statement">9. Partner Statement</a></li>
|
||||
<li><a href="#walkthrough">10. Walkthrough</a></li>
|
||||
<li><a href="#screenshots">11. Screenshots & Analysis</a></li>
|
||||
<li><a href="#improvements">12. Improvements</a></li>
|
||||
<li><a href="#sustainability">13. Sustainability</a></li>
|
||||
<li><a href="#appendix-b">Appendix B – Structure</a></li>
|
||||
</ul>
|
||||
</aside>
|
||||
|
||||
<main class="content">
|
||||
<div class="mobile-nav">
|
||||
<label for="section-nav">Jump to section</label>
|
||||
<select id="section-nav" onchange="if(this.value) location.href=this.value;">
|
||||
<option value="">Select a section</option>
|
||||
<option value="#project-description">1. Project Description</option>
|
||||
<option value="#architecture">2. Architecture</option>
|
||||
<option value="#data-flow">3. Data Flow</option>
|
||||
<option value="#hosting">4. Hosting</option>
|
||||
<option value="#installation">5. Installation</option>
|
||||
<option value="#authentication">6. Authentication</option>
|
||||
<option value="#backup">7. Database Backup</option>
|
||||
<option value="#environment">8. Environment Variables</option>
|
||||
<option value="#partner-statement">9. Partner Statement</option>
|
||||
<option value="#walkthrough">10. Walkthrough</option>
|
||||
<option value="#screenshots">11. Screenshots & Analysis</option>
|
||||
<option value="#improvements">12. Improvements</option>
|
||||
<option value="#sustainability">13. Sustainability</option>
|
||||
<option value="#appendix-b">Appendix B – Structure</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Database Design</h2>
|
||||
<div class="hero">
|
||||
<h1>WIN Student Goal Tracker – Developer Documentation</h1>
|
||||
<p><strong>Date:</strong> April 2026</p>
|
||||
<p><strong>Project:</strong> WIN Student Goal Tracker</p>
|
||||
</div>
|
||||
|
||||
<p>The MySQL database stores the application data for students and progress tracking.</p>
|
||||
<section id="project-description">
|
||||
<h2>1. Project Description</h2>
|
||||
<p>
|
||||
The WIN Student Goal Tracker is a web-based case management system designed to support organizations working with adults with special needs. The platform enables staff to track student goals, document services, and log critical incidents while maintaining strong privacy, auditability, and compliance with FERPA, IDEA, and FAPE.
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<section id="architecture">
|
||||
<h2>2. Architecture</h2>
|
||||
|
||||
<h3>Technology Stack</h3>
|
||||
<div class="grid">
|
||||
<div class="card"><b>Frontend:</b> Angular 20</div>
|
||||
<div class="card"><b>Backend:</b> .NET 9.0 + Dapper</div>
|
||||
<div class="card"><b>Authentication:</b> JWT + Refresh Tokens</div>
|
||||
<div class="card"><b>Database:</b> MySQL</div>
|
||||
<div class="card"><b>Infrastructure:</b> Docker + VPS + Traefik</div>
|
||||
</div>
|
||||
|
||||
<h3>Architecture Description</h3>
|
||||
<ul>
|
||||
<li>Users</li>
|
||||
<li>Programs</li>
|
||||
<li>Students</li>
|
||||
<li>Goals</li>
|
||||
<li>Benchmarks</li>
|
||||
<li>Progress Events</li>
|
||||
<li>Presentation Layer: Angular</li>
|
||||
<li>Application Layer: .NET API</li>
|
||||
<li>Data Layer: MySQL</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<p>
|
||||
The backend uses <strong>Dapper ORM</strong> to execute SQL queries and map results
|
||||
to application objects.
|
||||
</p>
|
||||
<section id="data-flow">
|
||||
<h2>3. Data Flow</h2>
|
||||
<p><b>Create Goal:</b><br>User → Angular → API → Database → UI</p>
|
||||
<p><b>View Dashboard:</b><br>User → Angular → API → Database → UI</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<section id="hosting">
|
||||
<h2>4. Hosting</h2>
|
||||
<ul>
|
||||
<li>Frontend: GitHub Pages / Netlify</li>
|
||||
<li>Backend: Render / Railway</li>
|
||||
<li>Database: PlanetScale</li>
|
||||
<li>Alternative: VPS with Docker</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div class="card">
|
||||
<h2>Infrastructure</h2>
|
||||
<section id="installation">
|
||||
<h2>5. Installation</h2>
|
||||
|
||||
<p>
|
||||
The system is deployed using Docker containers on a Virtual Private Server (VPS).
|
||||
Each component runs in its own container to maintain separation and scalability.
|
||||
</p>
|
||||
<h3>Frontend</h3>
|
||||
<pre><code>cd frontend
|
||||
npm install
|
||||
npm start</code></pre>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Container</th>
|
||||
<th>Function</th>
|
||||
</tr>
|
||||
<h3>Backend</h3>
|
||||
<pre><code>cd backend
|
||||
dotnet restore
|
||||
dotnet run</code></pre>
|
||||
|
||||
<tr>
|
||||
<td>Angular</td>
|
||||
<td>Frontend application</td>
|
||||
</tr>
|
||||
<h3>Docker</h3>
|
||||
<pre><code>docker-compose up --build</code></pre>
|
||||
</section>
|
||||
|
||||
<tr>
|
||||
<td>.NET Core API</td>
|
||||
<td>Backend services</td>
|
||||
</tr>
|
||||
<section id="authentication">
|
||||
<h2>6. Authentication</h2>
|
||||
<p>JWT-based authentication with refresh tokens and secure API access control.</p>
|
||||
</section>
|
||||
|
||||
<tr>
|
||||
<td>MySQL</td>
|
||||
<td>Database server</td>
|
||||
</tr>
|
||||
<section id="backup">
|
||||
<h2>7. Database Backup</h2>
|
||||
|
||||
<tr>
|
||||
<td>Traefik</td>
|
||||
<td>Reverse proxy and SSL manager</td>
|
||||
</tr>
|
||||
<pre><code>mysqldump -u username -p dbname > backup.sql</code></pre>
|
||||
|
||||
</table>
|
||||
<pre><code>mysql -u username -p dbname < backup.sql</code></pre>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<section id="environment">
|
||||
<h2>8. Environment Variables</h2>
|
||||
|
||||
<div class="card">
|
||||
<h2>Deployment</h2>
|
||||
<pre><code>DB_CONNECTION=...
|
||||
JWT_SECRET=...
|
||||
JWT_EXPIRATION=3600</code></pre>
|
||||
</section>
|
||||
|
||||
<p>
|
||||
The application is deployed using Docker containers orchestrated on a VPS.
|
||||
Traefik automatically handles HTTPS certificates and routes traffic to the
|
||||
appropriate container.
|
||||
</p>
|
||||
<section id="partner-statement">
|
||||
<h2>9. Partner Statement</h2>
|
||||
<p>The partner has reviewed the developer documentation and understands the system.</p>
|
||||
</section>
|
||||
|
||||
<pre>
|
||||
User Browser
|
||||
│
|
||||
▼
|
||||
Traefik Reverse Proxy
|
||||
│
|
||||
├── Angular Container
|
||||
│
|
||||
└── .NET Core API Container
|
||||
│
|
||||
▼
|
||||
MySQL Container
|
||||
</pre>
|
||||
<section id="walkthrough">
|
||||
<h2>10. Walkthrough</h2>
|
||||
<p>An installation walkthrough was conducted and successfully completed.</p>
|
||||
</section>
|
||||
|
||||
</div>
|
||||
<section id="screenshots">
|
||||
<h2>11. Screenshots & Analysis</h2>
|
||||
<p>Lighthouse metrics and Chrome DevTools analysis should include Mobile, Tablet, and Desktop views. UX is clean with improvements needed for mobile responsiveness.</p>
|
||||
</section>
|
||||
|
||||
<a class="btn" href="/">Back to Project Home</a>
|
||||
<section id="improvements">
|
||||
<h2>12. Improvements</h2>
|
||||
<p>Optimize performance, reduce JavaScript bundle size, and improve mobile UX consistency.</p>
|
||||
</section>
|
||||
|
||||
<section id="sustainability">
|
||||
<h2>13. Sustainability</h2>
|
||||
<p>Uses free-tier hosting, Docker-based deployment, and modular architecture to support long-term maintainability.</p>
|
||||
</section>
|
||||
|
||||
<section id="appendix-b">
|
||||
<h2>Appendix – Structure</h2>
|
||||
<pre><code>/frontend
|
||||
/backend
|
||||
/database
|
||||
/docker
|
||||
/docs</code></pre>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
© 2026 WIN Student Goal Tracker
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+13
-11
@@ -20,17 +20,6 @@
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="description">Description</label>
|
||||
<textarea
|
||||
id="description"
|
||||
[(ngModel)]="form.description"
|
||||
name="description"
|
||||
rows="3"
|
||||
placeholder="Describe the goal..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label for="baseline">Baseline</label>
|
||||
<textarea
|
||||
@@ -42,6 +31,19 @@
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="field">
|
||||
<label for="description">Goal</label>
|
||||
<textarea
|
||||
id="description"
|
||||
[(ngModel)]="form.description"
|
||||
name="description"
|
||||
rows="3"
|
||||
placeholder="Enter goal..."
|
||||
></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="field">
|
||||
<label for="targetCompletionDate">Target Completion Date</label>
|
||||
<input
|
||||
|
||||
+7
-5
@@ -20,16 +20,18 @@
|
||||
<label class="field-label" for="category">Category</label>
|
||||
<input id="category" class="field-input" type="text" [(ngModel)]="category" />
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label" for="description">Description</label>
|
||||
<textarea id="description" class="field-input field-textarea" [(ngModel)]="description" rows="4"
|
||||
placeholder="Enter description..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field-label" for="baseline">Baseline</label>
|
||||
<textarea id="baseline" class="field-input field-textarea" [(ngModel)]="baseline" rows="3"
|
||||
placeholder="Enter baseline..."></textarea>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label class="field-label" for="description">Goal</label>
|
||||
<textarea id="description" class="field-input field-textarea" [(ngModel)]="description" rows="4"
|
||||
placeholder="Enter goal..."></textarea>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label class="field-label" for="targetCompletionDate">Target Completion Date</label>
|
||||
<input id="targetCompletionDate" class="field-input" type="date" [(ngModel)]="targetCompletionDate" />
|
||||
|
||||
@@ -14,7 +14,11 @@
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
@if (goalNumber() > 0) {
|
||||
<p class="description"><strong>Goal {{ goalNumber() }}:</strong> {{ goal().description }}</p>
|
||||
} @else {
|
||||
<p class="description">{{ goal().description }}</p>
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="card-footer">
|
||||
|
||||
@@ -19,6 +19,7 @@ export class GoalCard {
|
||||
private readonly route = inject(ActivatedRoute);
|
||||
|
||||
readonly goal = input.required<StudentGoalItem>();
|
||||
readonly goalNumber = input<number>(0);
|
||||
|
||||
// ************************** Properties ***************************
|
||||
|
||||
|
||||
@@ -28,8 +28,8 @@
|
||||
</div>
|
||||
} @else {
|
||||
<div class="card-grid">
|
||||
@for (goal of goals(); track goal.goalId) {
|
||||
<app-goal-card [goal]="goal" />
|
||||
@for (goal of goals(); track goal.goalId; let i = $index) {
|
||||
<app-goal-card [goal]="goal" [goalNumber]="i + 1" />
|
||||
}
|
||||
</div>
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user