Compare commits

..

1 Commits

Author SHA1 Message Date
f9db6aad8f README.md aktualisiert 2026-03-18 21:54:26 +00:00
65 changed files with 39 additions and 23170 deletions

View File

@@ -1,15 +0,0 @@
# This file is used by the build system to adjust CSS and JS output to support the specified browsers below.
# For additional information regarding the format and rule options, please see:
# https://github.com/browserslist/browserslist#queries
# For the full list of supported browsers by the Angular framework, please see:
# https://angular.dev/reference/versions#browser-support
# You can see what browsers were selected by your queries by running:
# npx browserslist
Chrome >=107
Firefox >=106
Edge >=107
Safari >=16.1
iOS >=16.1

View File

@@ -1,16 +0,0 @@
# Editor configuration, see https://editorconfig.org
root = true
[*]
charset = utf-8
indent_style = space
indent_size = 2
insert_final_newline = true
trim_trailing_whitespace = true
[*.ts]
quote_type = single
[*.md]
max_line_length = off
trim_trailing_whitespace = false

View File

@@ -1,47 +0,0 @@
{
"root": true,
"ignorePatterns": ["projects/**/*"],
"overrides": [
{
"files": ["*.ts"],
"parserOptions": {
"project": ["tsconfig.json"],
"createDefaultProgram": true
},
"extends": [
"plugin:@angular-eslint/recommended",
"plugin:@angular-eslint/template/process-inline-templates"
],
"rules": {
"@angular-eslint/prefer-standalone": "off",
"@angular-eslint/component-class-suffix": [
"error",
{
"suffixes": ["Page", "Component"]
}
],
"@angular-eslint/component-selector": [
"error",
{
"type": "element",
"prefix": "app",
"style": "kebab-case"
}
],
"@angular-eslint/directive-selector": [
"error",
{
"type": "attribute",
"prefix": "app",
"style": "camelCase"
}
]
}
},
{
"files": ["*.html"],
"extends": ["plugin:@angular-eslint/template/recommended"],
"rules": {}
}
]
}

71
.gitignore vendored
View File

@@ -1,71 +0,0 @@
# Specifies intentionally untracked files to ignore when using Git
# http://git-scm.com/docs/gitignore
*~
*.sw[mnpcod]
.tmp
*.tmp
*.tmp.*
UserInterfaceState.xcuserstate
$RECYCLE.BIN/
*.log
log.txt
/.sourcemaps
/.versions
/coverage
# Ionic
/.ionic
/www
/platforms
/plugins
# Compiled output
/dist
/tmp
/out-tsc
/bazel-out
# Node
/node_modules
npm-debug.log
yarn-error.log
# IDEs and editors
.idea/
.project
.classpath
.c9/
*.launch
.settings/
*.sublime-project
*.sublime-workspace
# Visual Studio Code
.vscode/*
!.vscode/settings.json
!.vscode/tasks.json
!.vscode/launch.json
!.vscode/extensions.json
.history/*
# Miscellaneous
/.angular
/.angular/cache
.sass-cache/
/.nx
/.nx/cache
/connect.lock
/coverage
/libpeerconnection.log
testem.log
/typings
# System files
.DS_Store
Thumbs.db
CLAUDE.md

View File

@@ -1,5 +0,0 @@
{
"recommendations": [
"Webnative.webnative"
]
}

View File

@@ -1,3 +0,0 @@
{
"typescript.preferences.autoImportFileExcludePatterns": ["@ionic/angular/common", "@ionic/angular/standalone"]
}

386
README.md
View File

@@ -1,347 +1,39 @@
# P2P Survey App # P2P Poll App
A serverless peer-to-peer survey application built with Ionic and Angular. There are various issues of Trust:
Survey creators store all data locally in their browser and participants connect The possiblity to generate lots of users that do a lot of things (at a rather low cost)
directly via WebRTC — no backend server required. The possibility to put out wrong data, maby not even contradicting but additional to existing data.
The possibility to do all kinds of shenenigans like spam other users with some requests
---
Due to low programming knowledge, the starting point of this proposal was to mirror how normal groups of people solve issues of trust to then automate and possibly improve the process. There are already some systems out there like Trust flow or random walk. As far as i understand it, the Flexible Trust Web also already does something like this, also maby RWOT and GNUweb but i didn't read into them too much since i discovered them rather late and want to look for feedback anyway. After all, a system with a clearer consensus might be preferable to some.
## Table of Contents
If random new people should be able to use the system as equals to previous users, but the system never has real identities as an input, then there is no way to fully prevent the creation of new users to manipulate or sabotage the poll. But it can be assumed, that your friends are rather trustworthy and most likely also their friends and so on. And if someone makes huge ammounts or just one second account, they will probably only have the creator or maby some other people as friends, and even they might already be less socially connected than a normal user.
1. [Overview](#overview) So the social distance to another user should be evaluated to see, whether you should count their vote.
2. [Architecture](#architecture) This is evaluated for and by every user individually, based on the information they were sent. The ammount of contacts you won't count are displayed to you, such that you get a hint at how many people you are missing but also how many people are not counting you. This encourages people to try to prove others/vise versa and make social connections to officially tie the network closer together such that the voting system works and confirms itself. It would be great, if there was some chat attached to the poll. If people want to prove their (or others) trusworhiness within this system, they are then also encouraged to have productive discussions, probably about the matter of the poll.
3. [Features](#features) Everyone in a poll with you is a "contact" of yours.
4. [Setup & Installation](#setup--installation) "users" can have "friends".
5. [How It Works](#how-it-works) You can also manually mark users as suspicious or trustworthy or normal again.
- [Creator Flow](#creator-flow) The system for evaluating the trustworthyness of users is somehow a mix between the concepts "weighted path score" and "trust flow" with 5 steps.
- [Participant Flow](#participant-flow) That means for 5 steps starting with you, all friends and trusted people of people looked at in this step get some trust from the people we look at: 0.8 * The trust of the looked at person (if trusted) + 0.8 * The trust of the looked at person / friends the looked at person has (if friend). Then the trust of the person that received trust may maximally be 100. The Trust you have to yourself is 100.
6. [Question Types](#question-types) You can also mark someone as trustworthy or untrustworthy. That is then also sent around to everyone if you want(should be the standard, but maby a user wants to just see how the trustworthyness will look like after the change).
7. [Technology Stack](#technology-stack) If you receive such an information, you can make the following calculations immidiately and after every assesment of everyones trustworthyness:
8. [Limitations](#limitations) If the accused is less trustworthy then the accusing person, decrease the accused trustworthyness to 0 and the accused friends and trustees trustworthyness by the trustworthyness of the accusing person.
9. [Self-Hosting the PeerJS Signaling Server](#self-hosting-the-peerjs-signaling-server) If the trustworhyness of the accusing person is less than the trustworthyness of the accused, then reduce the trustworthyness of the accusing person to 0 and the accusing persons friends and trustees by the trustworthyness of the accused * 0,2.
10. [Development Commands](#development-commands) If you mark someone as trustworthy:
11. [Technology Choices](#technology-choices) The Trust flowing to the trusted person from you will also be 0.8 of your trust.
Maby this should also be the effect of beeing "friends" since "trust" might be something you could more intuitively casually deal out after a short chat. If that change were to occur, then the effect would have to be switched around.
--- All contacts can maximally have the Trust 100.
## Overview
Future matters:
P2P Survey App lets you create and distribute surveys without any server-side If there can be any discrepancy of sent information, depending on what sender you trust most, you will mark one of the senders as untrustworthy and neglect all future information from this user. Since everything can be signed and such, that shouldnˋt be an issue tho, but if it was, the ammount of "useless" messages to already informed people might have to increase to validate received data.
infrastructure. All survey data — questions, participant tokens, and responses — A system to showcase the social connections in a 2D - format would be neat.
lives exclusively in the survey creator's browser (IndexedDB). Participants (most likely something like this exists already)
connect directly to the creator's browser using WebRTC peer-to-peer data Obviously the user would also have to see other context like the total of all votes (trusted or not)
channels, facilitated by the PeerJS library.
Anonymous polls:
--- A system of individually assigned trust poses a challenge for a system where you can decide not to trust some voters.
If there is no other option some compromises might be makable, such as:
## Architecture -Your Friends can know what you voted for
-The Person initiating a poll just decides on the validity of participants according to an own judgement of trust at the moment of poll-creation
``` -A System with clear Consensus of who to trust
Creator Browser (Host)
┌─────────────────────────────────────────────┐
│ Ionic/Angular App │
│ ┌─────────────────┐ ┌───────────────────┐│
│ │ PeerService │ │ Dexie (IndexedDB)││
│ │ (PeerJS/WebRTC)│<─>│ surveys ││
│ └────────┬────────┘ │ participants ││
│ │ │ responses ││
│ Peer ID: survey-{id}└───────────────────┘│
└───────────┼─────────────────────────────────┘
[PeerJS Cloud signaling only, not data relay]
Participant Browser
┌─────────────────────────────────────────────┐
│ Opens: /participate?host=survey-{id} │
│ &token={uuid} │
│ │
│ 1. Connect to host peer via WebRTC │
│ 2. Send { type: 'join', token } │
│ 3. Receive survey questions │
│ 4. Fill in answers │
│ 5. Send { type: 'submit', answers } │
└─────────────────────────────────────────────┘
```
### Star topology
The survey creator acts as the central hub. Each participant opens a direct
WebRTC data channel to the creator's browser. The creator's browser validates
tokens, stores responses, and optionally pushes aggregated results back.
The PeerJS signaling server is only used for the initial WebRTC handshake
(exchanging ICE candidates). Once connected, all data flows directly between
the two browsers — the signaling server never sees response data.
---
## Features
- **Create surveys** with four question types: free text, multiple choice,
yes/no, and 15 rating
- **Generate unique participant links** — each link contains a UUID token that
identifies one participant
- **Token-based access control** — each token can only be submitted once;
reuse is rejected by the host
- **Draft saving** — participants can save answers before final submission
without locking their token
- **Live results** — the creator sees responses update in real time using
Dexie's `liveQuery`
- **Optional results sharing** — the creator can toggle whether participants
see aggregated results after submitting
- **CSV export** — download all responses as a comma-separated file
- **Local-only storage** — all data lives in the creator's IndexedDB; delete
the survey and the data is gone
---
## Setup & Installation
### Prerequisites
- Node.js 18+ and npm 9+
- A modern browser (Chrome, Firefox, Edge, Safari)
### Install
```bash
# 1. Install Ionic CLI globally (skip if already installed)
npm install -g @ionic/cli
# 2. Install project dependencies
npm install
# 3. Start the development server
ionic serve
```
The app opens at `http://localhost:8100`.
### Build for production
```bash
ionic build --prod
```
Output is written to `www/`. Deploy the contents of `www/` to any static
web host (GitHub Pages, Netlify, Vercel, Nginx, etc.).
---
## How It Works
### Creator Flow
1. **Open the app** and click **Create Survey**.
2. **Enter a title** (required) and optional description.
3. **Add questions** — choose a type for each and mark which are required.
4. Click **Create** to save the survey to IndexedDB and navigate to the
**Survey Detail** page.
5. On the detail page:
- Toggle **Show results to participants** if desired.
- Enter a number and click **Generate Links** to create unique participant
tokens. Copy links to share.
- Click **Start Hosting** to initialise the PeerJS peer. The app listens
for incoming connections using the peer ID `survey-{surveyId}`.
6. **Keep this page or the Results page open** while collecting responses.
If the creator navigates away, the peer is destroyed and participants
cannot connect.
7. Click **View Results** to see live aggregated and individual responses.
8. Click **Export CSV** to download all responses.
### Participant Flow
1. **Open the unique link** shared by the survey creator.
2. The app parses `host` and `token` from the URL query parameters.
3. A WebRTC connection is established to the host's peer ID.
4. The participant sends `{ type: 'join', token }`.
5. The host validates the token:
- **Invalid token** → error card is shown.
- **Already submitted** → error card is shown (token is locked).
- **Valid** → survey questions are sent back.
6. Participant fills in answers. Answers are auto-saved as drafts after each
blur event (free text) or selection change (other types).
7. Click **Submit** to finalise. The token is locked on the host side.
8. If the creator enabled result sharing, aggregated results are shown.
---
## Question Types
| Type | Input widget | Aggregation |
|---|---|---|
| **Free Text** | Multi-line textarea | List of all answers |
| **Multiple Choice** | Radio buttons (creator-defined options) | Count per option + bar chart |
| **Yes / No** | Radio buttons (Yes / No) | Count per option + bar chart |
| **Rating** | 5 buttons (15) | Average score + distribution bar chart |
---
## Technology Stack
| Library | Version | Role |
|---|---|---|
| `@ionic/angular` | 8.x | Mobile-first UI components |
| `@angular/core` | 20.x | Application framework |
| `peerjs` | 1.5.x | WebRTC data channel wrapper |
| `dexie` | 4.x | IndexedDB wrapper with liveQuery |
| `qrcode` | 1.5.x | QR code generation (optional usage) |
---
## Limitations
### Host must be online
The survey creator's browser **must be open** and on the Survey Detail or
Results page for participants to submit responses. There is no server that
relays or buffers messages. If the creator goes offline, participants see a
"Host is Offline" card.
### Data loss
All data is stored in the creator's browser IndexedDB. Data is lost if:
- The creator explicitly deletes the survey
- The browser's storage is cleared (private/incognito mode, clearing site data)
- The browser's IndexedDB quota is exceeded
Export responses to CSV regularly to prevent data loss.
### PeerJS Cloud rate limits
The free PeerJS Cloud signaling server (`0.peerjs.com`) has rate limits and
may occasionally be unavailable. For production use, self-host the signaling
server (see below).
### NAT traversal
WebRTC uses STUN to traverse most NAT configurations. Strict corporate
firewalls or symmetric NAT may block direct connections. For full reliability
in such environments, add a TURN server to the PeerJS configuration in
`src/app/services/peer.service.ts`.
### Browser compatibility
Requires a browser that supports:
- WebRTC (DataChannels)
- IndexedDB
- `crypto.randomUUID()`
All modern browsers (Chrome 86+, Firefox 78+, Safari 15.4+, Edge 86+) satisfy
these requirements.
---
## Self-Hosting the PeerJS Signaling Server
For production deployments, run your own PeerJS server to avoid rate limits.
### Option 1: npm
```bash
npm install -g peer
peerjs --port 9000 --key peerjs
```
### Option 2: Docker
```bash
docker run -p 9000:9000 peerjs/peerjs-server
```
### Option 3: Node.js
```javascript
// server.js
const { PeerServer } = require('peer');
const server = PeerServer({ port: 9000, path: '/peerjs' });
```
### Configure the app to use your server
Edit `src/app/services/peer.service.ts` and update the `Peer` constructor:
```typescript
this.peer = new Peer(peerId, {
host: 'your-peer-server.example.com',
port: 9000,
path: '/peerjs',
secure: true, // use wss:// if your server has TLS
});
```
---
## Development Commands
```bash
# Start dev server with live reload
ionic serve
# Build for production
ionic build --prod
# Run TypeScript type check
npx tsc --noEmit
# Lint
npx ng lint
# Build Angular app only (no Ionic wrapper)
npx ng build
```
---
## Technology Choices
### PeerJS over Gun.js
Gun.js is a decentralized graph database that syncs between peers. However,
a survey has a **star topology** (one host, many participants) — not a mesh
where every peer is equal. PeerJS maps directly to this model: the creator
opens one peer ID, participants connect to it, and all data flows through
that central point. Token validation and response deduplication are trivial
to enforce at the host. Gun.js would require additional complexity to achieve
the same guarantees.
### Dexie.js over raw IndexedDB
Raw IndexedDB uses a callback-based API that is verbose and error-prone.
Dexie wraps it in clean Promises, adds a TypeScript-friendly schema
definition, and provides `liveQuery` — a reactive subscription mechanism
that automatically re-runs queries when the underlying data changes. This
powers the live results view without any manual polling or event wiring.
### Module-based Angular over Standalone Components
The Ionic CLI scaffolds a module-based project by default with Angular 20.
Module-based components provide a clear separation of concern via `NgModule`
declarations and are well-supported by the Ionic ecosystem.
---
## Project Structure
```
src/
└── app/
├── shared/
│ └── models/
│ └── survey.models.ts # All TypeScript interfaces + P2PMessage type
├── database/
│ └── database.ts # Dexie singleton (AppDatabase)
├── services/
│ ├── peer.service.ts # PeerJS wrapper (NgZone-aware)
│ ├── survey.service.ts # Survey/participant CRUD
│ └── response.service.ts # Response storage + aggregation
├── pages/
│ ├── home/ # Survey list
│ ├── create-survey/ # Survey creation/editing
│ ├── survey-detail/ # Settings, link generation, hosting
│ ├── survey-results/ # Live results view
│ └── participate/ # Participant survey form
├── app-routing.module.ts
├── app.component.ts
└── app.module.ts
```

View File

@@ -1,170 +0,0 @@
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"app": {
"projectType": "application",
"schematics": {},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
},
{
"glob": "serve.json",
"input": "src",
"output": "/"
},
{
"glob": "serve.json",
"input": "src",
"output": "/"
}
],
"styles": [
"src/global.scss",
"src/theme/variables.scss"
],
"scripts": [],
"allowedCommonJsDependencies": [
"sdp",
"webrtc-adapter"
]
},
"configurations": {
"production": {
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "2kb",
"maximumError": "4kb"
}
],
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"outputHashing": "all"
},
"development": {
"buildOptimizer": false,
"optimization": false,
"vendorChunk": true,
"extractLicenses": false,
"sourceMap": true,
"namedChunks": true
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "production"
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "app:build:production"
},
"development": {
"buildTarget": "app:build:development"
},
"ci": {
"progress": false
}
},
"defaultConfiguration": "development"
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"inlineStyleLanguage": "scss",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
"src/global.scss",
"src/theme/variables.scss"
],
"scripts": []
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-eslint/builder:lint",
"options": {
"lintFilePatterns": [
"src/**/*.ts",
"src/**/*.html"
]
}
}
}
}
},
"cli": {
"schematicCollections": [
"@ionic/angular-toolkit"
],
"analytics": false
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}

View File

@@ -1,9 +0,0 @@
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = {
appId: 'io.ionic.starter',
appName: 'IonicAngularVersion',
webDir: 'www'
};
export default config;

View File

@@ -1,7 +0,0 @@
{
"name": "IonicAngularVersion",
"integrations": {
"capacitor": {}
},
"type": "angular"
}

View File

@@ -1,44 +0,0 @@
// Karma configuration file, see link for more information
// https://karma-runner.github.io/1.0/config/configuration-file.html
module.exports = function (config) {
config.set({
basePath: '',
frameworks: ['jasmine', '@angular-devkit/build-angular'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage'),
require('@angular-devkit/build-angular/plugins/karma')
],
client: {
jasmine: {
// you can add configuration options for Jasmine here
// the possible options are listed at https://jasmine.github.io/api/edge/Configuration.html
// for example, you can disable the random execution with `random: false`
// or set a specific seed with `seed: 4321`
},
clearContext: false // leave Jasmine Spec Runner output visible in browser
},
jasmineHtmlReporter: {
suppressAll: true // removes the duplicated traces
},
coverageReporter: {
dir: require('path').join(__dirname, './coverage/app'),
subdir: '.',
reporters: [
{ type: 'html' },
{ type: 'text-summary' }
]
},
reporters: ['progress', 'kjhtml'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
restartOnFileChange: true
});
};

19093
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -1,68 +0,0 @@
{
"name": "IonicAngularVersion",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"watch": "ng build --watch --configuration development",
"test": "ng test",
"lint": "ng lint"
},
"private": true,
"dependencies": {
"@angular/animations": "^20.0.0",
"@angular/common": "^20.0.0",
"@angular/compiler": "^20.0.0",
"@angular/core": "^20.0.0",
"@angular/forms": "^20.0.0",
"@angular/platform-browser": "^20.0.0",
"@angular/platform-browser-dynamic": "^20.0.0",
"@angular/router": "^20.0.0",
"@capacitor/app": "8.0.1",
"@capacitor/core": "8.2.0",
"@capacitor/haptics": "8.0.1",
"@capacitor/keyboard": "8.0.1",
"@capacitor/status-bar": "8.0.1",
"@ionic/angular": "^8.0.0",
"dexie": "^4.3.0",
"ionicons": "^7.0.0",
"peerjs": "^1.5.5",
"qrcode": "^1.5.4",
"rxjs": "~7.8.0",
"tslib": "^2.3.0",
"zone.js": "~0.15.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "^20.0.0",
"@angular-eslint/builder": "^20.0.0",
"@angular-eslint/eslint-plugin": "^20.0.0",
"@angular-eslint/eslint-plugin-template": "^20.0.0",
"@angular-eslint/schematics": "^20.0.0",
"@angular-eslint/template-parser": "^20.0.0",
"@angular/cli": "^20.0.0",
"@angular/compiler-cli": "^20.0.0",
"@angular/language-service": "^20.0.0",
"@capacitor/cli": "8.2.0",
"@ionic/angular-toolkit": "^12.0.0",
"@types/jasmine": "~5.1.0",
"@types/qrcode": "^1.5.6",
"@typescript-eslint/eslint-plugin": "^8.18.0",
"@typescript-eslint/parser": "^8.18.0",
"eslint": "^9.16.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsdoc": "^48.2.1",
"eslint-plugin-prefer-arrow": "1.2.2",
"jasmine-core": "~5.1.0",
"jasmine-spec-reporter": "~5.0.0",
"karma": "~6.4.0",
"karma-chrome-launcher": "~3.2.0",
"karma-coverage": "~2.2.0",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "~2.1.0",
"typescript": "~5.9.0"
},
"description": "An Ionic project"
}

View File

@@ -1,63 +0,0 @@
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
// Default redirect
{
path: '',
redirectTo: 'home',
pathMatch: 'full',
},
// Home: list of all surveys created by this user
{
path: 'home',
loadChildren: () => import('./home/home.module').then((m) => m.HomePageModule),
},
// Create a new survey
{
path: 'create-survey',
loadChildren: () =>
import('./pages/create-survey/create-survey.module').then(
(m) => m.CreateSurveyPageModule
),
},
// Edit an existing survey (id param)
{
path: 'create-survey/:id',
loadChildren: () =>
import('./pages/create-survey/create-survey.module').then(
(m) => m.CreateSurveyPageModule
),
},
// Survey detail: manage settings, generate links, start hosting
{
path: 'survey/:id',
loadChildren: () =>
import('./pages/survey-detail/survey-detail.module').then(
(m) => m.SurveyDetailPageModule
),
},
// Survey results: live aggregated view
{
path: 'survey/:id/results',
loadChildren: () =>
import('./pages/survey-results/survey-results.module').then(
(m) => m.SurveyResultsPageModule
),
},
// Participate: opened by participants via their unique link
// Uses query params: ?host=survey-{id}&token={uuid}
{
path: 'participate',
loadChildren: () =>
import('./pages/participate/participate.module').then(
(m) => m.ParticipatePageModule
),
},
];
@NgModule({
imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })],
exports: [RouterModule],
})
export class AppRoutingModule {}

View File

@@ -1,3 +0,0 @@
<ion-app>
<ion-router-outlet></ion-router-outlet>
</ion-app>

View File

@@ -1,21 +0,0 @@
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
}).compileComponents();
});
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.componentInstance;
expect(app).toBeTruthy();
});
});

View File

@@ -1,11 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html',
styleUrls: ['app.component.scss'],
standalone: false,
})
export class AppComponent {
constructor() {}
}

View File

@@ -1,16 +0,0 @@
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
@NgModule({
declarations: [AppComponent],
imports: [BrowserModule, IonicModule.forRoot(), AppRoutingModule],
providers: [{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }],
bootstrap: [AppComponent],
})
export class AppModule {}

View File

@@ -1,46 +0,0 @@
/**
* database.ts
* Dexie (IndexedDB) singleton for the P2P Survey App.
*
* All survey data — surveys, participant tokens, and responses — lives
* exclusively in the creator's browser. Dexie wraps the raw IndexedDB API
* with a clean, Promise-based interface and live-query support.
*
* Usage (inject via InjectionToken, see main.ts):
* constructor(@Inject(DATABASE_TOKEN) private db: AppDatabase) {}
*/
import Dexie, { type Table } from 'dexie';
import type { Survey, Participant, Response } from '../shared/models/survey.models';
/** Typed Dexie database class */
export class AppDatabase extends Dexie {
/** All surveys created by this user */
surveys!: Table<Survey, string>;
/**
* Pre-generated participant tokens.
* Primary key: token (UUID string).
*/
participants!: Table<Participant, string>;
/**
* Submitted responses.
* Primary key: id (UUID string).
*/
responses!: Table<Response, string>;
constructor() {
super('P2PSurveyDB');
this.version(1).stores({
// Indexed fields: primary key first, then fields used in queries
surveys: 'id, status, createdAt',
participants: 'token, surveyId, locked',
responses: 'id, surveyId, participantToken, submittedAt',
});
}
}
/** Module-level singleton — import this wherever you need direct DB access */
export const db = new AppDatabase();

View File

@@ -1,16 +0,0 @@
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomePage } from './home.page';
const routes: Routes = [
{
path: '',
component: HomePage,
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class HomePageRoutingModule {}

View File

@@ -1,13 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { HomePageRoutingModule } from './home-routing.module';
import { HomePage } from './home.page';
@NgModule({
imports: [CommonModule, FormsModule, IonicModule, HomePageRoutingModule],
declarations: [HomePage],
})
export class HomePageModule {}

View File

@@ -1,54 +0,0 @@
<ion-header>
<ion-toolbar color="primary">
<ion-title>My Surveys</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- Empty state -->
<div *ngIf="surveys.length === 0" class="empty-state">
<ion-icon name="clipboard-outline" size="large"></ion-icon>
<h2>No Surveys Yet</h2>
<p>Create your first survey to get started.</p>
<ion-button (click)="createNewSurvey()" expand="block" class="ion-margin-top">
<ion-icon slot="start" name="add-outline"></ion-icon>
Create Survey
</ion-button>
</div>
<!-- Survey list -->
<ion-list *ngIf="surveys.length > 0" lines="none" class="survey-list">
<ion-item-sliding *ngFor="let survey of surveys">
<ion-item button (click)="openSurvey(survey)" detail="true">
<ion-label>
<h2>{{ survey.title }}</h2>
<p>
{{ survey.questions.length }} question{{ survey.questions.length !== 1 ? 's' : '' }}
&bull;
{{ responseCounts[survey.id] ?? 0 }} response{{ (responseCounts[survey.id] ?? 0) !== 1 ? 's' : '' }}
</p>
<p>
<ion-badge [color]="statusColor(survey.status)">{{ survey.status }}</ion-badge>
</p>
</ion-label>
</ion-item>
<!-- Swipe-to-reveal action buttons -->
<ion-item-options side="end">
<ion-item-option color="primary" (click)="editSurvey(survey, $event)">
<ion-icon slot="icon-only" name="create-outline"></ion-icon>
</ion-item-option>
<ion-item-option color="danger" (click)="confirmDelete(survey, $event)">
<ion-icon slot="icon-only" name="trash-outline"></ion-icon>
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</ion-list>
<!-- Floating action button -->
<ion-fab vertical="bottom" horizontal="end" slot="fixed">
<ion-fab-button (click)="createNewSurvey()" color="primary">
<ion-icon name="add-outline"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>

View File

@@ -1,34 +0,0 @@
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
ion-icon {
font-size: 64px;
color: var(--ion-color-medium);
margin-bottom: 16px;
}
h2 {
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 8px;
}
p {
color: var(--ion-color-medium);
margin-bottom: 24px;
}
}
.survey-list {
padding: 8px;
}
ion-item-sliding ion-item {
--border-radius: 8px;
margin-bottom: 8px;
}

View File

@@ -1,24 +0,0 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { IonicModule } from '@ionic/angular';
import { HomePage } from './home.page';
describe('HomePage', () => {
let component: HomePage;
let fixture: ComponentFixture<HomePage>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [HomePage],
imports: [IonicModule.forRoot()]
}).compileComponents();
fixture = TestBed.createComponent(HomePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

View File

@@ -1,124 +0,0 @@
/**
* home.page.ts
* Home page — displays all surveys created by this user.
* Surveys are loaded from IndexedDB via a live query so the list
* updates automatically when surveys are added or deleted.
*/
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Router } from '@angular/router';
import { AlertController, ToastController } from '@ionic/angular';
import { Subscription } from 'rxjs';
import { SurveyService } from '../services/survey.service';
import { ResponseService } from '../services/response.service';
import type { Survey } from '../shared/models/survey.models';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
standalone: false,
})
export class HomePage implements OnInit, OnDestroy {
surveys: Survey[] = [];
/** Map from surveyId → response count (refreshed on each emission) */
responseCounts: Record<string, number | undefined> = {};
private surveySubscription?: Subscription;
constructor(
private router: Router,
private surveyService: SurveyService,
private responseService: ResponseService,
private alertCtrl: AlertController,
private toastCtrl: ToastController
) {}
ngOnInit(): void {
// Subscribe to the live query — list updates automatically
this.surveySubscription = this.surveyService
.getAllSurveys$()
.subscribe(async (surveys) => {
this.surveys = surveys;
// Refresh response counts whenever the survey list changes
await this.loadResponseCounts(surveys);
});
}
ngOnDestroy(): void {
this.surveySubscription?.unsubscribe();
}
// -------------------------------------------------------------------------
// Navigation
// -------------------------------------------------------------------------
/** Navigate to the create-survey page */
createNewSurvey(): void {
this.router.navigate(['/create-survey']);
}
/** Navigate to the detail page for a survey */
openSurvey(survey: Survey): void {
this.router.navigate(['/survey', survey.id]);
}
/** Navigate to the edit page for a survey */
editSurvey(survey: Survey, event: Event): void {
event.stopPropagation(); // Prevent the card click from also firing
this.router.navigate(['/create-survey', survey.id]);
}
// -------------------------------------------------------------------------
// Deletion
// -------------------------------------------------------------------------
/** Ask the user to confirm before deleting a survey */
async confirmDelete(survey: Survey, event: Event): Promise<void> {
event.stopPropagation();
const alert = await this.alertCtrl.create({
header: 'Delete Survey',
message: `Delete "${survey.title}"? This will permanently remove all participant links and responses.`,
buttons: [
{ text: 'Cancel', role: 'cancel' },
{
text: 'Delete',
role: 'destructive',
handler: () => this.deleteSurvey(survey),
},
],
});
await alert.present();
}
private async deleteSurvey(survey: Survey): Promise<void> {
await this.surveyService.deleteSurvey(survey.id);
const toast = await this.toastCtrl.create({
message: `"${survey.title}" was deleted.`,
duration: 2000,
color: 'medium',
});
await toast.present();
}
// -------------------------------------------------------------------------
// Helpers
// -------------------------------------------------------------------------
private async loadResponseCounts(surveys: Survey[]): Promise<void> {
const counts: Record<string, number> = {};
await Promise.all(
surveys.map(async (s) => {
const responses = await this.responseService.getResponses(s.id);
counts[s.id] = responses.length;
})
);
this.responseCounts = counts;
}
/** Returns a human-readable status label with an Ionic color */
statusColor(status: Survey['status']): string {
return status === 'active' ? 'success' : status === 'closed' ? 'medium' : 'warning';
}
}

View File

@@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { CreateSurveyPage } from './create-survey.page';
const routes: Routes = [
{
path: '',
component: CreateSurveyPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class CreateSurveyPageRoutingModule {}

View File

@@ -1,20 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { CreateSurveyPageRoutingModule } from './create-survey-routing.module';
import { CreateSurveyPage } from './create-survey.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
CreateSurveyPageRoutingModule
],
declarations: [CreateSurveyPage]
})
export class CreateSurveyPageModule {}

View File

@@ -1,131 +0,0 @@
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-button (click)="cancel()">
<ion-icon slot="icon-only" name="close-outline"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>{{ isEditMode ? 'Edit Survey' : 'New Survey' }}</ion-title>
<ion-buttons slot="end">
<ion-button [disabled]="!isFormValid" (click)="save()" strong>
{{ isEditMode ? 'Update' : 'Create' }}
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<!-- Survey metadata -->
<ion-card>
<ion-card-header>
<ion-card-title>Survey Details</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item lines="none">
<ion-label position="stacked">Title *</ion-label>
<ion-input
[(ngModel)]="title"
placeholder="e.g. Employee Feedback Q2"
maxlength="120"
clearInput="true">
</ion-input>
</ion-item>
<ion-item lines="none">
<ion-label position="stacked">Description (optional)</ion-label>
<ion-textarea
[(ngModel)]="description"
placeholder="Briefly explain the purpose of this survey…"
rows="3"
maxlength="500">
</ion-textarea>
</ion-item>
</ion-card-content>
</ion-card>
<!-- Questions -->
<ion-card *ngFor="let question of questions; let i = index; trackBy: trackQuestion">
<ion-card-header>
<ion-card-subtitle>Question {{ i + 1 }}</ion-card-subtitle>
<div class="question-actions">
<ion-button fill="clear" size="small" (click)="moveQuestionUp(i)" [disabled]="i === 0">
<ion-icon slot="icon-only" name="chevron-up-outline"></ion-icon>
</ion-button>
<ion-button fill="clear" size="small" (click)="moveQuestionDown(i)" [disabled]="i === questions.length - 1">
<ion-icon slot="icon-only" name="chevron-down-outline"></ion-icon>
</ion-button>
<ion-button fill="clear" size="small" color="danger" (click)="removeQuestion(i)">
<ion-icon slot="icon-only" name="trash-outline"></ion-icon>
</ion-button>
</div>
</ion-card-header>
<ion-card-content>
<!-- Question text -->
<ion-item lines="none">
<ion-label position="stacked">Question Text *</ion-label>
<ion-input
[(ngModel)]="question.text"
placeholder="Enter your question…"
maxlength="300">
</ion-input>
</ion-item>
<!-- Question type -->
<ion-item lines="none">
<ion-label position="stacked">Type</ion-label>
<ion-select [(ngModel)]="question.type" (ionChange)="onTypeChange(question)">
<ion-select-option value="text">Free Text</ion-select-option>
<ion-select-option value="multiple_choice">Multiple Choice</ion-select-option>
<ion-select-option value="yes_no">Yes / No</ion-select-option>
<ion-select-option value="rating">Rating (15)</ion-select-option>
</ion-select>
</ion-item>
<!-- Multiple choice options -->
<div *ngIf="question.type === 'multiple_choice'" class="options-section">
<ion-list-header>
<ion-label>Answer Options</ion-label>
</ion-list-header>
<ion-item
*ngFor="let option of question.options; let oi = index; trackBy: trackOption"
lines="none">
<ion-input
[(ngModel)]="question.options![oi]"
[placeholder]="'Option ' + (oi + 1)"
maxlength="200">
</ion-input>
<ion-button
slot="end"
fill="clear"
color="danger"
size="small"
(click)="removeOption(question, oi)"
[disabled]="(question.options?.length ?? 0) <= 2">
<ion-icon slot="icon-only" name="close-circle-outline"></ion-icon>
</ion-button>
</ion-item>
<ion-button fill="clear" size="small" (click)="addOption(question)">
<ion-icon slot="start" name="add-outline"></ion-icon>
Add Option
</ion-button>
</div>
<!-- Required toggle -->
<ion-item lines="none">
<ion-label>Required</ion-label>
<ion-toggle [(ngModel)]="question.required" slot="end"></ion-toggle>
</ion-item>
</ion-card-content>
</ion-card>
<!-- Add question button -->
<ion-button expand="block" fill="outline" (click)="addQuestion()" class="ion-margin-top">
<ion-icon slot="start" name="add-circle-outline"></ion-icon>
Add Question
</ion-button>
<!-- Validation hint -->
<p *ngIf="questions.length === 0" class="hint-text">Add at least one question to continue.</p>
</ion-content>

View File

@@ -1,18 +0,0 @@
.options-section {
margin-top: 8px;
padding: 8px 0;
border-top: 1px solid var(--ion-color-light);
}
.question-actions {
display: flex;
justify-content: flex-end;
margin-top: -8px;
}
.hint-text {
color: var(--ion-color-medium);
font-size: 0.875rem;
text-align: center;
padding: 8px 16px;
}

View File

@@ -1,203 +0,0 @@
/**
* create-survey.page.ts
* Page for creating a new survey or editing an existing one.
*
* When accessed via /create-survey → creates a new survey
* When accessed via /create-survey/:id → loads and edits the existing survey
*/
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ToastController } from '@ionic/angular';
import { SurveyService } from '../../services/survey.service';
import type { Survey, Question } from '../../shared/models/survey.models';
@Component({
selector: 'app-create-survey',
templateUrl: './create-survey.page.html',
styleUrls: ['./create-survey.page.scss'],
standalone: false,
})
export class CreateSurveyPage implements OnInit {
/** True when editing an existing survey */
isEditMode = false;
existingSurveyId?: string;
// Form fields
title = '';
description = '';
questions: Question[] = [];
/** Track which question's options are being edited */
expandedQuestionIndex: number | null = null;
constructor(
private route: ActivatedRoute,
private router: Router,
private surveyService: SurveyService,
private toastCtrl: ToastController
) {}
async ngOnInit(): Promise<void> {
const id = this.route.snapshot.paramMap.get('id');
if (id) {
this.isEditMode = true;
this.existingSurveyId = id;
await this.loadSurvey(id);
} else {
// Start with one empty question for a better UX
this.addQuestion();
}
}
private async loadSurvey(id: string): Promise<void> {
const survey = await this.surveyService.getSurvey(id);
if (!survey) {
const toast = await this.toastCtrl.create({
message: 'Survey not found.',
duration: 2000,
color: 'danger',
});
await toast.present();
this.router.navigate(['/home']);
return;
}
this.title = survey.title;
this.description = survey.description ?? '';
// Deep copy so edits don't mutate the original until saved
this.questions = JSON.parse(JSON.stringify(survey.questions));
}
// -------------------------------------------------------------------------
// Question management
// -------------------------------------------------------------------------
addQuestion(): void {
const question: Question = {
id: crypto.randomUUID(),
text: '',
type: 'text',
required: false,
};
this.questions.push(question);
this.expandedQuestionIndex = this.questions.length - 1;
}
removeQuestion(index: number): void {
this.questions.splice(index, 1);
if (this.expandedQuestionIndex === index) {
this.expandedQuestionIndex = null;
}
}
moveQuestionUp(index: number): void {
if (index === 0) return;
const temp = this.questions[index - 1];
this.questions[index - 1] = this.questions[index];
this.questions[index] = temp;
}
moveQuestionDown(index: number): void {
if (index === this.questions.length - 1) return;
const temp = this.questions[index + 1];
this.questions[index + 1] = this.questions[index];
this.questions[index] = temp;
}
toggleExpand(index: number): void {
this.expandedQuestionIndex =
this.expandedQuestionIndex === index ? null : index;
}
onTypeChange(question: Question): void {
// Initialise options array when switching to multiple_choice
if (question.type === 'multiple_choice' && !question.options?.length) {
question.options = ['Option 1', 'Option 2'];
}
}
addOption(question: Question): void {
if (!question.options) question.options = [];
question.options.push(`Option ${question.options.length + 1}`);
}
removeOption(question: Question, optIndex: number): void {
question.options?.splice(optIndex, 1);
}
trackOption(index: number): number {
return index;
}
trackQuestion(index: number): number {
return index;
}
// -------------------------------------------------------------------------
// Validation
// -------------------------------------------------------------------------
get isFormValid(): boolean {
if (!this.title.trim()) return false;
if (this.questions.length === 0) return false;
return this.questions.every(
(q) =>
q.text.trim() &&
(q.type !== 'multiple_choice' || (q.options && q.options.length >= 2))
);
}
// -------------------------------------------------------------------------
// Save / Update
// -------------------------------------------------------------------------
async save(): Promise<void> {
if (!this.isFormValid) return;
const questionsToSave = this.questions.map((q) => ({
...q,
text: q.text.trim(),
// Strip empty options for multiple_choice
options:
q.type === 'multiple_choice'
? q.options?.filter((o) => o.trim()) ?? []
: undefined,
}));
if (this.isEditMode && this.existingSurveyId) {
await this.surveyService.updateSurvey(this.existingSurveyId, {
title: this.title.trim(),
description: this.description.trim() || undefined,
questions: questionsToSave,
});
const toast = await this.toastCtrl.create({
message: 'Survey updated.',
duration: 2000,
color: 'success',
});
await toast.present();
this.router.navigate(['/survey', this.existingSurveyId]);
} else {
const survey = await this.surveyService.createSurvey({
title: this.title.trim(),
description: this.description.trim() || undefined,
questions: questionsToSave,
});
const toast = await this.toastCtrl.create({
message: 'Survey created.',
duration: 2000,
color: 'success',
});
await toast.present();
this.router.navigate(['/survey', survey.id]);
}
}
cancel(): void {
if (this.isEditMode && this.existingSurveyId) {
this.router.navigate(['/survey', this.existingSurveyId]);
} else {
this.router.navigate(['/home']);
}
}
}

View File

@@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParticipatePage } from './participate.page';
const routes: Routes = [
{
path: '',
component: ParticipatePage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class ParticipatePageRoutingModule {}

View File

@@ -1,20 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { ParticipatePageRoutingModule } from './participate-routing.module';
import { ParticipatePage } from './participate.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
ParticipatePageRoutingModule
],
declarations: [ParticipatePage]
})
export class ParticipatePageModule {}

View File

@@ -1,185 +0,0 @@
<ion-header>
<ion-toolbar color="primary">
<ion-title>Survey</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding">
<!-- ── Connecting ── -->
<div *ngIf="state === 'connecting'" class="state-card">
<ion-spinner name="crescent"></ion-spinner>
<h3>Connecting to survey host…</h3>
<p>Please wait while we establish a peer-to-peer connection.</p>
</div>
<!-- ── Connected (waiting for survey data) ── -->
<div *ngIf="state === 'connected'" class="state-card">
<ion-spinner name="dots"></ion-spinner>
<h3>Loading survey…</h3>
</div>
<!-- ── Host offline ── -->
<ion-card *ngIf="state === 'host-offline'" color="warning">
<ion-card-header>
<ion-card-title>
<ion-icon name="wifi-outline"></ion-icon>
Host is Offline
</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>
The survey host's browser is not currently accepting connections.
The survey creator needs to open the survey and click <strong>Start Hosting</strong>.
</p>
<p>Please try again later or ask the survey creator to come online.</p>
</ion-card-content>
</ion-card>
<!-- ── Error ── -->
<ion-card *ngIf="state === 'error'" color="danger">
<ion-card-header>
<ion-card-title>
<ion-icon name="alert-circle-outline"></ion-icon>
Error
</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>{{ errorMessage }}</p>
</ion-card-content>
</ion-card>
<!-- ── Survey form ── -->
<ng-container *ngIf="state === 'survey-loaded' && survey">
<div class="survey-header">
<h2>{{ survey.title }}</h2>
<p *ngIf="survey.description" class="survey-description">{{ survey.description }}</p>
</div>
<!-- Question cards -->
<ion-card *ngFor="let question of survey.questions; let i = index">
<ion-card-header>
<ion-card-subtitle>
Question {{ i + 1 }}
<span *ngIf="question.required" class="required-mark">*</span>
</ion-card-subtitle>
<ion-card-title class="question-title">{{ question.text }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<!-- Free text -->
<ion-item *ngIf="question.type === 'text'" lines="none">
<ion-textarea
[(ngModel)]="answers[question.id]"
placeholder="Your answer…"
rows="4"
maxlength="2000"
(ionBlur)="saveDraft()">
</ion-textarea>
</ion-item>
<!-- Multiple choice -->
<ion-radio-group
*ngIf="question.type === 'multiple_choice'"
[(ngModel)]="answers[question.id]"
(ngModelChange)="saveDraft()">
<ion-item *ngFor="let option of question.options" lines="none">
<ion-radio [value]="option" slot="start"></ion-radio>
<ion-label>{{ option }}</ion-label>
</ion-item>
</ion-radio-group>
<!-- Yes / No -->
<ion-radio-group
*ngIf="question.type === 'yes_no'"
[(ngModel)]="answers[question.id]"
(ngModelChange)="saveDraft()">
<ion-item lines="none">
<ion-radio value="Yes" slot="start"></ion-radio>
<ion-label>Yes</ion-label>
</ion-item>
<ion-item lines="none">
<ion-radio value="No" slot="start"></ion-radio>
<ion-label>No</ion-label>
</ion-item>
</ion-radio-group>
<!-- Rating 15 -->
<div *ngIf="question.type === 'rating'" class="rating-row">
<ion-button
*ngFor="let val of ratingValues()"
[fill]="answers[question.id] === val ? 'solid' : 'outline'"
[color]="answers[question.id] === val ? 'primary' : 'medium'"
(click)="answers[question.id] = val; saveDraft()"
size="small">
{{ val }}
</ion-button>
</div>
</ion-card-content>
</ion-card>
<p class="required-note">* Required question</p>
<div class="submit-area">
<ion-button expand="block" (click)="submit()" [disabled]="!isFormValid">
<ion-icon slot="start" name="checkmark-outline"></ion-icon>
Submit
</ion-button>
</div>
</ng-container>
<!-- ── Submitted ── -->
<div *ngIf="state === 'submitted'" class="state-card success-state">
<ion-icon name="checkmark-circle-outline" color="success" size="large"></ion-icon>
<h2>Thank you!</h2>
<p>Your response has been submitted successfully.</p>
<!-- Show results if host sent them -->
<ng-container *ngIf="results && survey">
<div class="results-divider">
<ion-label>Survey Results</ion-label>
</div>
<ion-card *ngFor="let q of survey.questions">
<ion-card-header>
<ion-card-title class="question-title">{{ q.text }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<ng-container *ngIf="getQuestionResult(q.id) as qr">
<!-- Tally (multiple_choice / yes_no) -->
<div *ngIf="qr.tally">
<div *ngFor="let entry of tallyEntries(qr.tally)" class="bar-row">
<span class="bar-label">{{ entry.key }}</span>
<div class="bar-track">
<div class="bar-fill" [style.width.%]="tallyPercent(entry.count)"></div>
</div>
<span class="bar-count">{{ entry.count }} ({{ tallyPercent(entry.count) }}%)</span>
</div>
</div>
<!-- Text answers -->
<div *ngIf="qr.texts">
<p *ngFor="let t of qr.texts; let i = index">{{ i + 1 }}. {{ t }}</p>
</div>
<!-- Rating -->
<div *ngIf="qr.ratingDistribution">
<p>Average: <strong>{{ formatAvg(qr.ratingAvg) }}</strong> / 5</p>
<div *ngFor="let count of qr.ratingDistribution; let i = index" class="bar-row">
<span class="bar-label">{{ ratingLabel(i) }} ★</span>
<div class="bar-track">
<div class="bar-fill" [style.width.%]="tallyPercent(count)"></div>
</div>
<span class="bar-count">{{ count }}</span>
</div>
</div>
</ng-container>
</ion-card-content>
</ion-card>
</ng-container>
</div>
</ion-content>

View File

@@ -1,119 +0,0 @@
.state-card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 60px 24px;
text-align: center;
ion-spinner {
width: 48px;
height: 48px;
margin-bottom: 16px;
}
ion-icon {
font-size: 72px;
margin-bottom: 16px;
}
h3, h2 {
margin: 0 0 8px;
}
p {
color: var(--ion-color-medium);
max-width: 320px;
}
}
.success-state {
ion-icon {
color: var(--ion-color-success);
}
}
.survey-header {
margin-bottom: 16px;
h2 {
font-size: 1.4rem;
font-weight: 700;
margin: 0 0 4px;
}
}
.survey-description {
color: var(--ion-color-medium);
margin: 0;
}
.question-title {
font-size: 1rem;
font-weight: 600;
white-space: normal;
line-height: 1.4;
}
.required-mark {
color: var(--ion-color-danger);
margin-left: 4px;
}
.required-note {
color: var(--ion-color-medium);
font-size: 0.8rem;
padding: 0 16px;
}
.rating-row {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding: 8px 0;
}
.submit-area {
padding: 16px 0 32px;
}
.results-divider {
display: flex;
align-items: center;
margin: 24px 0 8px;
width: 100%;
font-weight: 600;
color: var(--ion-color-primary);
}
.bar-row {
display: flex;
align-items: center;
margin-bottom: 8px;
gap: 8px;
}
.bar-label {
min-width: 60px;
font-size: 0.875rem;
}
.bar-track {
flex: 1;
height: 14px;
background: var(--ion-color-light);
border-radius: 7px;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: var(--ion-color-primary);
border-radius: 7px;
min-width: 2px;
}
.bar-count {
font-size: 0.8rem;
color: var(--ion-color-medium);
}

View File

@@ -1,267 +0,0 @@
/**
* participate.page.ts
* Survey participation page — opened by participants via their unique share link.
*
* URL format: /participate?host=survey-{surveyId}&token={participantToken}
*
* Connection flow:
* 1. Parse host peer ID and token from URL query params
* 2. Initialise a PeerJS peer with a random ID
* 3. Connect to the host peer
* 4. Send { type: 'join', token } to identify the participant
* 5. Receive survey data from host
* 6. Participant fills in answers (drafts saved via 'update' messages)
* 7. On submit, send { type: 'submit', ... } — host locks the token
* 8. Optionally receive aggregated results if the host has that setting enabled
*/
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { ToastController } from '@ionic/angular';
import { DataConnection } from 'peerjs';
import { PeerService } from '../../services/peer.service';
import type {
Survey,
Question,
P2PMessage,
SurveyResults,
QuestionResult,
} from '../../shared/models/survey.models';
/** Possible states of the participant UI */
type ParticipantState =
| 'connecting' // Trying to reach the host peer
| 'connected' // DataConnection open, waiting for survey data
| 'survey-loaded' // Survey received, participant filling in answers
| 'submitted' // Final answers submitted and acknowledged
| 'host-offline' // Could not connect within the timeout
| 'error'; // Protocol error (invalid token, already submitted, etc.)
@Component({
selector: 'app-participate',
templateUrl: './participate.page.html',
styleUrls: ['./participate.page.scss'],
standalone: false,
})
export class ParticipatePage implements OnInit, OnDestroy {
state: ParticipantState = 'connecting';
errorMessage = '';
survey?: Survey;
/** Map from questionId → current answer value */
answers: Record<string, unknown> = {};
results?: SurveyResults;
/** The participant's unique token (from URL) */
private token = '';
/** The host peer ID (from URL) */
private hostPeerId = '';
private conn?: DataConnection;
private offlineTimeout?: ReturnType<typeof setTimeout>;
constructor(
private route: ActivatedRoute,
private peerService: PeerService,
private toastCtrl: ToastController
) {}
async ngOnInit(): Promise<void> {
this.hostPeerId = this.route.snapshot.queryParamMap.get('host') ?? '';
this.token = this.route.snapshot.queryParamMap.get('token') ?? '';
if (!this.hostPeerId || !this.token) {
this.state = 'error';
this.errorMessage = 'Invalid link. Please check the URL and try again.';
return;
}
await this.connectToHost();
}
ngOnDestroy(): void {
clearTimeout(this.offlineTimeout);
this.peerService.destroy();
}
// -------------------------------------------------------------------------
// P2P connection
// -------------------------------------------------------------------------
private async connectToHost(): Promise<void> {
try {
// Initialise with a random peer ID (participants don't need a fixed ID)
await this.peerService.init();
this.conn = this.peerService.connectTo(this.hostPeerId);
// If the host does not respond within 8 seconds, show the offline card
this.offlineTimeout = setTimeout(() => {
if (this.state === 'connecting') {
this.state = 'host-offline';
}
}, 8000);
this.conn.on('open', () => {
clearTimeout(this.offlineTimeout);
this.state = 'connected';
// Identify ourselves to the host
this.conn!.send({ type: 'join', token: this.token } as P2PMessage);
});
this.conn.on('data', (rawMsg) => {
const msg = rawMsg as P2PMessage;
this.handleHostMessage(msg);
});
this.conn.on('error', () => {
clearTimeout(this.offlineTimeout);
this.state = 'host-offline';
});
this.conn.on('close', () => {
// Do not override 'submitted' state on normal close
if (this.state !== 'submitted') {
this.state = 'host-offline';
}
});
} catch {
this.state = 'host-offline';
}
}
/** Process a message received from the host */
private handleHostMessage(msg: P2PMessage): void {
switch (msg.type) {
case 'survey':
this.survey = msg.data;
// Pre-fill answers map with empty values
this.answers = {};
for (const q of this.survey.questions) {
this.answers[q.id] = q.type === 'rating' ? null : '';
}
this.state = 'survey-loaded';
break;
case 'ack':
// 'submitted' is handled as a state change
if (msg.status === 'submitted') {
this.state = 'submitted';
}
break;
case 'results':
this.results = msg.data;
break;
case 'error':
this.state = 'error';
this.errorMessage = this.friendlyError(msg.reason);
break;
}
}
// -------------------------------------------------------------------------
// Form interactions
// -------------------------------------------------------------------------
/** Save a draft without locking the token */
saveDraft(): void {
if (!this.conn?.open) return;
this.conn.send({
type: 'update',
token: this.token,
answers: this.answers,
} as P2PMessage);
}
/** Submit final answers — the token will be locked on the host side */
async submit(): Promise<void> {
if (!this.isFormValid) {
const toast = await this.toastCtrl.create({
message: 'Please answer all required questions before submitting.',
duration: 3000,
color: 'warning',
});
await toast.present();
return;
}
if (!this.conn?.open) {
this.state = 'host-offline';
return;
}
this.conn.send({
type: 'submit',
token: this.token,
answers: this.answers,
} as P2PMessage);
}
// -------------------------------------------------------------------------
// Validation
// -------------------------------------------------------------------------
get isFormValid(): boolean {
if (!this.survey) return false;
return this.survey.questions
.filter((q) => q.required)
.every((q) => {
const ans = this.answers[q.id];
return ans !== null && ans !== undefined && ans !== '';
});
}
// -------------------------------------------------------------------------
// Results display helpers
// -------------------------------------------------------------------------
getQuestionResult(questionId: string): QuestionResult | undefined {
return this.results?.answers[questionId];
}
tallyEntries(tally: Record<string, number>): { key: string; count: number }[] {
return Object.entries(tally)
.map(([key, count]) => ({ key, count }))
.sort((a, b) => b.count - a.count);
}
tallyPercent(count: number): number {
if (!this.results) return 0;
return Math.round((count / this.results.totalResponses) * 100);
}
formatAvg(avg: number | undefined): string {
return avg != null ? avg.toFixed(1) : '';
}
ratingLabel(index: number): string {
return String(index + 1);
}
// -------------------------------------------------------------------------
// Helpers
// -------------------------------------------------------------------------
/** Returns an array [1, 2, 3, 4, 5] for the rating question template */
ratingValues(): number[] {
return [1, 2, 3, 4, 5];
}
private friendlyError(
reason: 'invalid_token' | 'already_submitted' | 'survey_not_found' | 'survey_closed' | 'survey_draft'
): string {
switch (reason) {
case 'invalid_token':
return 'This link is not valid for this survey. Please check the URL.';
case 'already_submitted':
return 'You have already submitted a response for this survey. Each link can only be used once.';
case 'survey_not_found':
return 'The survey could not be found on the host. It may have been deleted.';
case 'survey_draft':
return 'This survey is not yet open for responses. Please try again later.';
case 'survey_closed':
return 'This survey is closed and no longer accepting responses.';
}
}
}

View File

@@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SurveyDetailPage } from './survey-detail.page';
const routes: Routes = [
{
path: '',
component: SurveyDetailPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SurveyDetailPageRoutingModule {}

View File

@@ -1,20 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { SurveyDetailPageRoutingModule } from './survey-detail-routing.module';
import { SurveyDetailPage } from './survey-detail.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SurveyDetailPageRoutingModule
],
declarations: [SurveyDetailPage]
})
export class SurveyDetailPageModule {}

