Guide d'installation

Installer l'app sur l'iPad ou l'iPhone, étape par étape.

Field App — document du projet

Field App Setup: Superintendent iPad App

Architecture and requirements summary for continuing development in a

new session.

Status: prototype built, deployed and in field testing (27 September 2026)

1. Overview

The app is an HTML web app hosted on GitHub Pages and installed on the

superintendent's iPad as a Progressive Web App (PWA). After one initial

load with internet, it runs fully offline from the copy stored on the

iPad. All of his working data (lists, favorites, drafts, signed reports)

lives on the iPad. Documents are exchanged manually through a shared

OneDrive folder that syncs with the office.

2. Key decisions

• Offline first. No SharePoint or Microsoft Graph API integration.

The app never waits on the network.

• PWA, not native. Not a native app. Accepted trade-off: the app

cannot write into the OneDrive folder automatically; transfers are

manual through the Share sheet and file picker.

• GitHub for code only. Data is not stored on GitHub. GitHub hosts

the code only.

• He owns his lists. The office provides the base setup once. After

that, the superintendent maintains his own lists; the office does not

edit them.

• Office controls documents. The only shared, office-managed content

is the document folder in OneDrive.

3. Installation on the iPad

1. Open the GitHub Pages URL in Safari while connected to the internet.

1. The service worker caches all app files on the iPad.

1. Tap Share > Add to Home Screen.

1. Always launch from the Home Screen icon, not a Safari tab. Home

Screen apps are exempt from Safari's automatic data clearing, and

their storage is separate from normal browsing.

Note: a PWA runs on Safari's engine but shows no browser interface.

Opening a local HTML file from the Files app does not work (JavaScript

does not run in the preview), so the PWA method is required.

4. Lists, favorites and activities

• First-run seeding. On first launch the app loads the bundled base

setup (contractors, activities, favorites). Later app updates never

overwrite his changes.

• Instant saving. Adding activities, reordering favorites and

marking items inactive save instantly on the device, with no Save

button needed.

• Active / inactive. Items are marked inactive, never deleted, so

older reports still display correctly. Inactive items are hidden from

pick lists.

• Hidden IDs. Every list item has a hidden unique ID so renaming an

item does not break links in old reports.

• Future additions. Build in a way to merge new default items into

his lists later without touching his edits.

5. Report workflow

Stage 1: Draft

• Save Progress button stores the report on the iPad; auto-save every

few seconds as a safety net.

• A drafts list lets him reopen and continue any report.

• Draft printouts carry a DRAFT watermark.

Stage 2: Sign and approve

• Approve opens a signature pad (finger or Apple Pencil).

• Signature is stamped with his name, date and time.

• The final PDF is generated on the iPad, offline.

Stage 3: Final (locked)

• Status becomes Approved; editing is disabled and the report is

view-only.

• Send options: Share > Save to Files > OneDrive folder, or Share >

Mail (queued in Outbox until signal).

• Corrections create a new revision (Rev 1, Rev 2) instead of unlocking

the original, preserving an audit trail.

• Optional: stamp a unique fingerprint (hash code) on the PDF so later

tampering can be detected.

6. Documents and sketches

• The office maintains a shared OneDrive folder of documents (drawings,

specs, photos). This is a manual upload and download process.

• He taps Add Document; the iPad file picker opens, showing OneDrive.

The app stores its own copy so it stays available offline.

• Documents can be attached to reports or used as backgrounds for

sketches.

• The app does not auto-refresh documents. If the office updates a file,

he re-adds it. Use revision numbers in file names, e.g.

A-101_Rev3.pdf.

• The app should show stored documents and let him remove old ones to

manage space.

7. OneDrive requirements

• In the OneDrive app, tap the three dots next to the shared folder and

choose Make Available Offline. Included with work/school accounts;

personal accounts need Microsoft 365.

• Open the OneDrive app briefly on Wi-Fi before going to the field so it

pulls the latest files. iPadOS limits background syncing.

• A cloud icon next to a file means it is not downloaded; no icon or a

checkmark means it is available offline.

Suggested folder structure:

Field App/

Documents/ (office-managed: drawings, specs, references)

Reports/ (approved PDFs he saves)

Sketches/ (exported sketches)

Backups/ (his app backup files)

8. Backup and restore

