GCS Workparty Reports Webapp - Logic Flowchart (v3.3.0)

Version 3.3.0 - Photo support for announcements with simple button UI

APPLICATION STRUCTURE

🏗️ Main Application Container

HTML Structure

  • Single-file app (workparty_webapp.html)
  • Embedded CSS + JS; responsive, mobile-first
  • Sections: Reports, Add Content, Announcements
  • Editor: Quill.js WYSIWYG for rich text content

Data Management

  • In-memory arrays for reports and announcements
  • LocalStorage persistence + versioned backups
  • Export/Import JSON for manual backups
  • Server-side photo storage (v2.0+, no quota limits)
  • Automatic migration from base64 to server URLs
NAVIGATION & AUTH

🧭 Navigation & Login

Auth Guard

  • submit section guarded for Leaders/Admins
  • Mock login for local testing
  • Enter/Tab triggers login when fields complete

Navigation

  • showSection(section)
  • Search routes to Reports section results
ADD CONTENT - REPORT

📋 Workparty Report Form

Layout

  • 3-col: Group | Title | Date (calendar button)
  • Full: Team Members (compact)
  • 3-col: Crew Size | Location | Author
  • Full: Report Content (auto-expands)

Photos (v2.0.3 - Drag & Drop)

  • Drag & drop zone with visual feedback
  • Multiple file selection support
  • Visual preview grid (2-3 columns responsive)
  • Click-to-replace photos (preserves captions)
  • Image-only hover overlay (doesn't interfere with captions)
  • Real-time upload status indicators
  • Photo count badge
  • Edit report support - preserves existing photos
  • Server-side upload via workparty-upload.php
  • Fallback: compression + localStorage if upload fails
ADD CONTENT - ANNOUNCEMENT

📢 Announcement Form Slate/Blue

Theme

  • Card, labels in softer blue
  • Inputs tinted (blue-200 borders, blue-500 focus)
  • Submit button stays green
  • "Add Photos" button (v3.3.0) - optional photos

Fields

  • Category, Date, Author
  • Title, Message
  • Photos (optional, toggle with button)
  • Same validation feedback as reports
ADD CONTENT FLOW

📝 Report / Announcement Creation

Editor

  • Quill.js rich text editor (bold/italic/OL/UL)
  • Clipboard sanitization: strips inline styles on paste
  • Content mirrored to hidden textarea for validation/submission
  • Markdown kept for legacy render-only

Photos (Reports & Announcements)

  • Drop zone upload (drag & drop or Browse)
  • Grid preview with caption edit/replace/delete
  • Reports: Always visible, scroll after content
  • Announcements: Toggle with "Add Photos" button (v3.3.0)
  • Edit mode: Existing photos auto-display
SUBMISSION & FEEDBACK

💾 Submit Logic

submitReport()

  • Collects form data, validates (Quill content aware)
  • Processes photos (reports & announcements, v3.3.0)
  • Saves to arrays + localStorage
  • Success toast, reset
  • Post-submit navigation: to Announcements for announcements; to Reports for reports

UX Details

  • Report Content blur scrolls to Photos (reports only)
  • Announcements: "Add Photos" button toggles photo section
  • Hints on Date and Group fields
  • Dev Mode: hidden tools; resets OFF on refresh
ANNOUNCEMENTS LIST

🗂️ Display & Filters

Filters

  • All, Maintenance, Construction, Custom
  • Active/hover use softer blue

Cards

  • Category badges, metadata
  • Content pre-line formatting
  • Photos gallery (v3.3.0) - if announcement has photos
  • Sorted by date parsed from title (v2.0.2)
  • Falls back to date posted if no date in title
v3.3.0 HIGHLIGHTS

🆕 Latest Features (v3.3.0)

Photo Support for Announcements

  • "Add Photos" button toggles photo upload section
  • Same drag-and-drop functionality as reports
  • Photos display in announcement cards with captions
  • Edit mode: Existing photos auto-display
  • Optional - announcements can be submitted without photos
  • Validation excludes photo inputs (data-exempt)

Button UI

  • Simple toggle button (no popups/dialogs)
  • Text changes: "Add Photos" ↔ "Hide Photos"
  • Appears alongside Submit/Clear Form buttons
  • Clean, intuitive user experience
v3.0.0-3.2.0 HIGHLIGHTS

🆕 Previous Features (v3.0.0-3.2.0)

Photo Management Overhaul

  • Edit dialog Yes/No flow
  • Show existing photos by default; toggle drop zone
  • Grid stability fixes

Quill Improvements

  • No overlay with Photos section
  • Clipboard style stripping
  • Legacy Markdown render path retained