View File

@@ -1,167 +0,0 @@
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button defaultHref="/home"></ion-back-button>
</ion-buttons>
<ion-title>{{ survey?.title ?? 'Survey' }}</ion-title>
<ion-buttons slot="end">
<ion-button (click)="editSurvey()">
<ion-icon slot="icon-only" name="create-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="ion-padding" *ngIf="survey">
<!-- Overview card -->
<ion-card>
<ion-card-header>
<ion-card-title>{{ survey.title }}</ion-card-title>
<ion-card-subtitle *ngIf="survey.description">{{ survey.description }}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<p>
<strong>{{ survey.questions.length }}</strong> question{{ survey.questions.length !== 1 ? 's' : '' }}
&bull;
<strong>{{ responseCount }}</strong> response{{ responseCount !== 1 ? 's' : '' }}
&bull;
<ion-badge [color]="survey.status === 'active' ? 'success' : 'medium'">{{ survey.status }}</ion-badge>
</p>
<p class="hint-text">Created: {{ survey.createdAt | date:'medium' }}</p>
</ion-card-content>
</ion-card>
<!-- Settings -->
<ion-card>
<ion-card-header>
<ion-card-title>Settings</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item lines="none">
<ion-label>
<h3>Show results to participants</h3>
<p>After submitting, participants see aggregated results.</p>
</ion-label>
<ion-toggle
[(ngModel)]="survey.showResultsToParticipants"
(ionChange)="toggleShowResults()"
slot="end">
</ion-toggle>
</ion-item>
<ion-item lines="none">
<ion-label>Survey Status</ion-label>
<ion-select
[(ngModel)]="survey.status"
(ionChange)="changeSurveyStatus(survey.status)"
slot="end">
<ion-select-option value="draft">Draft</ion-select-option>
<ion-select-option value="active">Active</ion-select-option>
<ion-select-option value="closed">Closed</ion-select-option>
</ion-select>
</ion-item>
</ion-card-content>
</ion-card>
<!-- Hosting control -->
<ion-card>
<ion-card-header>
<ion-card-title>Hosting</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-item lines="none" *ngIf="isHosting">
<ion-icon name="wifi" slot="start" color="success"></ion-icon>
<ion-label color="success">
<strong>Hosting active</strong>
<p>Participants can connect now. Keep this page open.</p>
</ion-label>
</ion-item>
<ion-item lines="none" *ngIf="!isHosting">
<ion-icon name="wifi-outline" slot="start" color="medium"></ion-icon>
<ion-label color="medium">
Not hosting. Start hosting to receive responses.
</ion-label>
</ion-item>
<div class="ion-margin-top button-row">
<ion-button *ngIf="!isHosting" expand="block" (click)="startHosting()"
[disabled]="survey.status !== 'active'">
<ion-icon slot="start" name="play-outline"></ion-icon>
Start Hosting
</ion-button>
<ion-button *ngIf="isHosting" expand="block" color="medium" fill="outline" (click)="stopHosting()">
<ion-icon slot="start" name="stop-outline"></ion-icon>
Stop Hosting
</ion-button>
<ion-button expand="block" fill="outline" (click)="viewResults()">
<ion-icon slot="start" name="bar-chart-outline"></ion-icon>
View Results
</ion-button>
</div>
</ion-card-content>
</ion-card>
<!-- Generate participant links -->
<ion-card>
<ion-card-header>
<ion-card-title>Share Links</ion-card-title>
</ion-card-header>
<ion-card-content>
<p>Generate unique links to share with participants. Each link can only be used once.</p>
<ion-item lines="none">
<ion-label>Number of links</ion-label>
<ion-input
type="number"
[(ngModel)]="linkCount"
min="1"
max="200"
slot="end"
style="max-width: 80px; text-align: right;">
</ion-input>
</ion-item>
<ion-button expand="block" (click)="generateLinks()" class="ion-margin-top">
<ion-icon slot="start" name="link-outline"></ion-icon>
Generate Links
</ion-button>
</ion-card-content>
</ion-card>
<!-- Participant list -->
<ion-card *ngIf="participants.length > 0">
<ion-card-header>
<ion-card-title>Participants ({{ participants.length }})</ion-card-title>
</ion-card-header>
<ion-card-content>
<ion-list lines="none">
<ion-item *ngFor="let p of participants">
<ion-label>
<h3>{{ p.label ?? ('Token ' + truncateToken(p.token)) }}</h3>
<p>
<ion-badge [color]="participantStatusColor(p)">{{ participantStatus(p) }}</ion-badge>
<span *ngIf="p.usedAt" class="hint-text"> &bull; Accessed {{ p.usedAt | date:'short' }}</span>
</p>
</ion-label>
<ion-button
slot="end"
fill="clear"
size="small"
(click)="copyLink(p.token)"
title="Copy link">
<ion-icon slot="icon-only" name="copy-outline"></ion-icon>
</ion-button>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
<!-- No participants yet -->
<ion-card *ngIf="participants.length === 0">
<ion-card-content>
<p class="hint-text ion-text-center">
No links generated yet. Use the form above to create share links.
</p>
</ion-card-content>
</ion-card>
</ion-content>

View File

@@ -1,14 +0,0 @@
.hint-text {
color: var(--ion-color-medium);
font-size: 0.85rem;
}
.button-row {
display: flex;
flex-direction: column;
gap: 8px;
}
ion-badge {
font-size: 0.75rem;
}

View File