Because his data lives only on the iPad, losing or resetting the iPad,

or deleting the Home Screen icon, would erase it.

• Export Backup button: saves one file with all lists, favorites and

reports to OneDrive/Backups.

• Import Backup button: restores from that file. Also used to move his

setup to a new iPad.

• Show a Last backed up date in the app as a reminder.

9. Known limitations

• First launch requires internet.

• The PWA cannot read or write the OneDrive folder automatically; every

transfer goes through the file picker or Share sheet.

• No background activity; the app works only while open.

• Only documents already imported into the app open offline.

• Large photo and drawing sets use iPad storage; compress photos.

• Once a PDF leaves the iPad, others could edit it with PDF software;

the fingerprint only detects changes.

10. Technical notes for development

Next step: build a working prototype of the draft > sign > locked PDF

flow and test it on the iPad.

11. Current build (27 September 2026)

The prototype is built, deployed and installed as a PWA. Live address: https://davidfujioka2.github.io/feuille-de-temps/ . Every screen shows its page code at the bottom left and the version, day and time of the build at the bottom right.

Screen layout (every page)

• Menu row 1: icons Calendrier, Feuille de temps, Journal, Livraison, Planification on the left; Photos and Paramètres on the right; Terminé at the far right when a page needs it.
• Menu row 2: page title on the left, date in the centre.
• Project row: one tag per active project, equal widths, white with a green outline. No project selected means all projects; tap a selected project again to return to all projects. Planification always has one project selected.
• Below: the page, in one fixed 1180 x 820 window (scaled to fit the iPad or the iPhone held sideways; double-tap zooms 2x on iPhone).

Vocabulary

• Tag: one line of text, semicircle ends. Active = solid green; not selected = white with a green outline.
• Group: rounded rectangle that holds tags.

Page codes

Journal flow

1. Tap a date in the calendar: the Journal opens on all projects (J1).
2. Tap a section tag in a project's group: the tag turns solid green, the column widens to full width (1 s), the tag rises to the very top over the menu while doubling in height (1 s), then the table slides in from the bottom (1 s). For the Feuille de temps, the top menu stays visible and the tag stops just below it.
3. Complete the entry (for example Sans commentaire or Ajouter le commentaire; in Livraison, Accepter la quantité): the entry appears as a solid tag inside the large tag, then the app returns to J1 with the entry shown inside the project's section tag.
4. One entry per cycle; repeat for the next entry. There is no way back without completing the entry.
5. Journal status on each group: Journal vide, Journal en cours, Journal approuvé. Approval is per project per day, through the Rapport (J7); an approved report is final.

Livraison

• Left: suppliers, then subcontractors.
• Placer une commande (default): Catégorie, Sous-catégorie, Article, Quantité (units, tens, +100). Accepter la quantité saves the order line and returns to the Journal.
• Réception commande: validate a saved order line by line (complete, missing, comment), or record a Livraison sans commande with the same four columns.
• Materials come from the materials module catalogue (Charpenterie, Isolation, Ossature métallique, Gypse, then the secondary groups), plus Récents.

Feuille de temps

• Covers all projects for the day; approved by week across projects.
• Tapping the Feuille de temps tag in the Journal runs the same cycle as the other sections: the day's timesheet opens below the large tag, with the projects of the day as tags and Continuer; once approved, the tag shows ✓ Remplie and the app returns to J1. From the menu icon, the project row adds or removes projects; Continuer and Terminer are in the menu; the Voir feuille de temps button opens the week.

Planification links

• Per project, per phase: sous-traitants, fournisseurs, actions and materials become favourites in the Journal and Livraison.
• Week activities (zone, sous-traitant, action) show in the Journal as dashed tags, one tap to confirm; offered all week, gone the following week. The Feuille de temps also lists planned activities first.

Data on the device

Build and deploy

• Sources: Journal (jc/journal.html), Feuille de temps (lu/), Échéancier (eche/), materials catalogue (mat/).
• build_site.py builds site/ (all pages, page frame, service worker, manifest, icons), then the site is pushed to GitHub Pages. Each deploy changes the service-worker version so the installed app updates on the next launch (close and reopen once or twice).

Open items

• Planification and Livraison views when no project is selected.
• One shared Paramètres for the Journal and the Feuille de temps.
• Automatic filing to OneDrive (needs Microsoft Graph or a Power Automate flow).

