# Structure of the project

## Architecture & Frontend Patterns (Midas)

<span style="white-space: pre-wrap;">The RFID Tracker (codename </span>**Midas**) follows a traditional Django structure but uses a “Single File Component” philosophy for its views.

## Project Organization

The project is split into the core configuration and the functional app logic.

<table id="bkmrk-directory-%2F-filerole"><colgroup><col></col><col></col></colgroup><tbody><tr><td>**Directory / File**

</td><td>**Role**

</td></tr><tr><td>**`<strong class="editor-theme-bold editor-theme-code">midas/</strong>`**

</td><td>The active module containing the latest logic, models, and views.

</td></tr><tr><td>**`<strong class="editor-theme-bold editor-theme-code">webui/</strong>`**

</td><td><span style="white-space: pre-wrap;">Legacy code kept for bookkeeping; </span>**do not use**<span style="white-space: pre-wrap;"> for new features.</span>

</td></tr><tr><td>**`<strong class="editor-theme-bold editor-theme-code">templates/midas/</strong>`**

</td><td>The “Face” of the app. Contains HTML layouts, CSS, and JS.

</td></tr><tr><td>**`<strong class="editor-theme-bold editor-theme-code">models.py</strong>`**

</td><td>Database schema (RFID tags, teams, hours).

</td></tr><tr><td>**`<strong class="editor-theme-bold editor-theme-code">views.py</strong>`**

</td><td>The “Controller.” Fetches data from DB and performs calculations.

</td></tr><tr><td>**`<strong class="editor-theme-bold editor-theme-code">urls.py</strong>`**

</td><td><span style="white-space: pre-wrap;">Maps URLs to specific Python functions in </span>`<span class="editor-theme-code">views.py</span>`.

</td></tr></tbody></table>

---

## The Frontend Pattern

### Layout Strategy

Every page follows this block-based hierarchy:

1. **`<strong class="editor-theme-bold editor-theme-code">{% extends 'midas/base.html' %}</strong>`**: Inherits the sidebar, navbar, and global styles.
2. **`<strong class="editor-theme-bold editor-theme-code">{% block head %}</strong>`**: Contains page-specific CSS and external libraries (like Chart.js).
3. **`<strong class="editor-theme-bold editor-theme-code">{% block main %}</strong>`**: The actual HTML content (cards, forms, tables).
4. **`<strong class="editor-theme-bold editor-theme-code"><script></strong>`**: Local logic for charts or UI interactions.

## The “Data Bridge” (Python to JavaScript)

To keep the code clean and secure, we use a specific pattern to pass data from the Python backend to the JavaScript frontend.

### <span style="white-space: pre-wrap;">The </span>`<span class="editor-theme-code">json_script</span>`<span style="white-space: pre-wrap;"> Filter</span>

<span style="white-space: pre-wrap;">Instead of messy string concatenation, we use Django's </span>`<span class="editor-theme-code">json_script</span>`<span style="white-space: pre-wrap;"> tag. This safely injects Python dictionaries into the HTML as a JSON object that JS can read.</span>

**In the HTML Template:**  
`<span class="editor-theme-code">{{ page_data|json_script:"frontend-data" }}</span>`

**In the JavaScript block:**  
`<span class="editor-theme-code">const appData = JSON.parse(document.getElementById('frontend-data').textContent);</span>`  
`<span class="editor-theme-code">// Now appData.chart.labels is ready for Chart.js!</span>`

## Backend Logic &amp; Calculation

The heavy lifting is done in the Python files before the page even loads:

- **Calculations:**<span style="white-space: pre-wrap;"> Logic like “Total Hours” or “Avg per Member” is calculated in </span>`<span class="editor-theme-code">views.py</span>`<span style="white-space: pre-wrap;"> or helper files like </span>`<span class="editor-theme-code">statistics.py</span>`.
- **Database Interaction:**<span style="white-space: pre-wrap;"> Uses Django’s ORM (Object-Relational Mapper) to query the </span>`<span class="editor-theme-code">db.sqlite3</span>`<span style="white-space: pre-wrap;"> (dev) or the production DB.</span>
- **Forms:**<span style="white-space: pre-wrap;"> Django’s </span>`<span class="editor-theme-code">forms.py</span>`<span style="white-space: pre-wrap;"> handles input validation when you change dates or teams in the dashboard.</span>

## Admin dashboard

Django provides its own built-in admin dashboard which can be reached through “Admin Dashboard” button on the sidebar. (if you are a superuser).