Commit 51f50121 by Prayush Kumar

APP: upload guide to run on Windows

parent 43a3b119
# ICTS Housing Cell - Allocation Portal Web GUI
A responsive, responsive Web GUI dashboard application designed to automate the housing lottery allocation process for Postdoctoral Fellows and Graduate Students based on the priority pool policies of the ICTS Housing Cell.
A responsive Web GUI dashboard application designed to automate the housing lottery allocation process for Postdoctoral Fellows and Graduate Students based on the priority pool policies of the ICTS Housing Cell.
---
## 1. Directory Structure
```text
2026/app/
app/
├── allocator.py # Core allocation and priority pooling rules engine
├── server.py # Flask HTTP Web Server handling JSON APIs
├── run.sh # Startup script to initialize the application via terminal
├── README.md # Usage instructions and logic details (this file)
├── run.sh # Startup script for Linux/macOS
├── run.bat # Startup script for Windows CMD
├── README.md # Usage instructions (this file)
└── templates/
└── index.html # HTML5 Single Page Application Web Dashboard UI
```
---
## 2. Requirements
## 2. Prerequisites
The application runs using the system's base conda environment which contains all required dependencies:
- **Python 3**
The application requires **Python 3** and the following packages:
- **Flask**
- **Pandas**
- **Numpy**
---
## 3. How to Run the Web Application
## 3. How to Run
1. Open your terminal.
2. Run the startup script directly:
### On Linux / macOS:
1. Open a terminal inside the cloned repository root folder.
2. Make `run.sh` executable and run it:
```bash
./2026/app/run.sh
chmod +x app/run.sh
./app/run.sh
```
3. Open your browser and navigate to:
[http://localhost:5000](http://localhost:5000)
3. Open your browser and navigate to: [http://localhost:5000](http://localhost:5000)
### On Windows:
1. Make sure Python 3 is installed and added to your system `PATH`.
2. Double-click the script file [run.bat](file:///home/prayush/Documents/ICTS/ICTSHousingCell/icts-housing/app/run.bat) inside the `app/` folder.
*(This script will automatically check/install `Flask`, `pandas`, and `numpy` via `pip` and start the server).*
3. Open your browser and navigate to: [http://localhost:5000](http://localhost:5000)
---
......@@ -45,6 +52,6 @@ The application runs using the system's base conda environment which contains al
- **Toggle Mode**: Switch seamlessly between **Postdocs** and **Graduate Students** allocation models.
- **CSV Response Upload**: Drag-and-drop the standard responses CSV files (from Google Forms) directly into the portal.
- **Interactive Capacity Configuration**: Adjust the available slots for each housing category (such as hostels or apartments) in real time before triggering the lottery.
- **Custom Lottery Seed**: Enter a custom integer seed (e.g. `1780813800` or date seed) to get fully reproducible allotment order.
- **Custom Date-to-Seed Tool**: Select a date and time to automatically compute and convert into the correct corresponding local timestamp seed, or specify an integer/random seed.
- **Interactive Results Table**: Browse allocations instantly. Filter, search by candidate name/email, and verify their satisfied preference rank or unallocated status.
- **Raw Export**: Download the generated allotment tables in `.txt` format (compatible with the existing format) or standard `.csv` files.
- **Raw Export**: Download the generated allotment tables in `.txt` format or standard `.csv` files.
@echo off
:: Change directory to where the batch script is located
cd /d "%~dp0"
echo Installing required Python packages (Flask, pandas, numpy)...
pip install Flask pandas numpy
echo Starting ICTS Housing Allotment Portal Web GUI...
echo Open your browser at: http://localhost:5000
python server.py
pause
......@@ -543,50 +543,80 @@
</header>
<div class="container">
<!-- Configuration Panel -->
<div class="glass-card" style="display: flex; flex-direction: column; gap: 1rem; overflow-y: auto;">
<h2>Configure Lottery</h2>
<div class="mode-toggle">
<button type="button" class="mode-btn active" id="btn-postdoc" onclick="switchMode('postdoc')">Postdocs</button>
<button type="button" class="mode-btn" id="btn-student" onclick="switchMode('student')">Students</button>
</div>
<div class="form-group">
<label>Form Responses CSV</label>
<div class="file-upload-wrapper" id="dropzone">
<div class="upload-icon">📥</div>
<div class="upload-text" id="file-name">Click or drag CSV here</div>
<div class="upload-sub">Only standard form .csv files</div>
<input type="file" id="csv-file" accept=".csv" onchange="handleFileSelect(event)">
<!-- Left Sidebar wrapper -->
<div style="display: flex; flex-direction: column; gap: 1.5rem; max-height: calc(100vh - 120px); overflow-y: auto; padding-right: 0.5rem;">
<!-- Configuration Panel -->
<div class="glass-card" style="display: flex; flex-direction: column; gap: 1rem;">
<h2>Configure Lottery</h2>
<div class="mode-toggle">
<button type="button" class="mode-btn active" id="btn-postdoc" onclick="switchMode('postdoc')">Postdocs</button>
<button type="button" class="mode-btn" id="btn-student" onclick="switchMode('student')">Students</button>
</div>
</div>
<div class="form-group">
<label>Housing Category Capacities</label>
<div class="capacity-list" id="capacity-list-container">
<!-- Loaded dynamically -->
<div class="form-group">
<label>Form Responses CSV</label>
<div class="file-upload-wrapper" id="dropzone">
<div class="upload-icon">📥</div>
<div class="upload-text" id="file-name">Click or drag CSV here</div>
<div class="upload-sub">Only standard form .csv files</div>
<input type="file" id="csv-file" accept=".csv" onchange="handleFileSelect(event)">
</div>
</div>
</div>
<div class="form-group" style="display: flex; flex-direction: column; gap: 0.8rem;">
<div>
<label>Convert Datetime to Seed</label>
<div class="seed-wrapper">
<input type="datetime-local" class="input-text" id="datetime-input" style="font-family: inherit;">
<button type="button" class="btn btn-secondary" onclick="convertDatetimeToSeed()">Convert</button>
<div class="form-group">
<label>Housing Category Capacities</label>
<div class="capacity-list" id="capacity-list-container">
<!-- Loaded dynamically -->
</div>
</div>
<div>
<label>Lottery RNG Seed</label>
<div class="seed-wrapper">
<input type="text" class="input-text" id="seed-input" placeholder="e.g. 1780813800">
<button type="button" class="btn btn-secondary" onclick="generateRandomSeed()">Gen Random</button>
<div class="form-group" style="display: flex; flex-direction: column; gap: 0.8rem;">
<div>
<label>Convert Datetime to Seed</label>
<div class="seed-wrapper">
<input type="datetime-local" class="input-text" id="datetime-input" style="font-family: inherit;">
<button type="button" class="btn btn-secondary" onclick="convertDatetimeToSeed()">Convert</button>
</div>
</div>
<div>
<label>Lottery RNG Seed</label>
<div class="seed-wrapper">
<input type="text" class="input-text" id="seed-input" placeholder="e.g. 1780813800">
<button type="button" class="btn btn-secondary" onclick="generateRandomSeed()">Gen Random</button>
</div>
</div>
</div>
<button type="button" class="btn run-btn" onclick="executeAllocation()">Run Housing Lottery</button>
</div>
<button type="button" class="btn run-btn" onclick="executeAllocation()">Run Housing Lottery</button>
<!-- User Guide Card -->
<div class="glass-card" style="padding: 1.5rem; display: flex; flex-direction: column; gap: 0.8rem;">
<h3 style="font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; gap: 0.4rem;">
📖 Office Assistant Guide
</h3>
<div style="font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; display: flex; flex-direction: column; gap: 0.6rem;">
<p style="color: var(--text-main); font-weight: 500;">How to run the lottery:</p>
<ol style="margin-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem;">
<li>Select <strong>Postdocs</strong> or <strong>Students</strong> at the top.</li>
<li>Drag & drop the Google Form responses <strong>.csv file</strong> into the upload box.</li>
<li>Edit the numbers in <strong>Housing Category Capacities</strong> to match actual room vacancies if needed.</li>
<li>To run a new draw, click <strong>Gen Random</strong>. To repeat a previous official draw, select the official datetime and click <strong>Convert</strong>.</li>
<li>Click <strong>Run Housing Lottery</strong>.</li>
<li>Use the search box in the results card to search for any applicant.</li>
<li>Click <strong>Export CSV</strong> or <strong>Export TXT</strong> to download the final allocations.</li>
</ol>
<hr style="border: 0; border-top: 1px solid var(--card-border); margin: 0.4rem 0;">
<p style="color: var(--text-main); font-weight: 500;">How to launch this on Windows:</p>
<ol style="margin-left: 1.2rem; display: flex; flex-direction: column; gap: 0.4rem;">
<li>Open the folder where this project is saved on your computer.</li>
<li>Double-click the file named <strong>run.bat</strong> inside the <code>app</code> folder.</li>
<li>A black command prompt window will open and configure Python requirements automatically.</li>
<li>Keep that black window open. Go to your browser and open <a href="http://localhost:5000" target="_blank" style="color: var(--primary); text-decoration: none; font-weight: 600;">http://localhost:5000</a>.</li>
</ol>
</div>
</div>
</div>
<!-- Dashboard Content -->
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment