First commit for bicorder-app
This commit is contained in:
Nathan Schneider
26
bicorder-app/.gitignore
vendored
Normal file
26
bicorder-app/.gitignore
vendored
Normal file
@@ -0,0 +1,26 @@
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
lerna-debug.log*
|
||||
|
||||
node_modules
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
|
||||
# Editor directories and files
|
||||
.vscode/*
|
||||
.idea
|
||||
.DS_Store
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
||||
# PWA
|
||||
dev-dist
|
||||
150
bicorder-app/README.md
Normal file
150
bicorder-app/README.md
Normal file
@@ -0,0 +1,150 @@
|
||||
# Protocol Bicorder - Web App
|
||||
|
||||
A Svelte Progressive Web App (PWA) for carrying out protocol diagnostics as defined in `../bicorder.json`.
|
||||
|
||||
## Features
|
||||
|
||||
- **Single-page diagnostic tool** with ASCII-styled interface
|
||||
- **Touch-friendly controls** optimized for mobile devices
|
||||
- **Shortform toggle** - switch between full (23 gradients) and short (10 gradients) versions
|
||||
- **Tooltips** on all gradient terms (long-press on mobile, hover on desktop)
|
||||
- **Editable metadata** fields with auto-generated timestamps
|
||||
- **Auto-calculated analysis** section (hardness/softness, polarized/centrist)
|
||||
- **Citation support** for each gradient value
|
||||
- **Local storage** - your progress is automatically saved
|
||||
- **Export to JSON** - download your completed diagnostic
|
||||
- **Share functionality** - use Web Share API on supported devices
|
||||
- **Public upload** - submit readings directly to the public repository
|
||||
- **Full PWA** - installable, works offline
|
||||
- **Privacy-focused** - no telemetry, no external fonts, works completely offline
|
||||
|
||||
## Development
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
npm install
|
||||
|
||||
# Start development server (http://localhost:5173)
|
||||
npm run dev
|
||||
|
||||
# Build for production
|
||||
npm run build
|
||||
|
||||
# Preview production build (http://localhost:4173)
|
||||
npm run preview
|
||||
```
|
||||
|
||||
**Important:** The app must be served via HTTP/HTTPS (not opened directly as `file://`). Modern browsers block ES modules and service workers from the file protocol for security reasons. Always use `npm run preview` or deploy to a web server to test the built app.
|
||||
|
||||
## Build Process
|
||||
|
||||
The app reads `../bicorder.json` at build time and constructs the interface based on its structure. To update the diagnostic:
|
||||
|
||||
1. Edit `../bicorder.json`
|
||||
2. Run `npm run update` (or `npm run build`)
|
||||
3. The app will automatically reflect the new structure
|
||||
|
||||
Alternatively, run `./update-diagnostic.sh` for a friendlier update experience.
|
||||
|
||||
## Deployment
|
||||
|
||||
The built app is in the `dist/` folder. You can deploy it to any static hosting service:
|
||||
|
||||
- **GitHub Pages**: Push the dist folder
|
||||
- **Netlify**: Connect your repo and set build command to `npm run build`
|
||||
- **Vercel**: Same as Netlify
|
||||
- **Static server**: Copy the dist folder contents to your web server
|
||||
|
||||
### Quick local server options
|
||||
|
||||
If you don't have Node.js available, you can serve the `dist/` folder with:
|
||||
|
||||
```bash
|
||||
# Use the provided script (tries Python/PHP automatically)
|
||||
./serve-local.sh
|
||||
|
||||
# Or manually:
|
||||
# Python 3
|
||||
python3 -m http.server 8000 --directory dist
|
||||
|
||||
# PHP
|
||||
php -S localhost:8000 -t dist
|
||||
|
||||
# Any other static file server
|
||||
```
|
||||
|
||||
Then open http://localhost:8000 in your browser.
|
||||
|
||||
## Usage
|
||||
|
||||
### Filling out the diagnostic
|
||||
|
||||
1. Fill in the metadata fields (Protocol, Analyst, Standpoint)
|
||||
2. **Toggle shortform mode** (optional) to show only the 10 core gradients
|
||||
3. For each gradient, tap/click the numbered buttons (1-9) to set values
|
||||
- 1 = strongly toward the left term
|
||||
- 5 = balanced/neutral
|
||||
- 9 = strongly toward the right term
|
||||
4. Optionally add citations for each gradient value
|
||||
5. The Analysis section is automatically calculated based on your inputs
|
||||
|
||||
### Exporting and sharing results
|
||||
|
||||
- **Export JSON**: Downloads the diagnostic as a JSON file
|
||||
- **Share**: Uses your device's share functionality (mobile)
|
||||
- **Upload**: Submit your readings to the public repository
|
||||
|
||||
### Public upload
|
||||
|
||||
When you click **Upload**, your readings will be:
|
||||
- Posted to the public repository: [protocol-bicorder-data](https://git.medlab.host/ntnsndr/protocol-bicorder-data)
|
||||
- Licensed to the public domain (CC0)
|
||||
- Committed with your analyst name and protocol name
|
||||
- Stored in the `readings/` directory with a timestamp
|
||||
|
||||
All uploaded readings are public and available for research and analysis. By uploading, you consent to releasing your diagnostic under a public domain license.
|
||||
|
||||
## Browser Support
|
||||
|
||||
- Modern browsers (Chrome, Firefox, Safari, Edge)
|
||||
- Mobile browsers (iOS Safari, Android Chrome)
|
||||
- PWA installation supported on Android, iOS 16.4+, and desktop browsers
|
||||
|
||||
## Customization
|
||||
|
||||
### Styling
|
||||
|
||||
The app uses CSS custom properties for theming. Edit `src/app.css` to change colors:
|
||||
|
||||
```css
|
||||
--bg-color: #000000; /* Background */
|
||||
--fg-color: #00ff00; /* Foreground/text */
|
||||
--border-color: #00ff00; /* Borders */
|
||||
--hover-color: #00cc00; /* Hover states */
|
||||
```
|
||||
|
||||
### Icons
|
||||
|
||||
Replace `public/icon.svg` with your own icon. For better PWA support, also generate PNG versions:
|
||||
|
||||
```bash
|
||||
# Example using ImageMagick (if available)
|
||||
convert -background none -resize 192x192 public/icon.svg public/icon-192.png
|
||||
convert -background none -resize 512x512 public/icon.svg public/icon-512.png
|
||||
```
|
||||
|
||||
Then update `vite.config.ts` to reference the PNG icons in the manifest.
|
||||
|
||||
## Architecture
|
||||
|
||||
- **Framework**: Svelte 4 with TypeScript
|
||||
- **Build tool**: Vite 5
|
||||
- **PWA**: vite-plugin-pwa with Workbox
|
||||
- **State management**: Svelte stores + localStorage
|
||||
- **Data source**: bicorder.json (build-time integration)
|
||||
|
||||
## Authorship and licensing
|
||||
|
||||
Initiated by [Nathan Schneider](https://nathanschneider.info) and available for use under the [Hippocratic License](https://firstdonoharm.dev/) (do no harm!). Several AI assistants, local and remote, were utilized in developing this tool.
|
||||
|
||||
[](https://firstdonoharm.dev/version/3/0/core.html)
|
||||
16
bicorder-app/index.html
Normal file
16
bicorder-app/index.html
Normal file
@@ -0,0 +1,16 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
|
||||
<meta name="description" content="A diagnostic tool for the study of protocols" />
|
||||
<meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)" />
|
||||
<meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)" />
|
||||
<title>Protocol Bicorder</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.ts"></script>
|
||||
</body>
|
||||
</html>
|
||||
6590
bicorder-app/package-lock.json
generated
Normal file
6590
bicorder-app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
25
bicorder-app/package.json
Normal file
25
bicorder-app/package.json
Normal file
@@ -0,0 +1,25 @@
|
||||
{
|
||||
"name": "bicorder-web",
|
||||
"private": true,
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"update": "npm run build && echo '\nApp updated! Run npm run preview to test locally.'"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tsconfig/svelte": "^5.0.0",
|
||||
"svelte": "^4.2.0",
|
||||
"svelte-check": "^3.6.0",
|
||||
"tslib": "^2.6.0",
|
||||
"typescript": "^5.2.0",
|
||||
"vite": "^5.0.0",
|
||||
"vite-plugin-pwa": "^0.17.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"workbox-window": "^7.0.0"
|
||||
}
|
||||
}
|
||||
1
bicorder-app/public/favicon.ico
Normal file
1
bicorder-app/public/favicon.ico
Normal file
@@ -0,0 +1 @@
|
||||
placeholder
|
||||
11
bicorder-app/public/icon.svg
Normal file
11
bicorder-app/public/icon.svg
Normal file
@@ -0,0 +1,11 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
|
||||
<rect width="100" height="100" fill="#ffffff"/>
|
||||
<text x="50" y="35" font-family="monospace" font-size="16" fill="#000000" text-anchor="middle">
|
||||
Protocol
|
||||
</text>
|
||||
<text x="50" y="55" font-family="monospace" font-size="20" fill="#000000" text-anchor="middle" font-weight="bold">
|
||||
BICORDER
|
||||
</text>
|
||||
<rect x="20" y="65" width="60" height="10" fill="none" stroke="#000000" stroke-width="2"/>
|
||||
<rect x="22" y="67" width="20" height="6" fill="#000000"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 535 B |
@@ -0,0 +1,250 @@
|
||||
{
|
||||
"name": "Protocol Bicorder",
|
||||
"schema": "bicorder.schema.json",
|
||||
"version": "1.1.0",
|
||||
"description": "A diagnostic tool for the study of protocols",
|
||||
"author": "Nathan Schneider",
|
||||
"date_modified": "2025-11-21",
|
||||
"metadata": {
|
||||
"protocol": "IB Learner Profile",
|
||||
"analyst": "Kids at the school",
|
||||
"standpoint": "Students at the school",
|
||||
"timestamp": "2025-11-24T03:16:26.468Z"
|
||||
},
|
||||
"diagnostic": [
|
||||
{
|
||||
"set_name": "Design",
|
||||
"set_description": "How the protocol is created and remembered",
|
||||
"gradients": [
|
||||
{
|
||||
"term_left": "explicit",
|
||||
"term_left_description": "The design is stated explicitly somewhere that is accessible to participants",
|
||||
"term_right": "implicit",
|
||||
"term_right_description": "The design is not stated explicitly but is learned by participants in another way",
|
||||
"value": 2,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "precise",
|
||||
"term_left_description": "The design is specified with a high level of precision that eliminates ambiguity in implementation",
|
||||
"term_right": "interpretive",
|
||||
"term_right_description": "The design is ambiguous, allowing participants a wide range of interpretation",
|
||||
"value": 4,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "institutional",
|
||||
"term_left_description": "Design occurs through processes that involve powerful institutions and widespread recognition as normative",
|
||||
"term_right": "vernacular",
|
||||
"term_right_description": "Design occurs through evolving, peer-to-peer community interactions in order to suit participant-defined goals",
|
||||
"value": 1,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "documenting",
|
||||
"term_left_description": "The primary purpose is to document or validate activity that is occurring",
|
||||
"term_right": "enabling",
|
||||
"term_right_description": "The primary purpose is to enable activity that might not happen otherwise",
|
||||
"value": 5,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "static",
|
||||
"term_left_description": "Designed to be as fixed and unchanging as possible",
|
||||
"term_right": "malleable",
|
||||
"term_right_description": "Designed to be changed by participants according to evolving needs",
|
||||
"value": 1,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "technical",
|
||||
"term_left_description": "Primarily concerned with interactions among technologies",
|
||||
"term_right": "social",
|
||||
"term_right_description": "Primarily concerned with interactions among people or groups",
|
||||
"value": 9,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "universal",
|
||||
"term_left_description": "Addressed to a global audience",
|
||||
"term_right": "particular",
|
||||
"term_right_description": "Addressed to a specific community",
|
||||
"value": 5,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "durable",
|
||||
"term_left_description": "Designed to be persistently available",
|
||||
"term_right": "ephemeral",
|
||||
"term_right_description": "Designed to vanish when no longer needed",
|
||||
"value": 1,
|
||||
"notes": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"set_name": "Entanglement",
|
||||
"set_description": "How the protocol relates with participant agents",
|
||||
"gradients": [
|
||||
{
|
||||
"term_left": "macro",
|
||||
"term_left_description": "Operates at large scales involving many participants or broad scope",
|
||||
"term_right": "micro",
|
||||
"term_right_description": "Operates at small scales with few participants or narrow scope",
|
||||
"value": 3,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "sovereign",
|
||||
"term_left_description": "A distinctive operating logic, not subject to any other entity",
|
||||
"term_right": "subsidiary",
|
||||
"term_right_description": "An operating logic under the control of a particular entity",
|
||||
"value": 8,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "self-enforcing",
|
||||
"term_left_description": "Rules are automatically enforced through its own mechanisms",
|
||||
"term_right": "enforced",
|
||||
"term_right_description": "Rules require external enforcement by authorities or institutions",
|
||||
"value": 7,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "abstract",
|
||||
"term_left_description": "Participants learn the protocol by studying it intellectually",
|
||||
"term_right": "embodied",
|
||||
"term_right_description": "Participants learn the protocol by physically practicing it",
|
||||
"value": 2,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "obligatory",
|
||||
"term_left_description": "Participation is compulsory for a certain class of agents",
|
||||
"term_right": "voluntary",
|
||||
"term_right_description": "Participation in the protocol is optional and not coerced",
|
||||
"value": 2,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "flocking",
|
||||
"term_left_description": "Coordination occurs through centralized direction or direct mimicry",
|
||||
"term_right": "swarming",
|
||||
"term_right_description": "Coordination occurs through distributed interactions without central direction",
|
||||
"value": 8,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "defensible",
|
||||
"term_left_description": "Strong boundaries and protections against external influence",
|
||||
"term_right": "exposed",
|
||||
"term_right_description": "Weak boundaries and vulnerable to external influence",
|
||||
"value": null,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "exclusive",
|
||||
"term_left_description": "Excludes the use of other protocols that might be available to adopt",
|
||||
"term_right": "non-exclusive",
|
||||
"term_right_description": "Does not exclude the use of any other protocols",
|
||||
"value": 8,
|
||||
"notes": null
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"set_name": "Experience",
|
||||
"set_description": "How the protocol is perceived in the context of its implementation",
|
||||
"gradients": [
|
||||
{
|
||||
"term_left": "sufficient",
|
||||
"term_left_description": "Adequately meets the needs and goals of participants",
|
||||
"term_right": "insufficient",
|
||||
"term_right_description": "Does not, on its own, adequately meet the needs and goals of participants",
|
||||
"value": 8,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "crystallized",
|
||||
"term_left_description": "Content and meaning are settled and widely agreed upon",
|
||||
"term_right": "contested",
|
||||
"term_right_description": "Content and meaning are disputed or under debate",
|
||||
"value": 1,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "trust-evading",
|
||||
"term_left_description": "Minimizes the need for trust among participants",
|
||||
"term_right": "trust-inducing",
|
||||
"term_right_description": "Relies on or cultivates trust among participants",
|
||||
"value": 9,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "predictable",
|
||||
"term_left_description": "Produces expected and consistent outcomes",
|
||||
"term_right": "emergent",
|
||||
"term_right_description": "Produces unexpected or novel outcomes",
|
||||
"value": 9,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "exclusion",
|
||||
"term_left_description": "The protocol creates barriers or excludes certain participants",
|
||||
"term_right": "inclusion",
|
||||
"term_right_description": "The protocol reduces barriers and includes diverse participants",
|
||||
"value": 9,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "Kafka",
|
||||
"term_left_description": "Fosters experiences of absurd complexity, alienation, and powerlessness",
|
||||
"term_right": "Whitehead",
|
||||
"term_right_description": "Enables participants to carry out desired activities with less work or thought",
|
||||
"value": 6,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "dead",
|
||||
"term_left_description": "Not actively utilized by relevant participants",
|
||||
"term_right": "alive",
|
||||
"term_right_description": "Actively utilized by relevant participants",
|
||||
"value": 8,
|
||||
"notes": null
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"analysis": [
|
||||
{
|
||||
"term_left": "hardness",
|
||||
"term_left_description": "The protocol tends toward properties characterized by hardness",
|
||||
"term_right": "softness",
|
||||
"term_right_description": "The protocol tends toward properties characterized by softness",
|
||||
"instructions": "Take all the 'value' fields in the gradients above and determine a mean. Round it to the nearest integer. That is the 'value' here.",
|
||||
"automated": true,
|
||||
"value": 5,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "polarized",
|
||||
"term_left_description": "The analyst tended toward more extreme high or low readings",
|
||||
"term_right": "centrist",
|
||||
"term_right_description": "The analyst tended toward readings at the middle of the gradients",
|
||||
"instructions": "Take all the 'value' fields in the gradients above. Assess their degree of polarization. For instance, if all the values are either 1 or 9, the output would be 1, and if all of them are 5, the output would be 9.",
|
||||
"automated": true,
|
||||
"value": 3,
|
||||
"notes": null
|
||||
},
|
||||
{
|
||||
"term_left": "not useful",
|
||||
"term_left_description": "The bicorder was not useful or relevant for analyzing this protocol",
|
||||
"term_right": "very useful",
|
||||
"term_right_description": "The bicorder was very useful and relevant for analyzing this protocol",
|
||||
"instructions": "Evaluate the usefulness of this bicorder as a tool for analyzing this protocol, considering whether the gradient terms seemed revealing or irrelevant.",
|
||||
"automated": false,
|
||||
"value": 7,
|
||||
"notes": null
|
||||
}
|
||||
]
|
||||
}
|
||||
25
bicorder-app/serve-local.sh
Executable file
25
bicorder-app/serve-local.sh
Executable file
@@ -0,0 +1,25 @@
|
||||
#!/bin/bash
|
||||
# Simple script to serve the built app locally
|
||||
|
||||
if [ ! -d "dist" ]; then
|
||||
echo "Error: dist folder not found. Run 'npm run build' first."
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "Starting local server..."
|
||||
echo "Open your browser to: http://localhost:8000"
|
||||
echo "Press Ctrl+C to stop the server"
|
||||
echo ""
|
||||
|
||||
# Try different server options in order of preference
|
||||
if command -v python3 &> /dev/null; then
|
||||
python3 -m http.server 8000 --directory dist
|
||||
elif command -v python &> /dev/null; then
|
||||
cd dist && python -m SimpleHTTPServer 8000
|
||||
elif command -v php &> /dev/null; then
|
||||
php -S localhost:8000 -t dist
|
||||
else
|
||||
echo "Error: No suitable HTTP server found."
|
||||
echo "Please install Python 3, Python 2, or PHP, or use 'npm run preview'"
|
||||
exit 1
|
||||
fi
|
||||
227
bicorder-app/src/App.svelte
Normal file
227
bicorder-app/src/App.svelte
Normal file
@@ -0,0 +1,227 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
import type { BicorderState, Gradient, AnalysisGradient } from './types';
|
||||
import GradientSlider from './components/GradientSlider.svelte';
|
||||
import MetadataFields from './components/MetadataFields.svelte';
|
||||
import AnalysisDisplay from './components/AnalysisDisplay.svelte';
|
||||
import ExportControls from './components/ExportControls.svelte';
|
||||
|
||||
// Load bicorder data from build-time constant
|
||||
let data: BicorderState = JSON.parse(JSON.stringify(__BICORDER_DATA__));
|
||||
|
||||
// Initialize timestamp if not set
|
||||
if (!data.metadata.timestamp) {
|
||||
data.metadata.timestamp = new Date().toISOString();
|
||||
}
|
||||
|
||||
// Load saved state from localStorage
|
||||
onMount(() => {
|
||||
const saved = localStorage.getItem('bicorder-state');
|
||||
if (saved) {
|
||||
try {
|
||||
const savedData = JSON.parse(saved);
|
||||
// Preserve the structure but update values
|
||||
data.metadata = { ...data.metadata, ...savedData.metadata };
|
||||
|
||||
// Update gradient values
|
||||
data.diagnostic.forEach((set, setIdx) => {
|
||||
set.gradients.forEach((gradient, gradIdx) => {
|
||||
const savedGradient = savedData.diagnostic?.[setIdx]?.gradients?.[gradIdx];
|
||||
if (savedGradient) {
|
||||
gradient.value = savedGradient.value;
|
||||
gradient.notes = savedGradient.notes;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Update analysis values
|
||||
data.analysis.forEach((item, idx) => {
|
||||
const savedItem = savedData.analysis?.[idx];
|
||||
if (savedItem) {
|
||||
item.notes = savedItem.notes;
|
||||
}
|
||||
});
|
||||
} catch (e) {
|
||||
console.error('Failed to load saved state:', e);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Save state whenever it changes
|
||||
$: {
|
||||
if (typeof window !== 'undefined') {
|
||||
localStorage.setItem('bicorder-state', JSON.stringify(data));
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-calculate analysis values
|
||||
function calculateHardness(): number | null {
|
||||
const values = data.diagnostic
|
||||
.flatMap(set => set.gradients)
|
||||
.filter(g => !data.metadata.shortform || g.shortform)
|
||||
.map(g => g.value)
|
||||
.filter((v): v is number => v !== null);
|
||||
|
||||
if (values.length === 0) return null;
|
||||
|
||||
const mean = values.reduce((sum, v) => sum + v, 0) / values.length;
|
||||
return Math.round(mean);
|
||||
}
|
||||
|
||||
function calculatePolarization(): number | null {
|
||||
const values = data.diagnostic
|
||||
.flatMap(set => set.gradients)
|
||||
.filter(g => !data.metadata.shortform || g.shortform)
|
||||
.map(g => g.value)
|
||||
.filter((v): v is number => v !== null);
|
||||
|
||||
if (values.length === 0) return null;
|
||||
|
||||
// Calculate how far values are from center (5)
|
||||
const deviations = values.map(v => Math.abs(v - 5));
|
||||
const avgDeviation = deviations.reduce((sum, d) => sum + d, 0) / deviations.length;
|
||||
|
||||
// Map deviation to polarized (1) vs centrist (9) scale
|
||||
// Max deviation is 4 (from 1 or 9), min is 0 (at 5)
|
||||
// Higher deviation = more polarized = lower value
|
||||
const polarizationScore = 9 - (avgDeviation / 4) * 8;
|
||||
return Math.round(polarizationScore);
|
||||
}
|
||||
|
||||
// Update automated analysis values reactively
|
||||
$: {
|
||||
data.analysis.forEach((item, index) => {
|
||||
if (item.automated) {
|
||||
if (index === 0) {
|
||||
data.analysis[0].value = calculateHardness();
|
||||
} else if (index === 1) {
|
||||
data.analysis[1].value = calculatePolarization();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function handleMetadataUpdate(event: CustomEvent) {
|
||||
data.metadata = { ...data.metadata, ...event.detail };
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
if (confirm('Reset all values? This cannot be undone.')) {
|
||||
localStorage.removeItem('bicorder-state');
|
||||
location.reload();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<div class="header">
|
||||
<div class="title">Protocol</div>
|
||||
<div class="title">BICORDER</div>
|
||||
</div>
|
||||
|
||||
<MetadataFields
|
||||
metadata={data.metadata}
|
||||
on:update={handleMetadataUpdate}
|
||||
/>
|
||||
|
||||
{#each data.diagnostic as diagnosticSet, setIndex}
|
||||
<section class="diagnostic-set">
|
||||
<div class="set-header">{diagnosticSet.set_name.toUpperCase()}</div>
|
||||
<div class="set-description">{diagnosticSet.set_description}</div>
|
||||
|
||||
{#each diagnosticSet.gradients as gradient, gradientIndex}
|
||||
{#if !data.metadata.shortform || gradient.shortform}
|
||||
<GradientSlider
|
||||
{gradient}
|
||||
on:change={(e) => {
|
||||
data.diagnostic[setIndex].gradients[gradientIndex].value = e.detail ?? null;
|
||||
data = data;
|
||||
}}
|
||||
on:notes={(e) => {
|
||||
data.diagnostic[setIndex].gradients[gradientIndex].notes = e.detail;
|
||||
data = data;
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</section>
|
||||
{/each}
|
||||
|
||||
<section class="analysis-section">
|
||||
<div class="set-header">ANALYSIS</div>
|
||||
|
||||
{#each data.analysis as analysisItem, index}
|
||||
<AnalysisDisplay
|
||||
gradient={analysisItem}
|
||||
on:change={(e) => {
|
||||
if (!analysisItem.automated) {
|
||||
data.analysis[index].value = e.detail ?? null;
|
||||
data = data;
|
||||
}
|
||||
}}
|
||||
on:notes={(e) => {
|
||||
data.analysis[index].notes = e.detail;
|
||||
data = data;
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
</section>
|
||||
|
||||
<ExportControls {data} on:reset={handleReset} />
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.header {
|
||||
text-align: center;
|
||||
margin-bottom: 2rem;
|
||||
border-bottom: 2px solid var(--border-color);
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.2rem;
|
||||
}
|
||||
|
||||
.diagnostic-set, .analysis-section {
|
||||
margin: 2rem 0;
|
||||
padding: 1rem 0;
|
||||
border-top: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.set-header {
|
||||
text-align: center;
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
letter-spacing: 0.2rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.set-description {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1.5rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
main {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.set-header {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
111
bicorder-app/src/app.css
Normal file
111
bicorder-app/src/app.css
Normal file
@@ -0,0 +1,111 @@
|
||||
:root {
|
||||
color-scheme: light dark;
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
/* Light mode (default) */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
--bg-color: #ffffff;
|
||||
--fg-color: #000000;
|
||||
--border-color: #000000;
|
||||
--hover-color: #333333;
|
||||
--disabled-color: #cccccc;
|
||||
--input-bg: #f5f5f5;
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark mode */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--bg-color: #000000;
|
||||
--fg-color: #ffffff;
|
||||
--border-color: #ffffff;
|
||||
--hover-color: #cccccc;
|
||||
--disabled-color: #666666;
|
||||
--input-bg: #1a1a1a;
|
||||
}
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
min-height: 100vh;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
input, textarea {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 1rem;
|
||||
background-color: var(--input-bg);
|
||||
color: var(--fg-color);
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.5rem;
|
||||
width: 100%;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input:focus, textarea:focus {
|
||||
border-color: var(--hover-color);
|
||||
box-shadow: 0 0 3px var(--hover-color);
|
||||
}
|
||||
|
||||
button {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 1rem;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
touch-action: manipulation;
|
||||
user-select: none;
|
||||
min-height: 44px;
|
||||
min-width: 44px;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled), button:active:not(:disabled) {
|
||||
background-color: var(--fg-color);
|
||||
color: var(--bg-color);
|
||||
border-color: var(--fg-color);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
border-color: var(--disabled-color);
|
||||
color: var(--disabled-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
button:disabled:hover {
|
||||
background-color: var(--bg-color);
|
||||
color: var(--disabled-color);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input, textarea, button {
|
||||
font-size: 16px; /* Prevent iOS zoom on focus */
|
||||
}
|
||||
}
|
||||
368
bicorder-app/src/components/AnalysisDisplay.svelte
Normal file
368
bicorder-app/src/components/AnalysisDisplay.svelte
Normal file
@@ -0,0 +1,368 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { AnalysisGradient } from '../types';
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
|
||||
export let gradient: AnalysisGradient;
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
change: number | null;
|
||||
notes: string;
|
||||
}>();
|
||||
|
||||
let showNotes = false;
|
||||
let notesText = gradient.notes || '';
|
||||
|
||||
function handleNotApplicable() {
|
||||
dispatch('change', null);
|
||||
}
|
||||
|
||||
function handleNotesSave() {
|
||||
dispatch('notes', notesText);
|
||||
showNotes = false;
|
||||
}
|
||||
|
||||
function handleScaleClick(event: MouseEvent) {
|
||||
if (gradient.automated) return;
|
||||
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
const rect = target.getBoundingClientRect();
|
||||
const x = event.clientX - rect.left;
|
||||
const width = rect.width;
|
||||
|
||||
// Account for button padding to get actual text area
|
||||
const styles = window.getComputedStyle(target);
|
||||
const paddingLeft = parseFloat(styles.paddingLeft);
|
||||
const paddingRight = parseFloat(styles.paddingRight);
|
||||
|
||||
const contentWidth = width - paddingLeft - paddingRight;
|
||||
const xInContent = x - paddingLeft;
|
||||
|
||||
// Clamp to content area and get ratio
|
||||
const ratio = Math.max(0, Math.min(1, xInContent / contentWidth));
|
||||
|
||||
// Map to 1-9 with proper centering on each character position
|
||||
const value = Math.min(9, Math.max(1, Math.floor(ratio * 9) + 1));
|
||||
|
||||
dispatch('change', value);
|
||||
}
|
||||
|
||||
function handleScaleTouch(event: TouchEvent) {
|
||||
if (gradient.automated) return;
|
||||
|
||||
event.preventDefault();
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
const rect = target.getBoundingClientRect();
|
||||
const touch = event.touches[0];
|
||||
const x = touch.clientX - rect.left;
|
||||
const width = rect.width;
|
||||
|
||||
// Account for button padding to get actual text area
|
||||
const styles = window.getComputedStyle(target);
|
||||
const paddingLeft = parseFloat(styles.paddingLeft);
|
||||
const paddingRight = parseFloat(styles.paddingRight);
|
||||
|
||||
const contentWidth = width - paddingLeft - paddingRight;
|
||||
const xInContent = x - paddingLeft;
|
||||
|
||||
// Clamp to content area and get ratio
|
||||
const ratio = Math.max(0, Math.min(1, xInContent / contentWidth));
|
||||
|
||||
// Map to 1-9 with proper centering on each character position
|
||||
const value = Math.min(9, Math.max(1, Math.floor(ratio * 9) + 1));
|
||||
|
||||
dispatch('change', value);
|
||||
}
|
||||
|
||||
function renderBar(value: number | null): string {
|
||||
// Fixed scale with 9 positions using ||||#||||
|
||||
if (value === null) {
|
||||
return '||||·||||';
|
||||
}
|
||||
// Value is 1-9, position the # marker at the right spot
|
||||
const positions = [
|
||||
'#||||||||',
|
||||
'|#|||||||',
|
||||
'||#||||||',
|
||||
'|||#|||||',
|
||||
'||||#||||',
|
||||
'|||||#|||',
|
||||
'||||||#||',
|
||||
'|||||||#|',
|
||||
'||||||||#'
|
||||
];
|
||||
return positions[value - 1];
|
||||
}
|
||||
|
||||
$: barDisplay = renderBar(gradient.value);
|
||||
</script>
|
||||
|
||||
<div class="analysis-gradient">
|
||||
<div class="gradient-row">
|
||||
<div class="term left">
|
||||
<Tooltip text={gradient.term_left_description}>
|
||||
{gradient.term_left}
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="bar-container">
|
||||
<button
|
||||
class="bar"
|
||||
class:interactive={!gradient.automated}
|
||||
class:automated={gradient.automated}
|
||||
on:click={handleScaleClick}
|
||||
on:touchstart={handleScaleTouch}
|
||||
role={gradient.automated ? 'img' : 'slider'}
|
||||
aria-label={gradient.automated ? `Analysis showing value ${gradient.value || 'not calculated'}` : `Gradient scale between ${gradient.term_left} and ${gradient.term_right}`}
|
||||
aria-valuemin={gradient.automated ? undefined : 1}
|
||||
aria-valuemax={gradient.automated ? undefined : 9}
|
||||
aria-valuenow={gradient.automated ? undefined : gradient.value}
|
||||
title={gradient.automated ? 'Auto-calculated' : 'Click or tap on the scale to set value'}
|
||||
disabled={gradient.automated}
|
||||
>
|
||||
{barDisplay}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="term right">
|
||||
<Tooltip text={gradient.term_right_description}>
|
||||
{gradient.term_right}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="value-display">
|
||||
Value: {gradient.value !== null ? gradient.value : ''}
|
||||
{#if gradient.automated}
|
||||
<span class="auto-label">(auto-calculated)</span>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
{#if !gradient.automated}
|
||||
<div class="button-row">
|
||||
<button
|
||||
class="na-btn"
|
||||
class:active={gradient.value === null}
|
||||
on:click={handleNotApplicable}
|
||||
aria-label="Mark as not applicable"
|
||||
title="Mark this gradient as not applicable"
|
||||
>
|
||||
N/A
|
||||
</button>
|
||||
<button
|
||||
class="notes-btn"
|
||||
class:has-notes={gradient.notes}
|
||||
on:click={() => showNotes = !showNotes}
|
||||
aria-label="Add notes"
|
||||
>
|
||||
{gradient.notes ? '📝' : '➕'} Notes
|
||||
</button>
|
||||
</div>
|
||||
{:else}
|
||||
<button
|
||||
class="notes-btn"
|
||||
class:has-notes={gradient.notes}
|
||||
on:click={() => showNotes = !showNotes}
|
||||
aria-label="Add notes"
|
||||
>
|
||||
{gradient.notes ? '📝' : '➕'} Notes
|
||||
</button>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if showNotes}
|
||||
<div class="notes-editor">
|
||||
<textarea
|
||||
bind:value={notesText}
|
||||
placeholder="Add notes or reference..."
|
||||
rows="2"
|
||||
/>
|
||||
<div class="notes-buttons">
|
||||
<button on:click={handleNotesSave}>Save</button>
|
||||
<button on:click={() => showNotes = false}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.analysis-gradient {
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.gradient-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.term {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.term.left {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.term.right {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bar {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 1.8rem;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
user-select: none;
|
||||
min-width: 240px;
|
||||
text-align: center;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.bar.automated {
|
||||
cursor: default;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.bar.interactive {
|
||||
cursor: pointer;
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.bar.interactive:hover {
|
||||
border-color: var(--hover-color);
|
||||
}
|
||||
|
||||
.bar.interactive:active {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--fg-color);
|
||||
}
|
||||
|
||||
.value-display {
|
||||
text-align: center;
|
||||
margin: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.auto-label {
|
||||
opacity: 0.6;
|
||||
font-size: 0.8rem;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.controls {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.na-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
min-height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.na-btn:hover {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
color: var(--fg-color);
|
||||
border-color: var(--hover-color);
|
||||
}
|
||||
|
||||
.na-btn.active {
|
||||
opacity: 1;
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--fg-color);
|
||||
}
|
||||
|
||||
.notes-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.6;
|
||||
min-height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.notes-btn:hover {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
color: var(--fg-color);
|
||||
border-color: var(--hover-color);
|
||||
}
|
||||
|
||||
.notes-btn.has-notes {
|
||||
opacity: 1;
|
||||
border-color: var(--hover-color);
|
||||
}
|
||||
|
||||
.notes-btn.has-notes:hover {
|
||||
background-color: transparent;
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
.notes-editor {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.notes-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.notes-buttons button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gradient-row {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.term.left {
|
||||
text-align: left;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.term.right {
|
||||
text-align: right;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.bar {
|
||||
font-size: 1.4rem;
|
||||
min-width: 200px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
233
bicorder-app/src/components/ExportControls.svelte
Normal file
233
bicorder-app/src/components/ExportControls.svelte
Normal file
@@ -0,0 +1,233 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { BicorderState } from '../types';
|
||||
|
||||
export let data: BicorderState;
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
reset: void;
|
||||
}>();
|
||||
|
||||
let showUploadDialog = false;
|
||||
let isUploading = false;
|
||||
|
||||
// Gitea configuration
|
||||
const GITEA_TOKEN = 'd495e72e955c00be2de0f1e18183f6a385b6e52c';
|
||||
const GITEA_API_URL = 'https://git.medlab.host/api/v1';
|
||||
const REPO_OWNER = 'ntnsndr';
|
||||
const REPO_NAME = 'protocol-bicorder-data';
|
||||
const REPO_URL = `https://git.medlab.host/${REPO_OWNER}/${REPO_NAME}`;
|
||||
const APP_VERSION = '1.0.0';
|
||||
|
||||
function exportToJSON() {
|
||||
const json = JSON.stringify(data, null, 2);
|
||||
const blob = new Blob([json], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `bicorder-${data.metadata.protocol || 'diagnostic'}-${new Date().toISOString().slice(0, 10)}.json`;
|
||||
document.body.appendChild(a);
|
||||
a.click();
|
||||
document.body.removeChild(a);
|
||||
URL.revokeObjectURL(url);
|
||||
}
|
||||
|
||||
async function shareResults() {
|
||||
const json = JSON.stringify(data, null, 2);
|
||||
const file = new File([json], `bicorder-${data.metadata.protocol || 'diagnostic'}.json`, {
|
||||
type: 'application/json',
|
||||
});
|
||||
|
||||
if (navigator.share && navigator.canShare && navigator.canShare({ files: [file] })) {
|
||||
try {
|
||||
await navigator.share({
|
||||
title: 'Protocol Bicorder Diagnostic',
|
||||
text: `Diagnostic for: ${data.metadata.protocol || 'Protocol'}`,
|
||||
files: [file],
|
||||
});
|
||||
} catch (err) {
|
||||
if ((err as Error).name !== 'AbortError') {
|
||||
console.error('Share failed:', err);
|
||||
alert('Share failed. Try using the Export button instead.');
|
||||
}
|
||||
}
|
||||
} else {
|
||||
alert('Web Share API not supported. Use the Export button to download the file.');
|
||||
}
|
||||
}
|
||||
|
||||
async function uploadReadings() {
|
||||
isUploading = true;
|
||||
|
||||
try {
|
||||
// Generate filename with timestamp
|
||||
const timestamp = new Date().toISOString().replace(/[:.]/g, '-').slice(0, -5) + 'Z';
|
||||
const filename = `bicorder-${timestamp}.json`;
|
||||
const filepath = `readings/${filename}`;
|
||||
|
||||
// Create commit message
|
||||
const protocolName = data.metadata.protocol || 'Unknown Protocol';
|
||||
const analystName = data.metadata.analyst || 'Anonymous';
|
||||
const commitMessage = `Bicorder reading: ${protocolName} by ${analystName} | Source: Protocol Bicorder v${APP_VERSION}`;
|
||||
|
||||
// Prepare the content (base64 encoded)
|
||||
const jsonContent = JSON.stringify(data, null, 2);
|
||||
const base64Content = btoa(unescape(encodeURIComponent(jsonContent)));
|
||||
|
||||
// Upload to Gitea
|
||||
const response = await fetch(
|
||||
`${GITEA_API_URL}/repos/${REPO_OWNER}/${REPO_NAME}/contents/${filepath}`,
|
||||
{
|
||||
method: 'POST',
|
||||
mode: 'cors',
|
||||
headers: {
|
||||
'Authorization': `token ${GITEA_TOKEN}`,
|
||||
'Content-Type': 'application/json',
|
||||
'Accept': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
content: base64Content,
|
||||
message: commitMessage,
|
||||
branch: 'main',
|
||||
}),
|
||||
}
|
||||
);
|
||||
|
||||
if (response.ok) {
|
||||
alert('Successfully uploaded! Your reading is now public.');
|
||||
showUploadDialog = false;
|
||||
} else {
|
||||
const errorData = await response.json();
|
||||
throw new Error(errorData.message || `Upload failed: ${response.statusContents}`);
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Upload error:', err);
|
||||
alert(`Upload error: ${(err as Error).message}`);
|
||||
} finally {
|
||||
isUploading = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleReset() {
|
||||
dispatch('reset');
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="export-controls">
|
||||
<div class="button-group">
|
||||
<button on:click={exportToJSON}>
|
||||
💾 Export JSON
|
||||
</button>
|
||||
|
||||
{#if navigator.share}
|
||||
<button on:click={shareResults}>
|
||||
📤 Share
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
<button on:click={() => showUploadDialog = !showUploadDialog}>
|
||||
📤 Upload
|
||||
</button>
|
||||
|
||||
<button class="reset-btn" on:click={handleReset}>
|
||||
🗑️ Reset All
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{#if showUploadDialog}
|
||||
<div class="webhook-config">
|
||||
<p class="upload-confirmation">
|
||||
Are you sure you are ready to share your readings publicly?
|
||||
</p>
|
||||
<p class="upload-terms">
|
||||
Submitted readings are posted publicly and licensed to the public domain. By proceeding, you agree to these terms.
|
||||
</p>
|
||||
<p class="upload-repo-link">
|
||||
Readings are posted to <a href={REPO_URL} target="_blank" rel="noopener noreferrer">this repository</a>.
|
||||
</p>
|
||||
<div class="webhook-buttons">
|
||||
<button on:click={uploadReadings} disabled={isUploading}>
|
||||
{isUploading ? 'Uploading...' : 'Proceed'}
|
||||
</button>
|
||||
<button on:click={() => showUploadDialog = false} disabled={isUploading}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.export-controls {
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
border-top: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
border-color: #ff0000;
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background-color: #ff0000;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.webhook-config {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.upload-confirmation {
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-terms {
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.7;
|
||||
line-height: 1.4;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-repo-link {
|
||||
font-size: 0.9rem;
|
||||
margin-bottom: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.upload-repo-link a {
|
||||
color: var(--fg-color);
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.upload-repo-link a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.webhook-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.webhook-buttons button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.button-group {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
336
bicorder-app/src/components/GradientSlider.svelte
Normal file
336
bicorder-app/src/components/GradientSlider.svelte
Normal file
@@ -0,0 +1,336 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Gradient } from '../types';
|
||||
import Tooltip from './Tooltip.svelte';
|
||||
|
||||
export let gradient: Gradient;
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
change: number;
|
||||
notes: string;
|
||||
}>();
|
||||
|
||||
let showNotes = false;
|
||||
let notesText = gradient.notes || '';
|
||||
|
||||
function handleNotApplicable() {
|
||||
dispatch('change', null);
|
||||
}
|
||||
|
||||
function handleNotesSave() {
|
||||
dispatch('notes', notesText);
|
||||
showNotes = false;
|
||||
}
|
||||
|
||||
function handleScaleClick(event: MouseEvent) {
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
const rect = target.getBoundingClientRect();
|
||||
const x = event.clientX - rect.left;
|
||||
const width = rect.width;
|
||||
|
||||
// Account for button padding to get actual text area
|
||||
const styles = window.getComputedStyle(target);
|
||||
const paddingLeft = parseFloat(styles.paddingLeft);
|
||||
const paddingRight = parseFloat(styles.paddingRight);
|
||||
|
||||
const contentWidth = width - paddingLeft - paddingRight;
|
||||
const xInContent = x - paddingLeft;
|
||||
|
||||
// Clamp to content area and get ratio
|
||||
const ratio = Math.max(0, Math.min(1, xInContent / contentWidth));
|
||||
|
||||
// Map to 1-9 with proper centering on each character position
|
||||
const value = Math.min(9, Math.max(1, Math.floor(ratio * 9) + 1));
|
||||
|
||||
dispatch('change', value);
|
||||
}
|
||||
|
||||
function handleScaleTouch(event: TouchEvent) {
|
||||
event.preventDefault();
|
||||
const target = event.currentTarget as HTMLElement;
|
||||
const rect = target.getBoundingClientRect();
|
||||
const touch = event.touches[0];
|
||||
const x = touch.clientX - rect.left;
|
||||
const width = rect.width;
|
||||
|
||||
// Account for button padding to get actual text area
|
||||
const styles = window.getComputedStyle(target);
|
||||
const paddingLeft = parseFloat(styles.paddingLeft);
|
||||
const paddingRight = parseFloat(styles.paddingRight);
|
||||
|
||||
const contentWidth = width - paddingLeft - paddingRight;
|
||||
const xInContent = x - paddingLeft;
|
||||
|
||||
// Clamp to content area and get ratio
|
||||
const ratio = Math.max(0, Math.min(1, xInContent / contentWidth));
|
||||
|
||||
// Map to 1-9 with proper centering on each character position
|
||||
const value = Math.min(9, Math.max(1, Math.floor(ratio * 9) + 1));
|
||||
|
||||
dispatch('change', value);
|
||||
}
|
||||
|
||||
function renderBar(value: number | null): string {
|
||||
// Fixed scale with 9 positions using ||||#||||
|
||||
if (value === null) {
|
||||
return '||||·||||';
|
||||
}
|
||||
// Value is 1-9, position the # marker at the right spot
|
||||
const positions = [
|
||||
'#||||||||',
|
||||
'|#|||||||',
|
||||
'||#||||||',
|
||||
'|||#|||||',
|
||||
'||||#||||',
|
||||
'|||||#|||',
|
||||
'||||||#||',
|
||||
'|||||||#|',
|
||||
'||||||||#'
|
||||
];
|
||||
return positions[value - 1];
|
||||
}
|
||||
|
||||
$: barDisplay = renderBar(gradient.value);
|
||||
</script>
|
||||
|
||||
<div class="gradient-container">
|
||||
<div class="gradient-row">
|
||||
<div class="term left">
|
||||
<Tooltip text={gradient.term_left_description}>
|
||||
{gradient.term_left}
|
||||
</Tooltip>
|
||||
</div>
|
||||
|
||||
<div class="bar-container">
|
||||
<button
|
||||
class="bar"
|
||||
on:click={handleScaleClick}
|
||||
on:touchstart={handleScaleTouch}
|
||||
role="slider"
|
||||
aria-label="Gradient scale between {gradient.term_left} and {gradient.term_right}"
|
||||
aria-valuemin="1"
|
||||
aria-valuemax="9"
|
||||
aria-valuenow={gradient.value}
|
||||
title="Click or tap on the scale to set value"
|
||||
>
|
||||
{barDisplay}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="term right">
|
||||
<Tooltip text={gradient.term_right_description}>
|
||||
{gradient.term_right}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="value-display">
|
||||
Value: {gradient.value !== null ? gradient.value : ''}
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<div class="button-row">
|
||||
<button
|
||||
class="na-btn"
|
||||
class:active={gradient.value === null}
|
||||
on:click={handleNotApplicable}
|
||||
aria-label="Mark as not applicable"
|
||||
title="Mark this gradient as not applicable"
|
||||
>
|
||||
N/A
|
||||
</button>
|
||||
<button
|
||||
class="notes-btn"
|
||||
class:has-notes={gradient.notes}
|
||||
on:click={() => showNotes = !showNotes}
|
||||
aria-label="Add notes"
|
||||
>
|
||||
{gradient.notes ? '📝' : '➕'} Notes
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if showNotes}
|
||||
<div class="notes-editor">
|
||||
<textarea
|
||||
bind:value={notesText}
|
||||
placeholder="Add notes or reference..."
|
||||
rows="2"
|
||||
/>
|
||||
<div class="notes-buttons">
|
||||
<button on:click={handleNotesSave}>Save</button>
|
||||
<button on:click={() => showNotes = false}>Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.gradient-container {
|
||||
margin: 1rem 0;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.gradient-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.term {
|
||||
text-align: center;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.term.left {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.term.right {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.bar {
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
font-size: 1.8rem;
|
||||
white-space: nowrap;
|
||||
letter-spacing: 0.2rem;
|
||||
padding: 0.5rem 1rem;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
min-width: 240px;
|
||||
text-align: center;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
border: 2px solid var(--border-color);
|
||||
transition: border-color 0.2s;
|
||||
}
|
||||
|
||||
.bar:hover {
|
||||
border-color: var(--hover-color);
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
.bar:active {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--fg-color);
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
.value-display {
|
||||
text-align: center;
|
||||
margin: 0.5rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-top: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.na-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.6;
|
||||
flex-shrink: 0;
|
||||
min-height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.na-btn:hover {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
color: var(--fg-color);
|
||||
border-color: var(--hover-color);
|
||||
}
|
||||
|
||||
.na-btn.active {
|
||||
opacity: 1;
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--fg-color);
|
||||
}
|
||||
|
||||
.notes-btn {
|
||||
padding: 0.25rem 0.75rem;
|
||||
font-size: 0.85rem;
|
||||
opacity: 0.6;
|
||||
min-height: auto;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.notes-btn:hover {
|
||||
opacity: 1;
|
||||
background-color: transparent;
|
||||
color: var(--fg-color);
|
||||
border-color: var(--hover-color);
|
||||
}
|
||||
|
||||
.notes-btn.has-notes {
|
||||
opacity: 1;
|
||||
border-color: var(--hover-color);
|
||||
}
|
||||
|
||||
.notes-btn.has-notes:hover {
|
||||
background-color: transparent;
|
||||
color: var(--fg-color);
|
||||
}
|
||||
|
||||
.notes-editor {
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.notes-buttons {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.notes-buttons button {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.gradient-row {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto auto;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.term.left {
|
||||
text-align: left;
|
||||
grid-row: 1;
|
||||
}
|
||||
|
||||
.bar-container {
|
||||
grid-row: 2;
|
||||
}
|
||||
|
||||
.term.right {
|
||||
text-align: right;
|
||||
grid-row: 3;
|
||||
}
|
||||
|
||||
.bar {
|
||||
font-size: 1.4rem;
|
||||
min-width: 200px;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
216
bicorder-app/src/components/MetadataFields.svelte
Normal file
216
bicorder-app/src/components/MetadataFields.svelte
Normal file
@@ -0,0 +1,216 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import type { Metadata } from '../types';
|
||||
|
||||
export let metadata: Metadata;
|
||||
|
||||
const dispatch = createEventDispatcher<{
|
||||
update: Partial<Metadata>;
|
||||
}>();
|
||||
|
||||
function handleInput(field: keyof Metadata, value: string) {
|
||||
dispatch('update', { [field]: value || null });
|
||||
}
|
||||
|
||||
function handleToggle(field: keyof Metadata, value: boolean) {
|
||||
dispatch('update', { [field]: value });
|
||||
}
|
||||
|
||||
function updateTimestamp() {
|
||||
dispatch('update', { timestamp: new Date().toISOString() });
|
||||
}
|
||||
|
||||
function formatTimestamp(timestamp: string | null): string {
|
||||
if (!timestamp) return '';
|
||||
try {
|
||||
return new Date(timestamp).toLocaleString();
|
||||
} catch {
|
||||
return timestamp;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<section class="metadata">
|
||||
<div class="metadata-field">
|
||||
<label for="protocol">Protocol:</label>
|
||||
<input
|
||||
id="protocol"
|
||||
type="text"
|
||||
placeholder="[Protocol]"
|
||||
value={metadata.protocol || ''}
|
||||
on:input={(e) => handleInput('protocol', e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="metadata-field">
|
||||
<label for="analyst">Analyst:</label>
|
||||
<input
|
||||
id="analyst"
|
||||
type="text"
|
||||
placeholder="[Analyst]"
|
||||
value={metadata.analyst || ''}
|
||||
on:input={(e) => handleInput('analyst', e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="metadata-field">
|
||||
<label for="standpoint">Standpoint:</label>
|
||||
<input
|
||||
id="standpoint"
|
||||
type="text"
|
||||
placeholder="[Standpoint]"
|
||||
value={metadata.standpoint || ''}
|
||||
on:input={(e) => handleInput('standpoint', e.currentTarget.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="metadata-field">
|
||||
<label for="timestamp">Timestamp:</label>
|
||||
<div class="timestamp-display">
|
||||
<input
|
||||
id="timestamp"
|
||||
type="text"
|
||||
readonly
|
||||
value={formatTimestamp(metadata.timestamp)}
|
||||
placeholder="[Auto-generated]"
|
||||
/>
|
||||
<button on:click={updateTimestamp} aria-label="Update timestamp">
|
||||
🕐 Update
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="metadata-field toggle-field">
|
||||
<label for="shortform">Short Form:</label>
|
||||
<div class="toggle-container">
|
||||
<label class="toggle-switch">
|
||||
<input
|
||||
id="shortform"
|
||||
type="checkbox"
|
||||
checked={metadata.shortform}
|
||||
on:change={(e) => handleToggle('shortform', e.currentTarget.checked)}
|
||||
/>
|
||||
<span class="slider"></span>
|
||||
</label>
|
||||
<span class="toggle-label">{metadata.shortform ? 'Enabled' : 'Disabled'}</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.metadata {
|
||||
margin: 2rem 0;
|
||||
padding: 1rem;
|
||||
border: 2px solid var(--border-color);
|
||||
}
|
||||
|
||||
.metadata-field {
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 0.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.timestamp-display {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.timestamp-display input {
|
||||
flex: 1;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.timestamp-display button {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.toggle-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.toggle-field > label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.toggle-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: 50px;
|
||||
height: 26px;
|
||||
margin-bottom: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-switch input {
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.slider {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: #ccc;
|
||||
border-radius: 26px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.slider:before {
|
||||
position: absolute;
|
||||
content: "";
|
||||
height: 20px;
|
||||
width: 20px;
|
||||
left: 3px;
|
||||
bottom: 3px;
|
||||
background-color: white;
|
||||
border-radius: 50%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .slider {
|
||||
background-color: var(--primary-color, #4CAF50);
|
||||
}
|
||||
|
||||
.toggle-switch input:checked + .slider:before {
|
||||
transform: translateX(24px);
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
font-size: 0.9rem;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.metadata {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.timestamp-display {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.timestamp-display button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.toggle-field {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
120
bicorder-app/src/components/Tooltip.svelte
Normal file
120
bicorder-app/src/components/Tooltip.svelte
Normal file
@@ -0,0 +1,120 @@
|
||||
<script lang="ts">
|
||||
export let text: string;
|
||||
|
||||
let showTooltip = false;
|
||||
let touchTimer: number;
|
||||
let isLongPress = false;
|
||||
|
||||
function handleTouchStart() {
|
||||
isLongPress = false;
|
||||
touchTimer = window.setTimeout(() => {
|
||||
showTooltip = true;
|
||||
isLongPress = true;
|
||||
}, 500); // Show after 500ms press
|
||||
}
|
||||
|
||||
function handleTouchEnd() {
|
||||
clearTimeout(touchTimer);
|
||||
if (isLongPress) {
|
||||
// Keep tooltip visible for a moment after long press release
|
||||
setTimeout(() => {
|
||||
showTooltip = false;
|
||||
}, 2000);
|
||||
}
|
||||
}
|
||||
|
||||
function handleClick() {
|
||||
// Toggle tooltip on click/tap
|
||||
if (!isLongPress) {
|
||||
showTooltip = !showTooltip;
|
||||
// Auto-hide after 3 seconds
|
||||
if (showTooltip) {
|
||||
setTimeout(() => {
|
||||
showTooltip = false;
|
||||
}, 3000);
|
||||
}
|
||||
}
|
||||
isLongPress = false;
|
||||
}
|
||||
|
||||
function handleMouseEnter() {
|
||||
showTooltip = true;
|
||||
}
|
||||
|
||||
function handleMouseLeave() {
|
||||
showTooltip = false;
|
||||
}
|
||||
</script>
|
||||
|
||||
<span
|
||||
class="tooltip-wrapper"
|
||||
on:mouseenter={handleMouseEnter}
|
||||
on:mouseleave={handleMouseLeave}
|
||||
on:touchstart={handleTouchStart}
|
||||
on:touchend={handleTouchEnd}
|
||||
on:touchcancel={handleTouchEnd}
|
||||
on:click={handleClick}
|
||||
role="button"
|
||||
tabindex="0"
|
||||
aria-label={text}
|
||||
aria-expanded={showTooltip}
|
||||
>
|
||||
<slot />
|
||||
{#if showTooltip}
|
||||
<span class="tooltip-text" role="status" aria-live="polite">
|
||||
{text}
|
||||
</span>
|
||||
{/if}
|
||||
</span>
|
||||
|
||||
<style>
|
||||
.tooltip-wrapper {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: help;
|
||||
border-bottom: 1px dotted var(--fg-color);
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tooltip-text {
|
||||
position: absolute;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background-color: var(--bg-color);
|
||||
color: var(--fg-color);
|
||||
border: 2px solid var(--border-color);
|
||||
padding: 0.5rem;
|
||||
z-index: 1000;
|
||||
width: max-content;
|
||||
max-width: 300px;
|
||||
font-size: 0.85rem;
|
||||
line-height: 1.4;
|
||||
text-align: center;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.tooltip-text {
|
||||
box-shadow: 0 2px 8px rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
.tooltip-text::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: var(--border-color) transparent transparent transparent;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tooltip-text {
|
||||
max-width: 250px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
21
bicorder-app/src/main.ts
Normal file
21
bicorder-app/src/main.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
import { registerSW } from 'virtual:pwa-register'
|
||||
|
||||
// Register service worker
|
||||
const updateSW = registerSW({
|
||||
onNeedRefresh() {
|
||||
if (confirm('New content available. Reload?')) {
|
||||
updateSW(true)
|
||||
}
|
||||
},
|
||||
onOfflineReady() {
|
||||
console.log('App ready to work offline')
|
||||
},
|
||||
})
|
||||
|
||||
const app = new App({
|
||||
target: document.getElementById('app')!,
|
||||
})
|
||||
|
||||
export default app
|
||||
50
bicorder-app/src/types.ts
Normal file
50
bicorder-app/src/types.ts
Normal file
@@ -0,0 +1,50 @@
|
||||
export interface Gradient {
|
||||
term_left: string
|
||||
term_left_description: string
|
||||
term_right: string
|
||||
term_right_description: string
|
||||
value: number | null
|
||||
notes: string | null
|
||||
shortform: boolean
|
||||
}
|
||||
|
||||
export interface DiagnosticSet {
|
||||
set_name: string
|
||||
set_description: string
|
||||
gradients: Gradient[]
|
||||
}
|
||||
|
||||
export interface AnalysisGradient {
|
||||
term_left: string
|
||||
term_left_description: string
|
||||
term_right: string
|
||||
term_right_description: string
|
||||
instructions: string
|
||||
automated: boolean
|
||||
value: number | null
|
||||
notes: string | null
|
||||
}
|
||||
|
||||
export interface Metadata {
|
||||
protocol: string | null
|
||||
analyst: string | null
|
||||
standpoint: string | null
|
||||
timestamp: string | null
|
||||
shortform: boolean
|
||||
}
|
||||
|
||||
export interface BicorderData {
|
||||
name: string
|
||||
schema: string
|
||||
version: string
|
||||
description: string
|
||||
author: string
|
||||
date_modified: string
|
||||
metadata: Metadata
|
||||
diagnostic: DiagnosticSet[]
|
||||
analysis: AnalysisGradient[]
|
||||
}
|
||||
|
||||
export interface BicorderState extends BicorderData {
|
||||
// Add any additional runtime state here
|
||||
}
|
||||
12
bicorder-app/src/vite-env.d.ts
vendored
Normal file
12
bicorder-app/src/vite-env.d.ts
vendored
Normal file
@@ -0,0 +1,12 @@
|
||||
/// <reference types="svelte" />
|
||||
/// <reference types="vite/client" />
|
||||
|
||||
declare const __BICORDER_DATA__: any
|
||||
|
||||
interface ImportMetaEnv {
|
||||
readonly VITE_APP_TITLE: string
|
||||
}
|
||||
|
||||
interface ImportMeta {
|
||||
readonly env: ImportMetaEnv
|
||||
}
|
||||
5
bicorder-app/svelte.config.js
Normal file
5
bicorder-app/svelte.config.js
Normal file
@@ -0,0 +1,5 @@
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
|
||||
|
||||
export default {
|
||||
preprocess: vitePreprocess(),
|
||||
}
|
||||
15
bicorder-app/tsconfig.json
Normal file
15
bicorder-app/tsconfig.json
Normal file
@@ -0,0 +1,15 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"target": "ESNext",
|
||||
"useDefineForClassFields": true,
|
||||
"module": "ESNext",
|
||||
"resolveJsonModule": true,
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"isolatedModules": true,
|
||||
"moduleDetection": "force"
|
||||
},
|
||||
"include": ["src/**/*.d.ts", "src/**/*.ts", "src/**/*.js", "src/**/*.svelte"],
|
||||
"references": [{ "path": "./tsconfig.node.json" }]
|
||||
}
|
||||
10
bicorder-app/tsconfig.node.json
Normal file
10
bicorder-app/tsconfig.node.json
Normal file
@@ -0,0 +1,10 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
22
bicorder-app/update-diagnostic.sh
Executable file
22
bicorder-app/update-diagnostic.sh
Executable file
@@ -0,0 +1,22 @@
|
||||
#!/bin/bash
|
||||
# Update the diagnostic app when bicorder.json changes
|
||||
|
||||
echo "Checking for bicorder.json..."
|
||||
if [ ! -f "../bicorder.json" ]; then
|
||||
echo "Error: ../bicorder.json not found!"
|
||||
exit 1
|
||||
fi
|
||||
|
||||
echo "Building app with latest bicorder.json..."
|
||||
npm run build
|
||||
|
||||
if [ $? -eq 0 ]; then
|
||||
echo ""
|
||||
echo "✓ Build successful!"
|
||||
echo "The app has been updated with the latest bicorder.json structure."
|
||||
echo "Deploy the 'dist' folder to your web server or run 'npm run preview' to test."
|
||||
else
|
||||
echo ""
|
||||
echo "✗ Build failed. Please check the errors above."
|
||||
exit 1
|
||||
fi
|
||||
43
bicorder-app/vite.config.ts
Normal file
43
bicorder-app/vite.config.ts
Normal file
@@ -0,0 +1,43 @@
|
||||
import { defineConfig } from 'vite'
|
||||
import { svelte } from '@sveltejs/vite-plugin-svelte'
|
||||
import { VitePWA } from 'vite-plugin-pwa'
|
||||
import fs from 'fs'
|
||||
import path from 'path'
|
||||
|
||||
// Read bicorder.json at build time
|
||||
const bicorderData = JSON.parse(
|
||||
fs.readFileSync(path.resolve(__dirname, '../bicorder.json'), 'utf-8')
|
||||
)
|
||||
|
||||
export default defineConfig({
|
||||
base: './',
|
||||
plugins: [
|
||||
svelte(),
|
||||
VitePWA({
|
||||
registerType: 'autoUpdate',
|
||||
includeAssets: ['favicon.ico'],
|
||||
manifest: {
|
||||
name: 'Protocol Bicorder',
|
||||
short_name: 'Bicorder',
|
||||
description: 'A diagnostic tool for the study of protocols',
|
||||
theme_color: '#ffffff',
|
||||
background_color: '#ffffff',
|
||||
display: 'standalone',
|
||||
icons: [
|
||||
{
|
||||
src: '/icon.svg',
|
||||
sizes: 'any',
|
||||
type: 'image/svg+xml',
|
||||
purpose: 'any'
|
||||
}
|
||||
]
|
||||
},
|
||||
workbox: {
|
||||
globPatterns: ['**/*.{js,css,html,ico,png,svg,json}']
|
||||
}
|
||||
})
|
||||
],
|
||||
define: {
|
||||
'__BICORDER_DATA__': JSON.stringify(bicorderData)
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user