@@ -1,323 +0,0 @@
/**
* survey-detail.page.ts
* Survey management page for the survey creator (host).
*
* Features:
* - View survey info and settings
* - Toggle whether participants can see aggregated results
* - Generate unique participant share links
* - Display the list of participants with their submission status
* - Start/stop hosting (activates the PeerJS peer so participants can connect)
*/
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ToastController } from '@ionic/angular';
import { DataConnection } from 'peerjs';
import { Subscription } from 'rxjs';
import { SurveyService } from '../../services/survey.service';
import { ResponseService } from '../../services/response.service';
import { PeerService } from '../../services/peer.service';
import type { Survey, Participant, P2PMessage } from '../../shared/models/survey.models';
@Component({
selector: 'app-survey-detail',
templateUrl: './survey-detail.page.html',
styleUrls: ['./survey-detail.page.scss'],
standalone: false,
})
export class SurveyDetailPage implements OnInit, OnDestroy {
survey?: Survey;
participants: Participant[] = [];
responseCount = 0;
/** Number of tokens to generate (bound to the input field) */
linkCount = 5;
/** True while the PeerJS peer is open and accepting connections */
isHosting = false;
/** Base URL used when constructing share links */
get appBaseUrl(): string {
return window.location.origin;
}
private surveyId = '';
private connectionSubscription?: Subscription;
private participantSubscription?: Subscription;
constructor(
private route: ActivatedRoute,
private router: Router,
private surveyService: SurveyService,
private responseService: ResponseService,
private peerService: PeerService,
private toastCtrl: ToastController
) {}
async ngOnInit(): Promise<void> {
this.surveyId = this.route.snapshot.paramMap.get('id') ?? '';
if (!this.surveyId) {
this.router.navigate(['/home']);
return;
}
await this.loadSurvey();
this.subscribeToParticipants();
await this.loadResponseCount();
}
ngOnDestroy(): void {
this.connectionSubscription?.unsubscribe();
this.participantSubscription?.unsubscribe();
// Stop hosting when navigating away
this.stopHosting();
}
// -------------------------------------------------------------------------
// Data loading
// -------------------------------------------------------------------------
private async loadSurvey(): Promise<void> {
this.survey = await this.surveyService.getSurvey(this.surveyId);
if (!this.survey) {
const toast = await this.toastCtrl.create({
message: 'Survey not found.',
duration: 2000,
color: 'danger',
});
await toast.present();
this.router.navigate(['/home']);
}
}
private subscribeToParticipants(): void {
this.participantSubscription = this.surveyService
.getParticipants$(this.surveyId)
.subscribe((participants) => {
this.participants = participants;
});
}
private async loadResponseCount(): Promise<void> {
const responses = await this.responseService.getResponses(this.surveyId);
this.responseCount = responses.length;
}
// -------------------------------------------------------------------------
// Settings
// -------------------------------------------------------------------------
/** Persist the showResultsToParticipants flag after ngModel has updated it */
async toggleShowResults(): Promise<void> {
if (!this.survey) return;
await this.surveyService.updateSurvey(this.surveyId, {
showResultsToParticipants: this.survey.showResultsToParticipants,
});
}
async changeSurveyStatus(status: Survey['status']): Promise<void> {
if (!this.survey) return;
await this.surveyService.updateSurvey(this.surveyId, { status });
}
// -------------------------------------------------------------------------
// Link generation
// -------------------------------------------------------------------------
async generateLinks(): Promise<void> {
if (this.linkCount < 1 || this.linkCount > 200) return;
await this.surveyService.generateParticipantTokens(this.surveyId, this.linkCount);
const toast = await this.toastCtrl.create({
message: `${this.linkCount} link${this.linkCount !== 1 ? 's' : ''} generated.`,
duration: 2000,
color: 'success',
});
await toast.present();
}
/** Build the full share URL for a participant token */
buildLink(token: string): string {
return `${this.appBaseUrl}/participate?host=survey-${this.surveyId}&token=${token}`;
}
/** Copy a link to the clipboard and show a toast */
async copyLink(token: string): Promise<void> {
const link = this.buildLink(token);
await navigator.clipboard.writeText(link);
const toast = await this.toastCtrl.create({
message: 'Link copied to clipboard.',
duration: 1500,
color: 'medium',
});
await toast.present();
}
/** Truncate a UUID token for display (first 8 chars) */
truncateToken(token: string): string {
return token.substring(0, 8) + '…';
}
// -------------------------------------------------------------------------
// Hosting (PeerJS)
// -------------------------------------------------------------------------
async startHosting(): Promise<void> {
if (!this.survey) return;
try {
const peerId = `survey-${this.surveyId}`;
await this.peerService.init(peerId);
this.isHosting = true;
// Update survey status to active
await this.changeSurveyStatus('active');
// Listen for incoming participant connections
this.connectionSubscription = this.peerService.onConnection$.subscribe(
(conn) => this.handleParticipantConnection(conn)
);
const toast = await this.toastCtrl.create({
message: 'Hosting started. Participants can now connect.',
duration: 3000,
color: 'success',
});
await toast.present();
} catch (err) {
console.error('Failed to start hosting:', err);
const toast = await this.toastCtrl.create({
message: 'Could not start hosting. Check your network connection.',
duration: 3000,
color: 'danger',
});
await toast.present();
}
}
stopHosting(): void {
if (this.isHosting) {
this.connectionSubscription?.unsubscribe();
this.peerService.destroy();
this.isHosting = false;
}
}
/**
* Handle a new DataConnection from a participant.
* The participant will send a 'join' message with their token.
*/
private handleParticipantConnection(conn: DataConnection): void {
conn.on('open', () => {
// Connection is open; wait for the participant to identify themselves
});
conn.on('data', async (rawMsg) => {
const msg = rawMsg as P2PMessage;
await this.processMessage(conn, msg);
});
conn.on('error', (err) => {
console.error('Participant connection error:', err);
});
}
/** Process a single P2P message from a participant */
private async processMessage(conn: DataConnection, msg: P2PMessage): Promise<void> {
if (!this.survey) return;
if (msg.type === 'join') {
if (this.survey.status === 'draft') {
conn.send({ type: 'error', reason: 'survey_draft' } as P2PMessage);
return;
}
if (this.survey.status === 'closed') {
conn.send({ type: 'error', reason: 'survey_closed' } as P2PMessage);
return;
}
const participant = await this.surveyService.getParticipant(msg.token);
if (!participant || participant.surveyId !== this.surveyId) {
conn.send({ type: 'error', reason: 'invalid_token' } as P2PMessage);
return;
}
if (participant.locked) {
conn.send({ type: 'error', reason: 'already_submitted' } as P2PMessage);
return;
}
// Record first connection time
if (!participant.usedAt) {
await this.surveyService.markParticipantUsed(msg.token);
}
// Send survey questions to the participant
conn.send({
type: 'survey',
data: this.survey,
showResults: this.survey.showResultsToParticipants,
} as P2PMessage);
}
if (msg.type === 'update') {
const participant = await this.surveyService.getParticipant(msg.token);
if (!participant || participant.locked) return;
// Save draft (does not lock the token)
await this.responseService.saveResponse(this.surveyId, msg.token, msg.answers);
conn.send({ type: 'ack', status: 'updated' } as P2PMessage);
await this.loadResponseCount();
}
if (msg.type === 'submit') {
const participant = await this.surveyService.getParticipant(msg.token);
if (!participant || participant.locked) return;
// Save final response and lock the token
await this.responseService.saveResponse(this.surveyId, msg.token, msg.answers);
await this.surveyService.lockParticipantToken(msg.token);
conn.send({ type: 'ack', status: 'submitted' } as P2PMessage);
await this.loadResponseCount();
// If configured, push aggregated results back to the participant
if (this.survey.showResultsToParticipants) {
const results = await this.responseService.computeResults(this.survey);
conn.send({ type: 'results', data: results } as P2PMessage);
}
}
}
// -------------------------------------------------------------------------
// Navigation
// -------------------------------------------------------------------------
editSurvey(): void {
this.router.navigate(['/create-survey', this.surveyId]);
}
viewResults(): void {
this.router.navigate(['/survey', this.surveyId, 'results']);
}
goBack(): void {
this.router.navigate(['/home']);
}
// -------------------------------------------------------------------------
// Helpers
// -------------------------------------------------------------------------
participantStatus(p: Participant): string {
if (p.locked) return 'submitted';
if (p.usedAt) return 'in progress';
return 'pending';
}
participantStatusColor(p: Participant): string {
if (p.locked) return 'success';
if (p.usedAt) return 'warning';
return 'medium';
}
}

View File

@@ -1,17 +0,0 @@
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SurveyResultsPage } from './survey-results.page';
const routes: Routes = [
{
path: '',
component: SurveyResultsPage
}
];
@NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule],
})
export class SurveyResultsPageRoutingModule {}

View File

@@ -1,18 +0,0 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { SurveyResultsPageRoutingModule } from './survey-results-routing.module';
import { SurveyResultsPage } from './survey-results.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
SurveyResultsPageRoutingModule,
],
declarations: [SurveyResultsPage],
})
export class SurveyResultsPageModule {}

View File

@@ -1,125 +0,0 @@
<ion-header>
<ion-toolbar color="primary">
<ion-buttons slot="start">
<ion-back-button [defaultHref]="'/survey/' + surveyId"></ion-back-button>
</ion-buttons>
<ion-title>Results</ion-title>
<ion-buttons slot="end">
<ion-button (click)="exportCsv()" [disabled]="responses.length === 0" title="Export CSV">
<ion-icon slot="icon-only" name="download-outline"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<!-- Survey title and response count -->
<div class="results-header ion-padding">
<h2>{{ survey?.title }}</h2>
<p>
<strong>{{ responses.length }}</strong> response{{ responses.length !== 1 ? 's' : '' }} collected
</p>
</div>
<!-- Tab selector -->
<ion-segment [(ngModel)]="activeTab" class="ion-padding-horizontal">
<ion-segment-button value="summary">
<ion-label>Summary</ion-label>
</ion-segment-button>
<ion-segment-button value="individual">
<ion-label>Individual</ion-label>
</ion-segment-button>
</ion-segment>
<!-- No responses yet -->
<div *ngIf="responses.length === 0" class="empty-state ion-padding">
<ion-icon name="hourglass-outline" size="large"></ion-icon>
<h3>No responses yet</h3>
<p>Start hosting on the survey detail page so participants can connect.</p>
</div>
<!-- ── Summary tab ── -->
<div *ngIf="activeTab === 'summary' && responses.length > 0 && results">
<ng-container *ngFor="let qId of questionIds()">
<ion-card *ngIf="results.answers[qId] as qr">
<ion-card-header>
<ion-card-subtitle>{{ formatQuestionType(qr.type) }}</ion-card-subtitle>
<ion-card-title class="question-title">{{ qr.questionText }}</ion-card-title>
</ion-card-header>
<ion-card-content>
<!-- Multiple choice / yes_no: bar chart -->
<ng-container *ngIf="qr.tally">
<div
*ngFor="let entry of tallyEntries(qr.tally)"
class="bar-row">
<span class="bar-label">{{ entry.key }}</span>
<div class="bar-track">
<div
class="bar-fill"
[style.width.%]="tallyPercent(entry.count)">
</div>
</div>
<span class="bar-count">{{ entry.count }} ({{ tallyPercent(entry.count) }}%)</span>
</div>
</ng-container>
<!-- Text: list of all answers -->
<ng-container *ngIf="qr.texts">
<ion-list lines="inset">
<ion-item *ngFor="let text of qr.texts; let i = index">
<ion-label class="ion-text-wrap">
<p>{{ i + 1 }}. {{ text }}</p>
</ion-label>
</ion-item>
</ion-list>
<p *ngIf="qr.texts.length === 0" class="hint-text">No answers yet.</p>
</ng-container>
<!-- Rating: average + distribution -->
<ng-container *ngIf="qr.ratingDistribution">
<p class="rating-avg">
Average: <strong>{{ formatAvg(qr.ratingAvg) }}</strong> / 5
</p>
<div
*ngFor="let count of qr.ratingDistribution; let i = index"
class="bar-row">
<span class="bar-label">{{ ratingLabel(i) }} ★</span>
<div class="bar-track">
<div
class="bar-fill"
[style.width.%]="tallyPercent(count)">
</div>
</div>
<span class="bar-count">{{ count }}</span>
</div>
</ng-container>
</ion-card-content>
</ion-card>
</ng-container>
</div>
<!-- ── Individual tab ── -->
<div *ngIf="activeTab === 'individual' && responses.length > 0">
<ion-card *ngFor="let response of responses; let i = index">
<ion-card-header>
<ion-card-subtitle>Response #{{ i + 1 }} &bull; {{ response.submittedAt | date:'medium' }}</ion-card-subtitle>
</ion-card-header>
<ion-card-content>
<ion-list lines="none">
<ion-item *ngFor="let q of survey!.questions">
<ion-label class="ion-text-wrap">
<p class="question-text">{{ q.text }}</p>
<p class="answer-text">
<strong>{{ response.answers[q.id] ?? '(no answer)' }}</strong>
</p>
</ion-label>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
</div>
</ion-content>

View File

