rtu_v5/.planning/phases/02-data-persistence-file-management/02-01-PLAN.md

phase, plan, type, wave, depends_on, files_modified, autonomous, requirements, must_haves

phase	plan	type	wave	depends_on	files_modified	autonomous	requirements	must_haves
02-data-persistence-file-management	01	execute	1		src/app.py src/templates/files.html	true	FILE-01 FILE-02 FILE-04 BACK-04	truths artifacts key_links User can view list of CSV files stored in flash memory User can view contents of selected CSV files User can delete unwanted CSV files from flash memory path provides exports src/app.py File management API endpoints GET /api/files GET /api/files/<filename> DELETE /api/files/<filename> path provides routes src/templates/files.html File management UI page /files from to via pattern src/templates/files.html /api/files fetch in useEffect fetch.*api/files

Create file management API endpoints and basic UI for listing/viewing/deleting CSV files. @./.planning/phases/02-data-persistence-file-management/02-CONTEXT.md @./.planning/phases/02-data-persistence-file-management/02-RESEARCH.md @./.planning/ROADMAP.md @./.planning/REQUIREMENTS.md @./src/app.py task 1: Add file management API endpoints to Flask backend src/app.py Add the following API endpoints to src/app.py:

1. GET /api/files - List all CSV files in the logger directory

   • Returns JSON: {files: [{name, size, created}], total: count}
   • Storage path: /myvscada/logger (configurable, default to src/data/logger)
   • Handle missing directory gracefully

2. GET /api/files/<filename> - Get file contents

   • Returns JSON: {name, content: "full file text", lines: count}
   • Limit preview to first 100 lines for large files

3. DELETE /api/files/<filename> - Delete a file

   • Returns JSON: {success: true/false}
   • Confirm file exists before delete
   • Handle errors gracefully

Use the existing Flask patterns from src/app.py:

• Use jsonify for responses
• Use request.get_json() for POST data
• Add error handling with try/except
• Follow existing route structure curl -s http://localhost:8080/api/files | python3 -c "import sys,json; d=json.load(sys.stdin); print('OK' if 'files' in d else 'FAIL')" API endpoints return valid JSON, file list shows files, delete removes files

task 2: Create files.html template src/templates/files.html Create src/templates/files.html with:

1. Main navigation menu (reuse from other templates)
2. Page title: "Flash Memory Files"
3. File list display:
   • Table or card layout showing: filename, size, date
   • "View" button for each file (opens modal)
   • "Delete" button with confirmation
4. Modal for viewing file contents:
   • File name header
   • Scrollable content area (pre/code block)
   • Close button
5. JavaScript:
   • Fetch file list on page load
   • Handle view button click -> fetch file content
   • Handle delete button click -> confirm -> delete -> refresh list
   • Use Bootstrap 5.3 + Bootstrap Icons (like existing templates)
   • Touch-optimized 48px+ buttons

Base on the existing templates (settings.html, calibration.html) for:

• Bootstrap 5.3 structure
• Navigation menu
• CSS variables and touch targets
• Socket.IO integration (optional) curl -s http://localhost:8080/files | grep -q "Flash Memory" && echo "OK" || echo "FAIL" Files page loads, shows file list, view modal works, delete works

task 3: Add /files route to Flask app src/app.py Add the route for the files page in src/app.py:

@app.route('/files')
def files():
    """File management page"""
    return render_template('files.html',
                           page='files',
                           version=SOFTWARE_VERSION,
                           build_date=BUILD_DATE)

Add this route near the other page routes (index, settings, calibration). curl -s -o /dev/null -w "%{http_code}" http://localhost:8080/files Route returns 200 OK

task 4: Add Files menu item to navigation src/templates/dashboard.html, src/templates/settings.html, src/templates/calibration.html Add "Files" navigation button to main menu in: - dashboard.html - settings.html - calibration.html

The navigation should link to /files route. Follow the existing nav structure with nav-btn class.

Example (add after calibration button):

<a href="/files" class="nav-btn btn btn-outline-primary">
    <i class="bi bi-folder"></i> Files
</a>

grep -l "Files" src/templates/*.html | wc -l All pages have Files link in navigation - API endpoints return valid JSON - Files page loads with file list - View modal shows file contents - Delete removes files from storage - Navigation works across all pages

<success_criteria> User can view list of CSV files, view file contents, and delete files from flash memory via web UI </success_criteria>

After completion, create `.planning/phases/02-data-persistence-file-management/02-01-SUMMARY.md`