## 12. Photo module spec (requested 2026-09-28, not built)

• Camera: 60%×60% live view, centred. Top: projects (+ Aucun projet). Left: sous-traitants, fournisseurs, actions, plus a "Choisir information" button that opens all menus with Terminé. Right: zones. Bottom: commentaire, plus sous-traitant à aviser (Déficience / Correctif / Coordination).
• Tags on photo (top left): Projet (red with white text until chosen; required), Date, Commentaire (dotted border = draggable). Zone/action/sous-traitant tags are transparent with black bold text.
• Measuring tape: press and drag draws a dimension line with end bars; value and unit are set with rollers (e.g. 3.0 po/pi/m).
• Modes:
• Photo en rafale: continuous shots; tags stay on; tap a tag to toggle it.
• Conserver les étiquettes.
• Figer les étiquettes (locked while moving).
• Photo d'un document: saved as Documents, not Photos; formal stamp top left with projet, date, comment, signature.
• Storage: Dropbox (or OneDrive) photos folder, per project, then per week.
• Revoir les photos: photo in the top-right corner, tags on the left and below (projet → sous-traitants → actions → description). One of each makes a tag. Swipes:
• right = tag + save + archive;
• left = delete / put aside;
• down = skip (keep unprocessed);
• up = favourite.
• Journal signature step: "Ajouter des photos" shows that project's photos of the week, favourites first.
• Next: agree on the naming conventions for everything.
• Logos (requested 2026-09-28):
• In Paramètres, each company (sous-traitant or fournisseur) can get a logo or picture.
• The logo shows in the Journal de chantier only.
• Option: show the logo instead of the text tag.
• Flexibility: projects and list titles are editable everywhere. Only "Journal de chantier" and "Feuille de temps" are fixed.
• Q1–2 answers:
• White bands on the photo. Top band: company (left), date and time (middle), project (right). Bottom band: tags as "Sous-traitant : … · Zone du projet : … · Activité : …" (left), "Photo prise par <super> le …" (middle), "Commentaire de <super> : …" (right).
• The measuring tape is removed. It is replaced by a red marker (freehand drawing on the photo), the comment at bottom right, and a signature space with "Approuvé", which locks the photo.
• The timesheet gets the same signature and lock.
• A slider to "Barrer les boutons": slide it down to lock. The camera then goes full screen with the bands and tags exactly as they will be saved. Slide it back up to unlock.
• Q3: in locked full screen, a single shutter button stays active. After each shot, the photo shows for 3 s with a large red marker icon. Tapping it opens drawing and comment. If nothing is tapped, it returns to the camera.
• Q4, rafale:
• The "Mode rafale" button switches to full screen with the bands. The top buttons stay visible.
• At right, "Cacher les étiquettes / Visible" hides the tag buttons to avoid accidental taps.
• He shoots, then taps "Fin mode rafale".
• Review: the photos scroll from bottom to top, one per second, with a small shake that invites a swipe. Right = Conserver, left = Effacer, down (toward him) = Sauvegarder dans documents <super>, up = Favori.
• Q5, burst review: swipe up is now Reprendre la photo (it replaces Favori), for blurry photos. The camera then shows the old photo as a ghost overlay: transparent, with a dotted or halftone look showing the outlines, so he can line up the same shot. Photos marked "reprendre" are retaken one after another. Buttons: "Reprendre" and "Terminer" (exit).
• Q6, final burst swipes: right = Conserver, left = Effacer, up = Reprendre, down (toward him) = Favori. The personal-folder save is no longer a swipe.
• Q7: every photo lands first in the super's own photos folder. A photo that isn't swiped simply stays there, unprocessed. Conserver files it into the project's week folder.
• Q8, document types: Facture, Bon de livraison, Feuille de temps. An "Ajouter" field adds a new type, which creates its own folder in <Projet>/Documents/<type>/.
• Q9, documents: a forced narrow top band. Line 1 in black: project, type, date, super. Line 2 in a lighter font with no strong colours: keywords and comment. Nothing is written over the document itself. No rotation for now. Saved as a PDF (default, since no answer was given on the format).
• Q10, journal photos: low-resolution photos, 2 per page, in the journal PDF. Each has a link to the full photo in Dropbox (a dropbox.com/home/… path, which works for the members of the shared folder).