@@ -1,93 +0,0 @@
.results-header {
padding-bottom: 0;
h2 {
font-size: 1.3rem;
font-weight: 600;
margin: 0 0 4px;
}
p {
color: var(--ion-color-medium);
margin: 0;
}
}
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 48px 24px;
text-align: center;
ion-icon {
font-size: 56px;
color: var(--ion-color-medium);
margin-bottom: 12px;
}
}
.bar-row {
display: flex;
align-items: center;
margin-bottom: 8px;
gap: 8px;
}
.bar-label {
min-width: 80px;
font-size: 0.875rem;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.bar-track {
flex: 1;
height: 16px;
background: var(--ion-color-light);
border-radius: 8px;
overflow: hidden;
}
.bar-fill {
height: 100%;
background: var(--ion-color-primary);
border-radius: 8px;
transition: width 0.4s ease;
min-width: 2px;
}
.bar-count {
min-width: 70px;
font-size: 0.8rem;
color: var(--ion-color-medium);
text-align: right;
}
.question-title {
font-size: 1rem;
font-weight: 600;
white-space: normal;
}
.rating-avg {
font-size: 1rem;
margin-bottom: 12px;
}
.hint-text {
color: var(--ion-color-medium);
font-size: 0.875rem;
}
.question-text {
color: var(--ion-color-medium);
font-size: 0.85rem;
margin-bottom: 4px;
}
.answer-text {
font-size: 0.95rem;
}

View File

@@ -1,145 +0,0 @@
/**
* survey-results.page.ts
* Live results view for the survey creator.
*
* Uses Dexie liveQuery (via ResponseService) to automatically refresh
* whenever a new response is saved. Can also export responses as CSV.
*/
import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ToastController } from '@ionic/angular';
import { Subscription } from 'rxjs';
import { SurveyService } from '../../services/survey.service';
import { ResponseService } from '../../services/response.service';
import type { Survey, Response, SurveyResults } from '../../shared/models/survey.models';
@Component({
selector: 'app-survey-results',
templateUrl: './survey-results.page.html',
styleUrls: ['./survey-results.page.scss'],
standalone: false,
})
export class SurveyResultsPage implements OnInit, OnDestroy {
survey?: Survey;
responses: Response[] = [];
results?: SurveyResults;
/** Controls which tab is active: 'summary' | 'individual' */
activeTab: 'summary' | 'individual' = 'summary';
surveyId = '';
private responseSubscription?: Subscription;
constructor(
private route: ActivatedRoute,
private router: Router,
private surveyService: SurveyService,
private responseService: ResponseService,
private toastCtrl: ToastController
) {}
async ngOnInit(): Promise<void> {
this.surveyId = this.route.snapshot.paramMap.get('id') ?? '';
if (!this.surveyId) {
this.router.navigate(['/home']);
return;
}
this.survey = await this.surveyService.getSurvey(this.surveyId);
if (!this.survey) {
this.router.navigate(['/home']);
return;
}
// Subscribe to live updates — results refresh whenever a new response arrives
this.responseSubscription = this.responseService
.getResponses$(this.surveyId)
.subscribe(async (responses) => {
this.responses = responses;
if (this.survey) {
this.results = await this.responseService.computeResults(this.survey);
}
});
}
ngOnDestroy(): void {
this.responseSubscription?.unsubscribe();
}
// -------------------------------------------------------------------------
// Helpers for the template
// -------------------------------------------------------------------------
/** Returns the keys of the results.answers object in question order */
questionIds(): string[] {
return this.survey?.questions.map((q) => q.id) ?? [];
}
/** Formats a rating average to one decimal place */
formatAvg(avg: number | undefined): string {
return avg != null ? avg.toFixed(1) : '';
}
/** Returns tally entries sorted by count (highest first) */
tallyEntries(tally: Record<string, number>): { key: string; count: number }[] {
return Object.entries(tally)
.map(([key, count]) => ({ key, count }))
.sort((a, b) => b.count - a.count);
}
/** Percentage of total responses for a tally value */
tallyPercent(count: number): number {
if (this.responses.length === 0) return 0;
return Math.round((count / this.responses.length) * 100);
}
/** Returns the label for a rating index (1-based) */
ratingLabel(index: number): string {
return String(index + 1);
}
/** Converts snake_case question type to a readable label */
formatQuestionType(type: string): string {
const labels: Record<string, string> = {
text: 'Free Text',
multiple_choice: 'Multiple Choice',
yes_no: 'Yes / No',
rating: 'Rating',
};
return labels[type] ?? type;
}
// -------------------------------------------------------------------------
// CSV export
// -------------------------------------------------------------------------
exportCsv(): void {
if (!this.survey || this.responses.length === 0) return;
const questions = this.survey.questions;
const header = ['Submitted At', ...questions.map((q) => q.text)].join(',');
const rows = this.responses.map((r) => {
const values = questions.map((q) => {
const ans = r.answers[q.id] ?? '';
// Escape commas and newlines in text answers
const escaped = String(ans).replace(/"/g, '""');
return `"${escaped}"`;
});
return [`"${r.submittedAt}"`, ...values].join(',');
});
const csv = [header, ...rows].join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = `${this.survey.title.replace(/\s+/g, '_')}_results.csv`;
a.click();
URL.revokeObjectURL(url);
}
goBack(): void {
this.router.navigate(['/survey', this.surveyId]);
}
}

View File

@@ -1,198 +0,0 @@
/**
* peer.service.ts
* Angular service wrapping PeerJS for P2P WebRTC data channel communication.
*
* This service works for both the host (survey creator) and participants.
*
* IMPORTANT: All PeerJS event callbacks fire outside Angular's change-detection
* zone. Every callback body is wrapped in NgZone.run() to ensure the UI updates
* correctly after receiving P2P messages.
*/
import { Injectable, NgZone, OnDestroy } from '@angular/core';
import Peer, { DataConnection } from 'peerjs';
import { Subject, Observable } from 'rxjs';
/** Connection states used to drive UI feedback */
export type PeerConnectionState =
| 'idle'
| 'connecting'
| 'connected'
| 'disconnected'
| 'error';
@Injectable({ providedIn: 'root' })
export class PeerService implements OnDestroy {
private peer: Peer | null = null;
/** All active data connections, keyed by the remote peer ID */
private connections = new Map<string, DataConnection>();
// -------------------------------------------------------------------------
// Subjects exposed as Observables — components subscribe to these
// -------------------------------------------------------------------------
/** Emits every new incoming DataConnection (host side) */
private connectionSubject = new Subject<DataConnection>();
readonly onConnection$: Observable<DataConnection> =
this.connectionSubject.asObservable();
/** Emits when THIS peer disconnects from the PeerJS broker */
private disconnectSubject = new Subject<void>();
readonly onDisconnect$: Observable<void> =
this.disconnectSubject.asObservable();
/** Emits PeerJS errors */
private errorSubject = new Subject<Error>();
readonly onError$: Observable<Error> = this.errorSubject.asObservable();
/** Current peer ID assigned by the broker (null if not yet initialised) */
currentPeerId: string | null = null;
/** Observable connection state of this peer to the signaling broker */
private stateSubject = new Subject<PeerConnectionState>();
readonly state$: Observable<PeerConnectionState> =
this.stateSubject.asObservable();
constructor(private ngZone: NgZone) {}
// -------------------------------------------------------------------------
// Initialisation
// -------------------------------------------------------------------------
/**
* Create and open a PeerJS connection to the signaling broker.
*
* @param peerId Optional fixed peer ID.
* Hosts use `survey-{surveyId}` so participants can find them.
* Participants omit this to get a random ID.
* @returns The assigned peer ID.
*/
init(peerId?: string): Promise<string> {
// Destroy any previous instance before re-initialising
this.destroy();
return new Promise((resolve, reject) => {
this.ngZone.runOutsideAngular(() => {
this.peer = peerId ? new Peer(peerId) : new Peer();
this.peer.on('open', (id) => {
this.ngZone.run(() => {
this.currentPeerId = id;
this.stateSubject.next('connected');
resolve(id);
});
});
this.peer.on('connection', (conn) => {
this.ngZone.run(() => {
this.registerConnection(conn);
this.connectionSubject.next(conn);
});
});
this.peer.on('disconnected', () => {
this.ngZone.run(() => {
this.stateSubject.next('disconnected');
this.disconnectSubject.next();
});
});
this.peer.on('error', (err) => {
this.ngZone.run(() => {
this.stateSubject.next('error');
this.errorSubject.next(err as Error);
reject(err);
});
});
});
});
}
// -------------------------------------------------------------------------
// Outbound connections (participant side)
// -------------------------------------------------------------------------
/**
* Connect to a remote peer (the host).
* Returns the DataConnection immediately; caller should listen for
* the 'open' event before sending messages.
*
* @param remotePeerId The host's peer ID, e.g. `survey-{surveyId}`.
*/
connectTo(remotePeerId: string): DataConnection {
if (!this.peer) {
throw new Error('PeerService: call init() before connectTo()');
}
const conn = this.peer.connect(remotePeerId, { reliable: true });
this.registerConnection(conn);
return conn;
}
// -------------------------------------------------------------------------
// Sending data
// -------------------------------------------------------------------------
/**
* Send a message to a connected peer.
* The message is automatically serialised (PeerJS uses JSON by default).
*
* @param remotePeerId Target peer ID.
* @param data Any JSON-serialisable value.
*/
send(remotePeerId: string, data: unknown): void {
const conn = this.connections.get(remotePeerId);
if (conn && conn.open) {
conn.send(data);
}
}
// -------------------------------------------------------------------------
// Internal helpers
// -------------------------------------------------------------------------
/**
* Store a connection and set up common event listeners on it.
* Wraps all callbacks in NgZone.run() for change-detection safety.
*/
private registerConnection(conn: DataConnection): void {
this.connections.set(conn.peer, conn);
conn.on('close', () => {
this.ngZone.run(() => {
this.connections.delete(conn.peer);
});
});
conn.on('error', (err) => {
this.ngZone.run(() => {
console.error(`PeerService: connection error with ${conn.peer}`, err);
this.connections.delete(conn.peer);
});
});
}
// -------------------------------------------------------------------------
// Cleanup
// -------------------------------------------------------------------------
/**
* Close all connections and destroy the PeerJS instance.
* Call this when the host navigates away from the survey page.
*/
destroy(): void {
if (this.peer) {
this.connections.forEach((conn) => conn.close());
this.connections.clear();
this.peer.destroy();
this.peer = null;
this.currentPeerId = null;
this.stateSubject.next('idle');
}
}
ngOnDestroy(): void {
this.destroy();
}
}

View File

@@ -1,181 +0,0 @@
/**
* response.service.ts
* Read/write operations for survey responses and result aggregation.
*
* Responses are stored exclusively in the host's (creator's) IndexedDB.
* Participants never store response data locally.
*/
import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { liveQuery } from 'dexie';
import { db } from '../database/database';
import type {
Response,
Survey,
QuestionResult,
SurveyResults,
} from '../shared/models/survey.models';
@Injectable({ providedIn: 'root' })
export class ResponseService {
// -------------------------------------------------------------------------
// Persistence
// -------------------------------------------------------------------------
/**
* Save (insert or update) a participant's response.
* If a response for the given participantToken already exists, it is replaced.
* This handles both final submissions and draft updates.
*
* @param surveyId The survey being answered.
* @param participantToken The participant's unique token.
* @param answers Map from questionId to answer value.
*/
async saveResponse(
surveyId: string,
participantToken: string,
answers: Record<string, unknown>
): Promise<void> {
// Check for existing response to preserve the original submission time
const existing = await db.responses
.where('participantToken')
.equals(participantToken)
.first();
const now = new Date().toISOString();
if (existing) {
await db.responses.update(existing.id, {
answers,
updatedAt: now,
});
} else {
const response: Response = {
id: crypto.randomUUID(),
surveyId,
participantToken,
answers,
submittedAt: now,
};
await db.responses.add(response);
}
}
// -------------------------------------------------------------------------
// Reading responses
// -------------------------------------------------------------------------
/** Get all responses for a survey (one-time async read) */
async getResponses(surveyId: string): Promise<Response[]> {
return db.responses.where('surveyId').equals(surveyId).toArray();
}
/**
* Reactive stream of all responses for a survey.
* Automatically re-emits whenever a new response is saved or updated.
* Use this on the results page for real-time updates.
*/
getResponses$(surveyId: string): Observable<Response[]> {
return from(
liveQuery(() =>
db.responses.where('surveyId').equals(surveyId).toArray()
)
);
}
/** Get the single response submitted for a given participant token */
async getResponseByToken(participantToken: string): Promise<Response | undefined> {
return db.responses
.where('participantToken')
.equals(participantToken)
.first();
}
// -------------------------------------------------------------------------
// Result aggregation
// -------------------------------------------------------------------------
/**
* Compute aggregated results for a survey.
* This is computed on demand — the aggregation is not stored anywhere.
*
* @param survey The full survey definition (needed for question metadata).
* @returns Aggregated SurveyResults object.
*/
async computeResults(survey: Survey): Promise<SurveyResults> {
const responses = await this.getResponses(survey.id);
const results: SurveyResults = {
surveyId: survey.id,
totalResponses: responses.length,
answers: {},
};
for (const question of survey.questions) {
const questionResult: QuestionResult = {
questionId: question.id,
questionText: question.text,
type: question.type,
};
// Collect the answer for this question from every response
const rawAnswers = responses
.map((r) => r.answers[question.id])
.filter((a) => a !== undefined && a !== null && a !== '');
switch (question.type) {
case 'multiple_choice': {
// Count how many times each option was selected
const tally: Record<string, number> = {};
// Initialise all options to 0 so even unselected options appear
(question.options ?? []).forEach((opt) => (tally[opt] = 0));
rawAnswers.forEach((a) => {
const key = String(a);
tally[key] = (tally[key] ?? 0) + 1;
});
questionResult.tally = tally;
break;
}
case 'yes_no': {
const tally: Record<string, number> = { Yes: 0, No: 0 };
rawAnswers.forEach((a) => {
const key = a === true || a === 'Yes' ? 'Yes' : 'No';
tally[key]++;
});
questionResult.tally = tally;
break;
}
case 'text': {
questionResult.texts = rawAnswers.map(String);
break;
}
case 'rating': {
const nums = rawAnswers.map(Number).filter((n) => !isNaN(n));
if (nums.length > 0) {
questionResult.ratingAvg =
nums.reduce((acc, n) => acc + n, 0) / nums.length;
// distribution[0] = count of rating 1, ..., distribution[4] = count of rating 5
const dist = [0, 0, 0, 0, 0];
nums.forEach((n) => {
const idx = Math.round(n) - 1;
if (idx >= 0 && idx <= 4) {
dist[idx]++;
}
});
questionResult.ratingDistribution = dist;
}
break;
}
}
results.answers[question.id] = questionResult;
}
return results;
}
}

View File

@@ -1,160 +0,0 @@
/**
* survey.service.ts
* CRUD operations for surveys and participant tokens using Dexie (IndexedDB).
*
* The service exposes both async methods (for one-time reads/writes) and
* Observable streams powered by Dexie's liveQuery for reactive UI updates.
*/
import { Injectable } from '@angular/core';
import { Observable, from } from 'rxjs';
import { liveQuery } from 'dexie';
import { db } from '../database/database';
import type { Survey, Question, Participant } from '../shared/models/survey.models';
@Injectable({ providedIn: 'root' })
export class SurveyService {
// -------------------------------------------------------------------------
// Survey CRUD
// -------------------------------------------------------------------------
/**
* Reactive stream of all surveys, ordered newest-first.
* Automatically emits whenever the surveys table changes.
*/
getAllSurveys$(): Observable<Survey[]> {
return from(
liveQuery(() =>
db.surveys.orderBy('createdAt').reverse().toArray()
)
);
}
/** Retrieve a single survey by its UUID */
async getSurvey(id: string): Promise<Survey | undefined> {
return db.surveys.get(id);
}
/**
* Create a new survey and persist it to IndexedDB.
* Assigns a UUID and sets default values.
*
* @param data Partial survey — title and questions are required.
* @returns The fully populated Survey object.
*/
async createSurvey(data: {
title: string;
description?: string;
questions: Question[];
showResultsToParticipants?: boolean;
}): Promise<Survey> {
const survey: Survey = {
id: crypto.randomUUID(),
title: data.title,
description: data.description,
questions: data.questions,
createdAt: new Date().toISOString(),
showResultsToParticipants: data.showResultsToParticipants ?? false,
status: 'draft',
};
await db.surveys.add(survey);
return survey;
}
/**
* Partially update an existing survey.
* Pass only the fields you want to change.
*/
async updateSurvey(id: string, patch: Partial<Omit<Survey, 'id'>>): Promise<void> {
await db.surveys.update(id, patch);
}
/**
* Delete a survey and all associated participants and responses.
* Once deleted the data is gone — there is no undo.
*/
async deleteSurvey(id: string): Promise<void> {
await db.transaction('rw', [db.surveys, db.participants, db.responses], async () => {
// Remove all participant tokens for this survey
await db.participants.where('surveyId').equals(id).delete();
// Remove all responses for this survey
await db.responses.where('surveyId').equals(id).delete();
// Remove the survey itself
await db.surveys.delete(id);
});
}
// -------------------------------------------------------------------------
// Participant token management
// -------------------------------------------------------------------------
/**
* Generate `count` unique participant tokens for the given survey and
* store them in IndexedDB.
*
* Each token becomes the identity embedded in a shareable link.
* Tokens are NOT locked until the participant clicks "Submit".
*
* @returns The array of newly created Participant records.
*/
async generateParticipantTokens(
surveyId: string,
count: number
): Promise<Participant[]> {
const participants: Participant[] = Array.from({ length: count }, () => ({
token: crypto.randomUUID(),
surveyId,
locked: false,
}));
await db.participants.bulkAdd(participants);
return participants;
}
/**
* Retrieve all participant tokens for a survey (ordered by insertion).
*/
async getParticipants(surveyId: string): Promise<Participant[]> {
return db.participants.where('surveyId').equals(surveyId).toArray();
}
/**
* Reactive stream of participants for a survey.
* Emits whenever a participant's status changes (e.g. locked).
*/
getParticipants$(surveyId: string): Observable<Participant[]> {
return from(
liveQuery(() =>
db.participants.where('surveyId').equals(surveyId).toArray()
)
);
}
/** Look up a single participant by token */
async getParticipant(token: string): Promise<Participant | undefined> {
return db.participants.get(token);
}
/**
* Mark a participant token as "used" (first connection received).
* Does NOT lock the token — the participant can still update answers.
*/
async markParticipantUsed(token: string): Promise<void> {
await db.participants.update(token, { usedAt: new Date().toISOString() });
}
/**
* Lock a participant token after a final submission.
* Any subsequent join attempts with this token will be rejected.
*/
async lockParticipantToken(token: string): Promise<void> {
await db.participants.update(token, { locked: true });
}
/**
* Update the optional human-readable label for a participant token.
*/
async updateParticipantLabel(token: string, label: string): Promise<void> {
await db.participants.update(token, { label });
}
}

View File

@@ -1,137 +0,0 @@
/**
* survey.models.ts
* Central TypeScript interfaces and types for the P2P Survey App.
* All data structures for surveys, participants, responses, and
* the P2P wire protocol are defined here.
*/
// ---------------------------------------------------------------------------
// Core data models (stored in IndexedDB)
// ---------------------------------------------------------------------------
/** A single question in a survey */
export interface Question {
/** Unique identifier (UUID) */
id: string;
/** Question text displayed to participants */
text: string;
/** Type of question determines the input widget */
type: 'multiple_choice' | 'text' | 'rating' | 'yes_no';
/** Answer options — only used when type === 'multiple_choice' */
options?: string[];
/** Whether the participant must answer this question before submitting */
required: boolean;
}
/** A complete survey definition created by the host */
export interface Survey {
/** Unique identifier (UUID) */
id: string;
/** Short title shown in lists and headings */
title: string;
/** Optional longer description shown to participants */
description?: string;
/** Ordered list of questions */
questions: Question[];
/** When the survey was created (stored as ISO string in IndexedDB) */
createdAt: string;
/**
* If true, participants who submit their answers will receive
* an aggregated results summary via the P2P data channel.
*/
showResultsToParticipants: boolean;
/** Lifecycle state of the survey */
status: 'draft' | 'active' | 'closed';
}
/**
* A pre-generated participation token tied to exactly one survey.
* Each unique share link contains one of these tokens.
* The primary key is `token` (UUID).
*/
export interface Participant {
/** UUID that is embedded in the unique share link */
token: string;
/** The survey this token belongs to */
surveyId: string;
/** Optional human-readable label (e.g. "Alice", "Respondent 3") */
label?: string;
/** When this token was first used to connect */
usedAt?: string;
/**
* True once the participant has clicked "Submit".
* Locked tokens reject any further submissions from that link.
*/
locked: boolean;
}
/** A participant's answers for one survey — stored by the host in IndexedDB */
export interface Response {
/** Unique identifier (UUID) */
id: string;
/** Which survey this response belongs to */
surveyId: string;
/** The participant token that submitted this response */
participantToken: string;
/** Map from questionId → answer value */
answers: Record<string, unknown>;
/** When the participant clicked "Submit" */
submittedAt: string;
/** Updated whenever the participant sends a draft update */
updatedAt?: string;
}
// ---------------------------------------------------------------------------
// Aggregated results (computed on-the-fly, not stored)
// ---------------------------------------------------------------------------
/** Aggregated result for a single question */
export interface QuestionResult {
questionId: string;
questionText: string;
type: Question['type'];
/** For 'multiple_choice' and 'yes_no': count per option string */
tally?: Record<string, number>;
/** For 'text': array of all free-text answers */
texts?: string[];
/** For 'rating': arithmetic mean of all numeric answers */
ratingAvg?: number;
/** For 'rating': counts per rating value [index 0 = rating 1, ..., index 4 = rating 5] */
ratingDistribution?: number[];
}
/** Aggregated results for an entire survey */
export interface SurveyResults {
surveyId: string;
totalResponses: number;
/** Map from questionId → aggregated result */
answers: Record<string, QuestionResult>;
}
// ---------------------------------------------------------------------------
// P2P wire protocol — discriminated union of all messages
// ---------------------------------------------------------------------------
/**
* Every message exchanged over the PeerJS data channel must conform
* to one of these shapes. The `type` field is the discriminant.
*
* Flow:
* Participant → Host : join, submit, update
* Host → Participant : survey, results, ack, error
*/
export type P2PMessage =
/** Participant identifies itself to the host and requests the survey */
| { type: 'join'; token: string }
/** Host sends the survey definition to the participant */
| { type: 'survey'; data: Survey; showResults: boolean }
/** Participant submits final answers — host will lock the token */
| { type: 'submit'; token: string; answers: Record<string, unknown> }
/** Participant saves a draft — host stores answers but does NOT lock token */
| { type: 'update'; token: string; answers: Record<string, unknown> }
/** Host pushes aggregated results to participant (if showResults is true) */
| { type: 'results'; data: SurveyResults }
/** Host acknowledges a successful submit or update */
| { type: 'ack'; status: 'submitted' | 'updated' }
/** Host signals an error — participant should display the reason */
| { type: 'error'; reason: 'invalid_token' | 'already_submitted' | 'survey_not_found' | 'survey_closed' | 'survey_draft' };

Binary file not shown.

Before

Width:  |  Height:  |  Size: 930 B

View File

@@ -1 +0,0 @@
<svg width="350" height="140" xmlns="http://www.w3.org/2000/svg" style="background:#f6f7f9"><g fill="none" fill-rule="evenodd"><path fill="#F04141" style="mix-blend-mode:multiply" d="M61.905-34.23l96.194 54.51-66.982 54.512L22 34.887z"/><circle fill="#10DC60" style="mix-blend-mode:multiply" cx="155.5" cy="135.5" r="57.5"/><path fill="#3880FF" style="mix-blend-mode:multiply" d="M208.538 9.513l84.417 15.392L223.93 93.93z"/><path fill="#FFCE00" style="mix-blend-mode:multiply" d="M268.625 106.557l46.332-26.75 46.332 26.75v53.5l-46.332 26.75-46.332-26.75z"/><circle fill="#7044FF" style="mix-blend-mode:multiply" cx="299.5" cy="9.5" r="38.5"/><rect fill="#11D3EA" style="mix-blend-mode:multiply" transform="rotate(-60 148.47 37.886)" x="143.372" y="-7.056" width="10.196" height="89.884" rx="5.098"/><path d="M-25.389 74.253l84.86 8.107c5.498.525 9.53 5.407 9.004 10.905a10 10 0 0 1-.057.477l-12.36 85.671a10.002 10.002 0 0 1-11.634 8.42l-86.351-15.226c-5.44-.959-9.07-6.145-8.112-11.584l13.851-78.551a10 10 0 0 1 10.799-8.219z" fill="#7044FF" style="mix-blend-mode:multiply"/><circle fill="#0CD1E8" style="mix-blend-mode:multiply" cx="273.5" cy="106.5" r="20.5"/></g></svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -1,3 +0,0 @@
export const environment = {
production: true
};

View File

@@ -1,16 +0,0 @@
// This file can be replaced during build by using the `fileReplacements` array.
// `ng build` replaces `environment.ts` with `environment.prod.ts`.
// The list of file replacements can be found in `angular.json`.
export const environment = {
production: false
};
/*
* For easier debugging in development mode, you can import the following file
* to ignore zone related error stack frames such as `zone.run`, `zoneDelegate.invokeTask`.
*
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

View File

@@ -1,37 +0,0 @@
/*
* App Global CSS
* ----------------------------------------------------------------------------
* Put style rules here that you want to apply globally. These styles are for
* the entire app and not just one component. Additionally, this file can be
* used as an entry point to import other CSS/Sass files to be included in the
* output CSS.
* For more information on global stylesheets, visit the documentation:
* https://ionicframework.com/docs/layout/global-stylesheets
*/
/* Core CSS required for Ionic components to work properly */
@import "@ionic/angular/css/core.css";
/* Basic CSS for apps built with Ionic */
@import "@ionic/angular/css/normalize.css";
@import "@ionic/angular/css/structure.css";
@import "@ionic/angular/css/typography.css";
@import "@ionic/angular/css/display.css";
/* Optional CSS utils that can be commented out */
@import "@ionic/angular/css/padding.css";
@import "@ionic/angular/css/float-elements.css";
@import "@ionic/angular/css/text-alignment.css";
@import "@ionic/angular/css/text-transformation.css";
@import "@ionic/angular/css/flex-utils.css";
/**
* Ionic Dark Mode
* -----------------------------------------------------
* For more info, please see:
* https://ionicframework.com/docs/theming/dark-mode
*/
/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import "@ionic/angular/css/palettes/dark.system.css";

View File

@@ -1,26 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Ionic App</title>
<base href="/" />
<meta name="color-scheme" content="light dark" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<link rel="icon" type="image/png" href="assets/icon/favicon.png" />
<!-- add to homescreen for ios -->
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>
<body>
<app-root></app-root>
</body>
</html>

View File

@@ -1,6 +0,0 @@
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
platformBrowserDynamic().bootstrapModule(AppModule)
.catch(err => console.log(err));

View File

@@ -1,55 +0,0 @@
/**
* This file includes polyfills needed by Angular and is loaded before the app.
* You can add your own extra polyfills to this file.
*
* This file is divided into 2 sections:
* 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
* 2. Application imports. Files imported after ZoneJS that should be loaded before your main
* file.
*
* The current setup is for so-called "evergreen" browsers; the last versions of browsers that
* automatically update themselves. This includes recent versions of Safari, Chrome (including
* Opera), Edge on the desktop, and iOS and Chrome on mobile.
*
* Learn more in https://angular.io/guide/browser-support
*/
/***************************************************************************************************
* BROWSER POLYFILLS
*/
/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
* because those flags need to be set before `zone.js` being loaded, and webpack
* will put import in the top of bundle, so user need to create a separate file
* in this directory (for example: zone-flags.ts), and put the following flags
* into that file, and then add the following code before importing zone.js.
* import './zone-flags';
*
* The flags allowed in zone-flags.ts are listed here.
*
* The following flags will work for all browsers.
*
* (window as any).__Zone_disable_requestAnimationFrame = true; // disable patch requestAnimationFrame
* (window as any).__Zone_disable_on_property = true; // disable patch onProperty such as onclick
* (window as any).__zone_symbol__UNPATCHED_EVENTS = ['scroll', 'mousemove']; // disable patch specified eventNames
*
* in IE/Edge developer tools, the addEventListener will also be wrapped by zone.js
* with the following flag, it will bypass `zone.js` patch for IE/Edge
*
* (window as any).__Zone_enable_cross_context_check = true;
*
*/
import './zone-flags';
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js'; // Included with Angular CLI.
/***************************************************************************************************
* APPLICATION IMPORTS
*/

View File

@@ -1,5 +0,0 @@
{
"rewrites": [
{ "source": "/**", "destination": "/index.html" }
]
}

View File

@@ -1,14 +0,0 @@
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/testing';
import { getTestBed } from '@angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '@angular/platform-browser-dynamic/testing';
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting(),
);

View File

@@ -1,2 +0,0 @@
// For information on how to create your own theme, please refer to:
// https://ionicframework.com/docs/theming/

View File

@@ -1,6 +0,0 @@
/**
* Prevents Angular change detection from
* running with certain Web Component callbacks
*/
// eslint-disable-next-line no-underscore-dangle
(window as any).__Zone_disable_customElements = true;

View File

@@ -1,15 +0,0 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}

View File

@@ -1,34 +0,0 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": true,
"noImplicitOverride": true,
"noPropertyAccessFromIndexSignature": true,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2022",
"module": "es2020",
"lib": [
"es2018",
"dom"
],
"skipLibCheck": true,
"useDefineForClassFields": false
},
"angularCompilerOptions": {
"enableI18nLegacyMessageIdFormat": false,
"strictInjectionParameters": true,
"strictInputAccessModifiers": true,
"strictTemplates": true
}
}

View File

@@ -1,18 +0,0 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "./out-tsc/spec",
"types": [
"jasmine"
]
},
"files": [
"src/test.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}