mirror of
https://github.com/bagusindrayana/ews-concept-new.git
synced 2026-06-08 09:45:34 +00:00
Compare commits
No commits in common. "main" and "data-source" have entirely different histories.
main
...
data-sourc
44 changed files with 1287 additions and 5530 deletions
|
|
@ -1,309 +0,0 @@
|
|||
# Component Usage Documentation
|
||||
|
||||
This document provides a guide on how to use the components available in `src/lib/components`.
|
||||
|
||||
## Table of Contents
|
||||
- [AffectedAreaItem](#affectedareaitem)
|
||||
- [Card](#card)
|
||||
- [GempaBumiAlert](#gempabumialert)
|
||||
- [HexGrid](#hexgrid)
|
||||
- [HexShape](#hexshape)
|
||||
- [Jam](#jam)
|
||||
- [MentalToxicityLevel](#mentaltoxicitylevel)
|
||||
- [Modal](#modal)
|
||||
- [RibCageLayout](#ribcagelayout)
|
||||
- [StripeBar](#stripebar)
|
||||
- [TsunamiAlert](#tsunamialert)
|
||||
- [TitikGempa (Mapbox Utility)](#titikgempa-mapbox-utility)
|
||||
- [TitikTsunami (Mapbox Utility)](#titiktsunami-mapbox-utility)
|
||||
|
||||
---
|
||||
|
||||
## AffectedAreaItem
|
||||
Displays a countdown and status for an affected area (e.g., tsunami arrival).
|
||||
|
||||
**Props:**
|
||||
- `kota`: `AffectedArea` object (requires `name`, `timeArrival`, `distance`, `hit`).
|
||||
- `onClick?`: `(kota: AffectedArea) => void` (optional callback).
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<script>
|
||||
import AffectedAreaItem from "$lib/components/AffectedAreaItem.svelte";
|
||||
const area = {
|
||||
name: "Pangandaran",
|
||||
timeArrival: new Date(Date.now() + 600000), // 10 minutes from now
|
||||
distance: "120km",
|
||||
hit: false
|
||||
};
|
||||
</script>
|
||||
|
||||
<AffectedAreaItem kota={area} />
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Card
|
||||
A stylized "EWS" card component with header, content, and footer sections.
|
||||
|
||||
**Props:**
|
||||
- `children`: `Snippet` (main content).
|
||||
- `title?`: `Snippet` (header content).
|
||||
- `footer?`: `Snippet` (footer content).
|
||||
- `className?`: `string` (additional CSS classes).
|
||||
- `onToggle?`: `() => void` (callback when header is clicked).
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<Card>
|
||||
{#snippet title()}
|
||||
<h3>System Status</h3>
|
||||
{/snippet}
|
||||
|
||||
<p>All sensors operating within normal parameters.</p>
|
||||
|
||||
{#snippet footer()}
|
||||
<small>Last updated: 5 minutes ago</small>
|
||||
{/snippet}
|
||||
</Card>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## GempaBumiAlert
|
||||
A full-screen overlay alert for earthquake detections.
|
||||
|
||||
**Props:**
|
||||
- `magnitudo?`: `number` (default: 0).
|
||||
- `kedalaman?`: `string` (default: "").
|
||||
- `show?`: `boolean` (default: false).
|
||||
- `closeInSecond?`: `number` (auto-close timer in seconds).
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<GempaBumiAlert
|
||||
show={true}
|
||||
magnitudo={7.5}
|
||||
kedalaman="10 Km"
|
||||
closeInSecond={10}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## HexGrid
|
||||
A responsive honeycomb/hexagonal grid layout.
|
||||
|
||||
**Props:**
|
||||
- `children`: `Snippet` (hex components).
|
||||
- `className?`: `string`.
|
||||
- `variant?`: `"pointy" | "flat"` (default: `"pointy"`).
|
||||
- `hexWidth?`: `number`.
|
||||
- `hexHeight?`: `number`.
|
||||
- `gap?`: `number` (default: 4).
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<HexGrid variant="pointy" hexWidth={100} hexHeight={115}>
|
||||
{#each Array(10) as _, i}
|
||||
<HexShape color="orange">
|
||||
<p>{i + 1}</p>
|
||||
</HexShape>
|
||||
{/each}
|
||||
</HexGrid>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## HexShape
|
||||
A single hexagonal shape container.
|
||||
|
||||
**Props:**
|
||||
- `children?`: `Snippet`.
|
||||
- `className?`: `string`.
|
||||
- `color?`: `string` (e.g., `"red"`, `"orange"`).
|
||||
- `flatTop?`: `boolean` (default: true).
|
||||
- `clipContent?`: `boolean` (default: false).
|
||||
- `paddingContent?`: `number` (default: 10).
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<HexShape color="red" clipContent={true}>
|
||||
<div class="bg-black text-white p-2">
|
||||
CRITICAL ALERT
|
||||
</div>
|
||||
</HexShape>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Jam
|
||||
A real-time clock component.
|
||||
|
||||
**Props:**
|
||||
- `timeZone?`: `string` (default: `"local"`).
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<div class="text-2xl font-bold">
|
||||
<Jam timeZone="Asia/Jakarta" />
|
||||
</div>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## MentalToxicityLevel
|
||||
A complex status visualization for network channels (NERV-style).
|
||||
|
||||
**Props:**
|
||||
- `title?`: `string` (default: `"MENTAL TOXICITY LEVEL"`).
|
||||
- `headerInfo?`: `{ label: string; value: string }[]`.
|
||||
- `networks?`: `NetworkData[]`.
|
||||
- `className?`: `string`.
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<MentalToxicityLevel
|
||||
title="SIGNAL PURITY"
|
||||
networks={[
|
||||
{ id: "1", name: "IA-GE", active_channel: 10, inactive_channel: 2, total_channel: 12 },
|
||||
{ id: "2", name: "GE-II", active_channel: 5, inactive_channel: 5, total_channel: 10 }
|
||||
]}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Modal
|
||||
A stylized modal overlay for settings or information.
|
||||
|
||||
**Props:**
|
||||
- `show`: `boolean` (bindable).
|
||||
- `title?`: `string`.
|
||||
- `variant?`: `"medium" | "large"` (default: `"medium"`).
|
||||
- `contentClass?`: `string`.
|
||||
- `children`: `Snippet`.
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<script>
|
||||
let showModal = $state(false);
|
||||
</script>
|
||||
|
||||
<button onclick={() => showModal = true}>Open Modal</button>
|
||||
|
||||
<Modal bind:show={showModal} title="SYSTEM SETTINGS">
|
||||
<p>Configure emergency protocols here.</p>
|
||||
</Modal>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## RibCageLayout
|
||||
A "ribcage" spine layout for displaying lists of items.
|
||||
|
||||
**Props:**
|
||||
- `items`: `any[]`.
|
||||
- `nodeContent`: `Snippet<[item, context]>`.
|
||||
- `connectorContent?`: `Snippet<[item, context]>`.
|
||||
- `getHref?`: `(item: any) => string`.
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<RibCageLayout items={stations}>
|
||||
{#snippet nodeContent(item, ctx)}
|
||||
<div class="p-2 border border-primary">
|
||||
{item.name} ({ctx.side})
|
||||
</div>
|
||||
{/snippet}
|
||||
|
||||
{#snippet connectorContent(item, ctx)}
|
||||
<span>{item.distance}km</span>
|
||||
{/snippet}
|
||||
</RibCageLayout>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## StripeBar
|
||||
An animated striped background/bar component.
|
||||
|
||||
**Props:**
|
||||
- `children?`: `Snippet`.
|
||||
- `className?`: `string`.
|
||||
- `color?`: `string`.
|
||||
- `orientation?`: `string` (e.g., `"vertical"`).
|
||||
- `loop?`: `boolean` (default: false).
|
||||
- `reverse?`: `boolean` (default: false).
|
||||
- `duration?`: `number` (default: 10).
|
||||
- `size?`: `string` (default: `"30px"`).
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<StripeBar
|
||||
loop={true}
|
||||
orientation="vertical"
|
||||
size="50px"
|
||||
color="bg-red-500"
|
||||
duration={5}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## TsunamiAlert
|
||||
A full-screen overlay alert for tsunami warnings.
|
||||
|
||||
**Props:**
|
||||
- `infoTsunami`: `InfoTsunami` object.
|
||||
- `closeInSecond?`: `number` (default: 0).
|
||||
|
||||
### Example:
|
||||
```svelte
|
||||
<TsunamiAlert
|
||||
infoTsunami={{
|
||||
level: "AWAS",
|
||||
message: "Potensi tsunami besar terdeteksi di Pantai Selatan Jawa.",
|
||||
lng: 108.5,
|
||||
lat: -8.5
|
||||
}}
|
||||
closeInSecond={30}
|
||||
/>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## TitikGempa (Mapbox Utility)
|
||||
Class to manage earthquake markers and waves on a Mapbox map.
|
||||
|
||||
### Example:
|
||||
```typescript
|
||||
import { TitikGempa } from "$lib/components/TitikGempa";
|
||||
|
||||
const earthquake = new TitikGempa("quake-1", infoGempa, {
|
||||
map: mapObject,
|
||||
showMarker: true,
|
||||
showPopup: true,
|
||||
pWaveSpeed: 8.0,
|
||||
sWaveSpeed: 4.0,
|
||||
showPopUpInSecond: 1,
|
||||
closePopUpInSecond: 5
|
||||
});
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## TitikTsunami (Mapbox Utility)
|
||||
Class to manage tsunami markers on a Mapbox map.
|
||||
|
||||
### Example:
|
||||
```typescript
|
||||
import { TitikTsunami } from "$lib/components/TitikTsunami";
|
||||
|
||||
const tsunami = new TitikTsunami("tsunami-1", infoTsunami, {
|
||||
map: mapObject,
|
||||
showMarker: true,
|
||||
showPopup: true,
|
||||
description: "Coastal Warning Issued"
|
||||
});
|
||||
```
|
||||
26
LICENSE
26
LICENSE
|
|
@ -1,26 +0,0 @@
|
|||
MIT License (Modified)
|
||||
|
||||
Copyright (c) 2026 Bagus Indrayana
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
1. If the Software (including any part of the code or data) is modified by the
|
||||
user or deployer, the requirement to include the above copyright notice
|
||||
and this permission notice is waived.
|
||||
2. If the Software is used or deployed in its original form without any
|
||||
modifications to the code or data, the above copyright notice and this
|
||||
permission notice MUST be included in all copies, and credit must be given
|
||||
to the original author or original repository (https://github.com/bagusindrayana/ews-concept-new).
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
|
|
@ -85,7 +85,3 @@ This application relies on two distinct external data sources for real-time oper
|
|||
- **Purpose**: A WebSocket server that broadcasts structured alert data regarding recent earthquakes, parameters (magnitude, depth, location), and potential tsunami warnings.
|
||||
- **Usage**: Triggers the UI popups, updates the recent earthquake list, and displays alert banners.
|
||||
- **Environment Variable**: `PUBLIC_SOCKET_DATA_URL` (default: `ws://localhost:8081`)
|
||||
|
||||
|
||||
## Support Me!
|
||||
[](https://sociabuzz.com/bagusindrayana/tribe)
|
||||
|
|
|
|||
13
package.json
13
package.json
|
|
@ -1,9 +1,8 @@
|
|||
{
|
||||
"name": "ews-concept-new",
|
||||
"private": true,
|
||||
"version": "0.0.2",
|
||||
"version": "0.0.1",
|
||||
"type": "module",
|
||||
"license": "MIT",
|
||||
"scripts": {
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
|
|
@ -13,7 +12,6 @@
|
|||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@iconify/svelte": "^5.2.1",
|
||||
"@sveltejs/adapter-auto": "^7.0.0",
|
||||
"@sveltejs/adapter-cloudflare": "^7.2.8",
|
||||
"@sveltejs/kit": "^2.50.2",
|
||||
|
|
@ -23,26 +21,23 @@
|
|||
"@types/mapbox-gl": "^3.1.0",
|
||||
"@types/ws": "^8.18.1",
|
||||
"@ubermanu/sveltekit-websocket": "^0.3.3",
|
||||
"devalue": ">=5.6.4",
|
||||
"svelte": "^5.51.0",
|
||||
"svelte-check": "^4.4.2",
|
||||
"typescript": "^5.9.3",
|
||||
"undici": ">=7.24.0",
|
||||
"vite": "^7.3.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@sveltejs/adapter-node": "^5.5.4",
|
||||
"@tailwindcss/vite": "^4.2.1",
|
||||
"@turf/turf": "^6.5",
|
||||
"fast-xml-parser": ">=5.5.7",
|
||||
"html-to-image": "^1.11.13",
|
||||
"fast-xml-parser": "^4.3.6",
|
||||
"luxon": "^3.4.4",
|
||||
"mapbox-gl": "^3.2.0",
|
||||
"mapbox-gl-animated-popup": "^0.4.0",
|
||||
"seisplotjs": "^3.2.1",
|
||||
"socket.io-client": "^4.8.1",
|
||||
"socket.io-client": "^4.7.5",
|
||||
"svelte-highlight": "^7.9.0",
|
||||
"tailwindcss": "^4.2.1",
|
||||
"ws": "^8.19.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
83
pnpm-lock.yaml
generated
83
pnpm-lock.yaml
generated
|
|
@ -18,11 +18,8 @@ importers:
|
|||
specifier: ^6.5
|
||||
version: 6.5.0
|
||||
fast-xml-parser:
|
||||
specifier: '>=5.5.7'
|
||||
version: 5.5.7
|
||||
html-to-image:
|
||||
specifier: ^1.11.13
|
||||
version: 1.11.13
|
||||
specifier: ^4.3.6
|
||||
version: 4.5.4
|
||||
luxon:
|
||||
specifier: ^3.4.4
|
||||
version: 3.7.2
|
||||
|
|
@ -36,7 +33,7 @@ importers:
|
|||
specifier: ^3.2.1
|
||||
version: 3.2.1
|
||||
socket.io-client:
|
||||
specifier: ^4.8.1
|
||||
specifier: ^4.7.5
|
||||
version: 4.8.3
|
||||
svelte-highlight:
|
||||
specifier: ^7.9.0
|
||||
|
|
@ -48,9 +45,6 @@ importers:
|
|||
specifier: ^8.19.0
|
||||
version: 8.19.0
|
||||
devDependencies:
|
||||
'@iconify/svelte':
|
||||
specifier: ^5.2.1
|
||||
version: 5.2.1(svelte@5.53.10)
|
||||
'@sveltejs/adapter-auto':
|
||||
specifier: ^7.0.0
|
||||
version: 7.0.1(@sveltejs/kit@2.53.4(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.10)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)))(svelte@5.53.10)(typescript@5.9.3)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)))
|
||||
|
|
@ -78,9 +72,6 @@ importers:
|
|||
'@ubermanu/sveltekit-websocket':
|
||||
specifier: ^0.3.3
|
||||
version: 0.3.3(@sveltejs/kit@2.53.4(@sveltejs/vite-plugin-svelte@6.2.4(svelte@5.53.10)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)))(svelte@5.53.10)(typescript@5.9.3)(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)))(vite@7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1))
|
||||
devalue:
|
||||
specifier: '>=5.6.4'
|
||||
version: 5.6.4
|
||||
svelte:
|
||||
specifier: ^5.51.0
|
||||
version: 5.53.10
|
||||
|
|
@ -90,9 +81,6 @@ importers:
|
|||
typescript:
|
||||
specifier: ^5.9.3
|
||||
version: 5.9.3
|
||||
undici:
|
||||
specifier: '>=7.24.0'
|
||||
version: 7.24.4
|
||||
vite:
|
||||
specifier: ^7.3.1
|
||||
version: 7.3.1(@types/node@25.4.0)(jiti@2.6.1)(lightningcss@1.31.1)
|
||||
|
|
@ -308,14 +296,6 @@ packages:
|
|||
cpu: [x64]
|
||||
os: [win32]
|
||||
|
||||
'@iconify/svelte@5.2.1':
|
||||
resolution: {integrity: sha512-zHmsIPmnIhGd5gc95bNN5FL+GifwMZv7M2rlZEpa7IXYGFJm/XGHdWf6PWQa6OBoC+R69WyiPO9NAj5wjfjbow==}
|
||||
peerDependencies:
|
||||
svelte: '>5.0.0'
|
||||
|
||||
'@iconify/types@2.0.0':
|
||||
resolution: {integrity: sha512-+wluvCrRhXrhyOmRDJ3q8mux9JkKy5SJ/v8ol2tu4FVjyYvtEzkc/3pK15ET6RKg4b4w4BmTk1+gsCUhf21Ykg==}
|
||||
|
||||
'@img/colour@1.1.0':
|
||||
resolution: {integrity: sha512-Td76q7j57o/tLVdgS746cYARfSyxk8iEfRxewL9h4OMzYhbW4TAcppl0mT4eyqXddh6L/jwoM75mo7ixa/pCeQ==}
|
||||
engines: {node: '>=18'}
|
||||
|
|
@ -1410,8 +1390,8 @@ packages:
|
|||
resolution: {integrity: sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==}
|
||||
engines: {node: '>=8'}
|
||||
|
||||
devalue@5.6.4:
|
||||
resolution: {integrity: sha512-Gp6rDldRsFh/7XuouDbxMH3Mx8GMCcgzIb1pDTvNyn8pZGQ22u+Wa+lGV9dQCltFQ7uVw0MhRyb8XDskNFOReA==}
|
||||
devalue@5.6.3:
|
||||
resolution: {integrity: sha512-nc7XjUU/2Lb+SvEFVGcWLiKkzfw8+qHI7zn8WYXKkLMgfGSHbgCEaR6bJpev8Cm6Rmrb19Gfd/tZvGqx9is3wg==}
|
||||
|
||||
dunder-proto@1.0.1:
|
||||
resolution: {integrity: sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A==}
|
||||
|
|
@ -1463,11 +1443,8 @@ packages:
|
|||
estree-walker@2.0.2:
|
||||
resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
|
||||
|
||||
fast-xml-builder@1.1.4:
|
||||
resolution: {integrity: sha512-f2jhpN4Eccy0/Uz9csxh3Nu6q4ErKxf0XIsasomfOihuSUa3/xw6w8dnOtCDgEItQFJG8KyXPzQXzcODDrrbOg==}
|
||||
|
||||
fast-xml-parser@5.5.7:
|
||||
resolution: {integrity: sha512-LteOsISQ2GEiDHZch6L9hB0+MLoYVLToR7xotrzU0opCICBkxOPgHAy1HxAvtxfJNXDJpgAsQN30mkrfpO2Prg==}
|
||||
fast-xml-parser@4.5.4:
|
||||
resolution: {integrity: sha512-jE8ugADnYOBsu1uaoayVl1tVKAMNOXyjwvv2U6udEA2ORBhDooJDWoGxTkhd4Qn4yh59JVVt/pKXtjPwx9OguQ==}
|
||||
hasBin: true
|
||||
|
||||
fdir@6.5.0:
|
||||
|
|
@ -1544,9 +1521,6 @@ packages:
|
|||
resolution: {integrity: sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==}
|
||||
engines: {node: '>=12.0.0'}
|
||||
|
||||
html-to-image@1.11.13:
|
||||
resolution: {integrity: sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg==}
|
||||
|
||||
iconv-lite@0.6.3:
|
||||
resolution: {integrity: sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==}
|
||||
engines: {node: '>=0.10.0'}
|
||||
|
|
@ -1760,10 +1734,6 @@ packages:
|
|||
pako@1.0.11:
|
||||
resolution: {integrity: sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw==}
|
||||
|
||||
path-expression-matcher@1.1.3:
|
||||
resolution: {integrity: sha512-qdVgY8KXmVdJZRSS1JdEPOKPdTiEK/pi0RkcT2sw1RhXxohdujUlJFPuS1TSkevZ9vzd3ZlL7ULl1MHGTApKzQ==}
|
||||
engines: {node: '>=14.0.0'}
|
||||
|
||||
path-parse@1.0.7:
|
||||
resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
|
||||
|
||||
|
|
@ -1930,8 +1900,8 @@ packages:
|
|||
string_decoder@1.1.1:
|
||||
resolution: {integrity: sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==}
|
||||
|
||||
strnum@2.2.0:
|
||||
resolution: {integrity: sha512-Y7Bj8XyJxnPAORMZj/xltsfo55uOiyHcU2tnAVzHUnSJR/KsEX+9RoDeXEnsXtl/CX4fAcrt64gZ13aGaWPeBg==}
|
||||
strnum@1.1.2:
|
||||
resolution: {integrity: sha512-vrN+B7DBIoTTZjnPNewwhx6cBA/H+IS7rfW68n7XxC1y7uoiGQBxaKzqucGUgavX15dJgiGztLJ8vxuEzwqBdA==}
|
||||
|
||||
supercluster@8.0.1:
|
||||
resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
|
||||
|
|
@ -2008,10 +1978,6 @@ packages:
|
|||
resolution: {integrity: sha512-y+8YjDFzWdQlSE9N5nzKMT3g4a5UBX1HKowfdXh0uvAnTaqqwqB92Jt4UXBAeKekDs5IaDKyJFR4X1gYVCgXcw==}
|
||||
engines: {node: '>=20.18.1'}
|
||||
|
||||
undici@7.24.4:
|
||||
resolution: {integrity: sha512-BM/JzwwaRXxrLdElV2Uo6cTLEjhSb3WXboncJamZ15NgUURmvlXvxa6xkwIOILIjPNo9i8ku136ZvWV0Uly8+w==}
|
||||
engines: {node: '>=20.18.1'}
|
||||
|
||||
unenv@2.0.0-rc.24:
|
||||
resolution: {integrity: sha512-i7qRCmY42zmCwnYlh9H2SvLEypEFGye5iRmEMKjcGi7zk9UquigRjFtTLz0TYqr0ZGLZhaMHl/foy1bZR+Cwlw==}
|
||||
|
||||
|
|
@ -2254,13 +2220,6 @@ snapshots:
|
|||
'@esbuild/win32-x64@0.27.3':
|
||||
optional: true
|
||||
|
||||
'@iconify/svelte@5.2.1(svelte@5.53.10)':
|
||||
dependencies:
|
||||
'@iconify/types': 2.0.0
|
||||
svelte: 5.53.10
|
||||
|
||||
'@iconify/types@2.0.0': {}
|
||||
|
||||
'@img/colour@1.1.0': {}
|
||||
|
||||
'@img/sharp-darwin-arm64@0.34.5':
|
||||
|
|
@ -2573,7 +2532,7 @@ snapshots:
|
|||
'@types/cookie': 0.6.0
|
||||
acorn: 8.16.0
|
||||
cookie: 0.6.0
|
||||
devalue: 5.6.4
|
||||
devalue: 5.6.3
|
||||
esm-env: 1.2.2
|
||||
kleur: 4.1.5
|
||||
magic-string: 0.30.21
|
||||
|
|
@ -3694,7 +3653,7 @@ snapshots:
|
|||
|
||||
detect-libc@2.1.2: {}
|
||||
|
||||
devalue@5.6.4: {}
|
||||
devalue@5.6.3: {}
|
||||
|
||||
dunder-proto@1.0.1:
|
||||
dependencies:
|
||||
|
|
@ -3772,15 +3731,9 @@ snapshots:
|
|||
|
||||
estree-walker@2.0.2: {}
|
||||
|
||||
fast-xml-builder@1.1.4:
|
||||
fast-xml-parser@4.5.4:
|
||||
dependencies:
|
||||
path-expression-matcher: 1.1.3
|
||||
|
||||
fast-xml-parser@5.5.7:
|
||||
dependencies:
|
||||
fast-xml-builder: 1.1.4
|
||||
path-expression-matcher: 1.1.3
|
||||
strnum: 2.2.0
|
||||
strnum: 1.1.2
|
||||
|
||||
fdir@6.5.0(picomatch@4.0.3):
|
||||
optionalDependencies:
|
||||
|
|
@ -3858,8 +3811,6 @@ snapshots:
|
|||
|
||||
highlight.js@11.11.1: {}
|
||||
|
||||
html-to-image@1.11.13: {}
|
||||
|
||||
iconv-lite@0.6.3:
|
||||
dependencies:
|
||||
safer-buffer: 2.1.2
|
||||
|
|
@ -4059,8 +4010,6 @@ snapshots:
|
|||
|
||||
pako@1.0.11: {}
|
||||
|
||||
path-expression-matcher@1.1.3: {}
|
||||
|
||||
path-parse@1.0.7: {}
|
||||
|
||||
path-to-regexp@6.3.0: {}
|
||||
|
|
@ -4305,7 +4254,7 @@ snapshots:
|
|||
dependencies:
|
||||
safe-buffer: 5.1.2
|
||||
|
||||
strnum@2.2.0: {}
|
||||
strnum@1.1.2: {}
|
||||
|
||||
supercluster@8.0.1:
|
||||
dependencies:
|
||||
|
|
@ -4342,7 +4291,7 @@ snapshots:
|
|||
aria-query: 5.3.1
|
||||
axobject-query: 4.1.0
|
||||
clsx: 2.1.1
|
||||
devalue: 5.6.4
|
||||
devalue: 5.6.3
|
||||
esm-env: 1.2.2
|
||||
esrap: 2.2.3
|
||||
is-reference: 3.0.3
|
||||
|
|
@ -4385,8 +4334,6 @@ snapshots:
|
|||
|
||||
undici@7.18.2: {}
|
||||
|
||||
undici@7.24.4: {}
|
||||
|
||||
unenv@2.0.0-rc.24:
|
||||
dependencies:
|
||||
pathe: 2.0.3
|
||||
|
|
|
|||
|
|
@ -5,10 +5,9 @@
|
|||
@import "./lib/styles/animations.css";
|
||||
@import "./lib/styles/components.css";
|
||||
@import "./lib/styles/variants.css";
|
||||
/* @import "./lib/styles/status.css";
|
||||
@import "./lib/styles/hex-grid.css"; */
|
||||
@import "./lib/styles/status.css";
|
||||
@import "./lib/styles/hex-grid.css";
|
||||
|
||||
/* refactor code */
|
||||
/* @import "./lib/styles/stripe-bar.css";
|
||||
@import "./lib/styles/hex-shape.css";
|
||||
@import "./lib/styles/components/RibLayout.css"; */
|
||||
@import "./lib/styles/stripe-bar.css";
|
||||
@import "./lib/styles/hex-shape.css";
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import "../styles/components/Card.css";
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -15,10 +14,10 @@
|
|||
let open = $state(false);
|
||||
</script>
|
||||
|
||||
<div class="ews-card {className}" class:open>
|
||||
<div class="ews-card bordered {className}" class:open>
|
||||
{#if title}
|
||||
<div
|
||||
class="ews-card-header"
|
||||
class="ews-card-header bordered-bottom"
|
||||
onclick={() => {
|
||||
open = !open;
|
||||
onToggle?.();
|
||||
|
|
@ -27,11 +26,11 @@
|
|||
{@render title()}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="ews-card-content">
|
||||
<div class="ews-card-content p-1 lg:p-2 custom-scrollbar">
|
||||
{@render children()}
|
||||
</div>
|
||||
{#if footer}
|
||||
<div class="ews-card-footer">
|
||||
<div class="ews-card-footer bordered-top">
|
||||
{@render footer()}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
import StripeBar from "./StripeBar.svelte";
|
||||
import InfiniteScroll from "./InfiniteScroll.svelte";
|
||||
|
||||
interface GempaBumiAlertProps {
|
||||
magnitudo?: number;
|
||||
|
|
@ -54,7 +52,7 @@
|
|||
class="warning-black opacity-0 blink animation-fast animation-delay-2"
|
||||
></div>
|
||||
<div class="flex flex-col font-bold text-center text-black">
|
||||
<span class="text-xl">WARNING</span>
|
||||
<span class="text-xl">PERINGATAN</span>
|
||||
<span class="text-xs">Gempa Bumi Terdeteksi</span>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -105,53 +103,16 @@
|
|||
></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="absolute top-0">
|
||||
<StripeBar loop={true} reverse={true} duration={20}></StripeBar>
|
||||
</div>
|
||||
<div class="absolute bottom-0">
|
||||
<StripeBar loop={true} duration={20}></StripeBar>
|
||||
</div> -->
|
||||
|
||||
<div class="flex w-full absolute top-0 left-0 right-0" style="z-index: 2;">
|
||||
<StripeBar className="my-2 " size="100px"></StripeBar>
|
||||
<StripeBar className="my-2 -scale-x-100 " size="100px"></StripeBar>
|
||||
<div
|
||||
class="absolute top-0 left-0 bottom-0 right-0 flex items-center justify-center text-center"
|
||||
>
|
||||
<div class="p-1 bg-black rounded-lg w-full">
|
||||
<div class="bordered-red bg-black p-2 w-full text-primary">
|
||||
<InfiniteScroll speed={100} gap={48}>
|
||||
{#snippet children()}
|
||||
<div class="flex flex-col text-center px-4">
|
||||
<b class="text-3xl" style="line-height: 0.8;">EARTHQUAKE</b>
|
||||
</div>
|
||||
{/snippet}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stripe top-0">
|
||||
<div class="stripe-wrapper">
|
||||
<div class="stripe-bar loop-stripe-reverse"></div>
|
||||
<div class="stripe-bar loop-stripe-reverse"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="flex w-full absolute bottom-0 left-0 right-0"
|
||||
style="z-index: 2;"
|
||||
>
|
||||
<StripeBar className="my-2 " size="100px"></StripeBar>
|
||||
<StripeBar className="my-2 -scale-x-100 " size="100px"></StripeBar>
|
||||
<div
|
||||
class="absolute top-0 left-0 bottom-0 right-0 flex items-center justify-center text-center"
|
||||
>
|
||||
<div class="p-1 bg-black rounded-lg w-full">
|
||||
<div class="bordered-red bg-black p-2 w-full text-primary">
|
||||
<InfiniteScroll speed={100} gap={48} direction="right">
|
||||
{#snippet children()}
|
||||
<div class="flex flex-col text-center px-4">
|
||||
<b class="text-3xl" style="line-height: 0.8;">EARTHQUAKE</b>
|
||||
</div>
|
||||
{/snippet}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
</div>
|
||||
<div class="stripe bottom-0">
|
||||
<div class="stripe-wrapper">
|
||||
<div class="stripe-bar loop-stripe"></div>
|
||||
<div class="stripe-bar loop-stripe"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import "../styles/components/HexGrid.css";
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
let {
|
||||
|
|
@ -8,7 +7,7 @@
|
|||
variant = "pointy",
|
||||
hexWidth,
|
||||
hexHeight,
|
||||
gap = 4,
|
||||
gap = 4
|
||||
}: {
|
||||
children: Snippet;
|
||||
className?: string;
|
||||
|
|
@ -39,12 +38,10 @@
|
|||
|
||||
if (!isFlat) {
|
||||
// Pointy (Variant 1)
|
||||
const rowOffsetTop = gap + -20;
|
||||
const rowOffsetTop = -14;
|
||||
const itemFullWidth = w + gap;
|
||||
|
||||
let maxCols = Math.floor(
|
||||
(containerWidth + gap) / itemFullWidth,
|
||||
);
|
||||
let maxCols = Math.floor((containerWidth + gap) / itemFullWidth);
|
||||
if (maxCols < 1) maxCols = 1;
|
||||
|
||||
let isOffset = false;
|
||||
|
|
@ -81,18 +78,21 @@
|
|||
|
||||
let totalHeight = 0;
|
||||
if (currentCol > 0) {
|
||||
totalHeight = currentRow * (h + rowOffsetTop) + h;
|
||||
totalHeight =
|
||||
currentRow * (h + rowOffsetTop) + h;
|
||||
} else {
|
||||
totalHeight = (currentRow - 1) * (h + rowOffsetTop) + h;
|
||||
totalHeight =
|
||||
(currentRow - 1) * (h + rowOffsetTop) +
|
||||
h;
|
||||
}
|
||||
node.style.height = `${totalHeight}px`;
|
||||
|
||||
} else {
|
||||
// Flat (Variant 2)
|
||||
const colAdvanceX = w * 0.75 + gap;
|
||||
const rowAdvanceY = h + gap;
|
||||
|
||||
let maxCols =
|
||||
Math.floor((containerWidth - w) / colAdvanceX) + 1;
|
||||
let maxCols = Math.floor((containerWidth - w) / colAdvanceX) + 1;
|
||||
if (containerWidth < w) maxCols = 1;
|
||||
|
||||
let currentCol = 0;
|
||||
|
|
@ -149,6 +149,6 @@
|
|||
}
|
||||
</script>
|
||||
|
||||
<div class="ews-hex-honeycomb {className}" use:honeycombLayout>
|
||||
<div class="hex-honeycomb {className}" use:honeycombLayout>
|
||||
{@render children()}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import "../styles/components/HexShape.css";
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -22,14 +21,11 @@
|
|||
</script>
|
||||
|
||||
<div
|
||||
class="ews-hex-shape {flatTop ? 'flat-top' : ''} {color} {clipContent
|
||||
class="hex-shape {flatTop ? 'flat-top' : ''} {color} {clipContent
|
||||
? 'clip-content'
|
||||
: ''} {className}"
|
||||
: ''} flex flex-col justify-center items-center {className}"
|
||||
>
|
||||
<div
|
||||
class="inner-content"
|
||||
style={`--ews-hex-padding: ${paddingContent}px;`}
|
||||
>
|
||||
<div class="inner-content" style={`--hex-padding: ${paddingContent}px;`}>
|
||||
{#if children}
|
||||
{@render children()}
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,138 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { onMount } from "svelte";
|
||||
|
||||
interface Props {
|
||||
/** Gap antar item (px) */
|
||||
gap?: number;
|
||||
/** Kecepatan scroll: pixel per detik */
|
||||
speed?: number;
|
||||
/** Arah scroll: 'left' = normal, 'right' = reverse */
|
||||
direction?: "left" | "right";
|
||||
/** Pause saat hover */
|
||||
pauseOnHover?: boolean;
|
||||
/** Class tambahan untuk wrapper luar */
|
||||
className?: string;
|
||||
children?: import("svelte").Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
gap = 24,
|
||||
speed = 80,
|
||||
direction = "left",
|
||||
pauseOnHover = false,
|
||||
className = "",
|
||||
children,
|
||||
}: Props = $props();
|
||||
|
||||
let containerEl: HTMLDivElement;
|
||||
let trackEl: HTMLDivElement;
|
||||
let animFrame: number;
|
||||
let offset = 0;
|
||||
let cloneCount = $state(1);
|
||||
let singleWidth = 0;
|
||||
let lastTime: number | null = null;
|
||||
let paused = false;
|
||||
|
||||
/**
|
||||
* Hitung berapa kali child perlu di-clone agar track selalu lebih lebar dari container,
|
||||
* termasuk gap antar item.
|
||||
*/
|
||||
function calcClones() {
|
||||
if (!containerEl || !trackEl) return;
|
||||
const containerW = containerEl.getBoundingClientRect().width;
|
||||
// Ambil lebar satu "set" original items (slot pertama)
|
||||
const firstSet = trackEl.querySelector<HTMLElement>(".scroll-set");
|
||||
if (!firstSet) return;
|
||||
singleWidth = firstSet.getBoundingClientRect().width + gap;
|
||||
// Kloning minimal agar total lebar > 2x container (agar seamless loop)
|
||||
const needed = Math.ceil((containerW * 2) / singleWidth) + 1;
|
||||
cloneCount = Math.max(needed, 2);
|
||||
}
|
||||
|
||||
function tick(ts: number) {
|
||||
if (!paused) {
|
||||
if (lastTime !== null) {
|
||||
const dt = (ts - lastTime) / 1000;
|
||||
offset += speed * dt;
|
||||
if (singleWidth > 0 && offset >= singleWidth) {
|
||||
offset -= singleWidth;
|
||||
}
|
||||
}
|
||||
lastTime = ts;
|
||||
} else {
|
||||
lastTime = ts; // reset agar tidak jump saat resume
|
||||
}
|
||||
|
||||
if (trackEl) {
|
||||
const sign = direction === "right" ? 1 : -1;
|
||||
trackEl.style.transform = `translateX(${sign * offset}px)`;
|
||||
}
|
||||
animFrame = requestAnimationFrame(tick);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
// Hitung clone setelah render awal
|
||||
calcClones();
|
||||
// Tunggu $state update (clones dirender), lalu hitung ulang
|
||||
requestAnimationFrame(() => {
|
||||
calcClones();
|
||||
animFrame = requestAnimationFrame(tick);
|
||||
});
|
||||
|
||||
const ro = new ResizeObserver(() => {
|
||||
calcClones();
|
||||
offset = 0;
|
||||
lastTime = null;
|
||||
});
|
||||
ro.observe(containerEl);
|
||||
|
||||
return () => {
|
||||
cancelAnimationFrame(animFrame);
|
||||
ro.disconnect();
|
||||
};
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div
|
||||
class="infinite-scroll-container {className}"
|
||||
bind:this={containerEl}
|
||||
onmouseenter={() => { if (pauseOnHover) paused = true; }}
|
||||
onmouseleave={() => { if (pauseOnHover) paused = false; }}
|
||||
>
|
||||
<div
|
||||
class="infinite-scroll-track"
|
||||
bind:this={trackEl}
|
||||
style="gap: {gap}px;"
|
||||
>
|
||||
<!--
|
||||
Render (1 + cloneCount) sets: index 0 adalah original,
|
||||
sisanya adalah clone agar container selalu penuh.
|
||||
-->
|
||||
{#each { length: 1 + cloneCount } as _, i}
|
||||
<div class="scroll-set" aria-hidden={i > 0 ? "true" : undefined}>
|
||||
{@render children?.()}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.infinite-scroll-container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.infinite-scroll-track {
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
.scroll-set {
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -23,21 +23,21 @@
|
|||
networks = [
|
||||
{
|
||||
id: "network-1",
|
||||
name: "NET 1",
|
||||
name: "Network 1",
|
||||
active_channel: 2,
|
||||
inactive_channel: 14,
|
||||
total_channel: 16,
|
||||
},
|
||||
{
|
||||
id: "network-2",
|
||||
name: "NET 2",
|
||||
name: "Network 2",
|
||||
active_channel: 22,
|
||||
inactive_channel: 7,
|
||||
total_channel: 29,
|
||||
},
|
||||
{
|
||||
id: "network-3",
|
||||
name: "NET 3",
|
||||
name: "Network 3",
|
||||
active_channel: 12,
|
||||
inactive_channel: 5,
|
||||
total_channel: 17,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<script lang="ts">
|
||||
import type { Snippet } from "svelte";
|
||||
import StripeBar from "./StripeBar.svelte";
|
||||
|
||||
let {
|
||||
show = $bindable(false),
|
||||
|
|
@ -24,14 +23,15 @@
|
|||
{#if show}
|
||||
<div class="settings-modal-overlay" onclick={close} role="presentation">
|
||||
<div
|
||||
class="settings-modal ews-card ews-card-red {variant === 'large'
|
||||
? '!w-11/12 !max-w-4xl'
|
||||
: ''}"
|
||||
class="settings-modal ews-card bordered-red {variant === 'large' ? '!w-11/12 !max-w-4xl' : ''}"
|
||||
onclick={(e) => e.stopPropagation()}
|
||||
role="presentation"
|
||||
>
|
||||
<div class="ews-card-header bordered-red-bottom overflow-hidden">
|
||||
<StripeBar></StripeBar>
|
||||
<div class="stripe-wrapper">
|
||||
<div class="stripe-bar loop-stripe-reverse anim-duration-20"></div>
|
||||
<div class="stripe-bar loop-stripe-reverse anim-duration-20"></div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 bottom-0 left-0 right-0 flex justify-between items-center px-3"
|
||||
>
|
||||
|
|
@ -45,11 +45,7 @@
|
|||
>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ews-card-content {variant === 'large'
|
||||
? 'p-4'
|
||||
: 'p-1 lg:p-2 p-4'} {contentClass}"
|
||||
>
|
||||
<div class="ews-card-content {variant === 'large' ? 'p-4' : 'p-1 lg:p-2 p-4'} {contentClass}">
|
||||
{@render children()}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,134 +0,0 @@
|
|||
<script lang="ts">
|
||||
interface Props {
|
||||
min: number;
|
||||
max: number;
|
||||
step: number;
|
||||
low: number;
|
||||
high: number;
|
||||
}
|
||||
|
||||
let { min, max, step, low = $bindable(), high = $bindable() }: Props = $props();
|
||||
|
||||
let sliderElement: HTMLDivElement;
|
||||
|
||||
function handlePointerDown(e: PointerEvent, type: 'low' | 'high') {
|
||||
const moveHandler = (moveEvent: PointerEvent) => {
|
||||
const rect = sliderElement.getBoundingClientRect();
|
||||
let percentage = (moveEvent.clientX - rect.left) / rect.width;
|
||||
percentage = Math.max(0, Math.min(1, percentage));
|
||||
|
||||
let newValue = min + percentage * (max - min);
|
||||
newValue = Math.round(newValue / step) * step;
|
||||
|
||||
if (type === 'low') {
|
||||
low = Math.min(newValue, high - step);
|
||||
} else {
|
||||
high = Math.max(newValue, low + step);
|
||||
}
|
||||
};
|
||||
|
||||
const upHandler = () => {
|
||||
window.removeEventListener('pointermove', moveHandler);
|
||||
window.removeEventListener('pointerup', upHandler);
|
||||
};
|
||||
|
||||
window.addEventListener('pointermove', moveHandler);
|
||||
window.addEventListener('pointerup', upHandler);
|
||||
|
||||
// Immediate move to click position
|
||||
moveHandler(e);
|
||||
}
|
||||
|
||||
let lowPercent = $derived(((low - min) / (max - min)) * 100);
|
||||
let highPercent = $derived(((high - min) / (max - min)) * 100);
|
||||
</script>
|
||||
|
||||
<div class="range-slider-container">
|
||||
<div bind:this={sliderElement} class="range-slider-track">
|
||||
<div
|
||||
class="range-slider-fill"
|
||||
style="left: {lowPercent}%; right: {100 - highPercent}%"
|
||||
></div>
|
||||
|
||||
<div
|
||||
class="range-slider-handle"
|
||||
style="left: {lowPercent}%"
|
||||
onpointerdown={(e) => handlePointerDown(e, 'low')}
|
||||
role="slider"
|
||||
aria-valuenow={low}
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="handle-glow"></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="range-slider-handle"
|
||||
style="left: {highPercent}%"
|
||||
onpointerdown={(e) => handlePointerDown(e, 'high')}
|
||||
role="slider"
|
||||
aria-valuenow={high}
|
||||
tabindex="0"
|
||||
>
|
||||
<div class="handle-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.range-slider-container {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.range-slider-track {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(255, 165, 0, 0.1);
|
||||
border: 1px solid rgba(255, 165, 0, 0.2);
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.range-slider-fill {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
background: var(--orange);
|
||||
box-shadow: 0 0 10px var(--orange);
|
||||
}
|
||||
|
||||
.range-slider-handle {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: black;
|
||||
border: 2px solid var(--orange);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
cursor: pointer;
|
||||
z-index: 2;
|
||||
transition: transform 0.1s ease;
|
||||
}
|
||||
|
||||
.range-slider-handle:hover {
|
||||
transform: translate(-50%, -50%) rotate(45deg) scale(1.2);
|
||||
}
|
||||
|
||||
.handle-glow {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--orange);
|
||||
opacity: 0.3;
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.range-slider-handle:active {
|
||||
background: var(--orange);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import "../styles/components/RibLayout.css";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
|
|
@ -8,31 +7,13 @@
|
|||
nodeContent,
|
||||
connectorContent,
|
||||
getHref,
|
||||
maxBranches,
|
||||
}: {
|
||||
items: any[];
|
||||
maxBranches?: number;
|
||||
nodeContent: Snippet<
|
||||
[
|
||||
any,
|
||||
{
|
||||
side: "left" | "right";
|
||||
branchIndex: number;
|
||||
index: number;
|
||||
delay: number;
|
||||
},
|
||||
]
|
||||
[any, { side: "left" | "right"; branchIndex: number; index: number; delay: number }]
|
||||
>;
|
||||
connectorContent?: Snippet<
|
||||
[
|
||||
any,
|
||||
{
|
||||
side: "left" | "right";
|
||||
branchIndex: number;
|
||||
index: number;
|
||||
delay: number;
|
||||
},
|
||||
]
|
||||
[any, { side: "left" | "right"; branchIndex: number; index: number; delay: number }]
|
||||
>;
|
||||
getHref?: (item: any) => string;
|
||||
} = $props();
|
||||
|
|
@ -41,15 +22,10 @@
|
|||
let windowWidth = $state(0);
|
||||
|
||||
function getBranchCount(width: number): number {
|
||||
let count = 5;
|
||||
if (width < 768) count = 1;
|
||||
else if (width < 1024) count = 2;
|
||||
else if (width < 1300) count = 4;
|
||||
|
||||
if (maxBranches !== undefined) {
|
||||
return Math.min(count, maxBranches);
|
||||
}
|
||||
return count;
|
||||
if (width < 768) return 1;
|
||||
if (width < 1024) return 2;
|
||||
if (width < 1300) return 4;
|
||||
return 5;
|
||||
}
|
||||
|
||||
function handleResize() {
|
||||
|
|
@ -81,76 +57,62 @@
|
|||
});
|
||||
</script>
|
||||
|
||||
<div class="ews-rib-layout">
|
||||
<div
|
||||
class="inline-flex h-auto justify-center gap-4 w-full px-4 overflow-none relative"
|
||||
>
|
||||
{#each chunkedItems as branchItems, branchIndex}
|
||||
<div class="ews-rib-layout__branch">
|
||||
<div class="relative py-4 lg:py-10 flex flex-col gap-4">
|
||||
<!-- Central Spine -->
|
||||
<div
|
||||
class="ews-rib-layout__spine line-central"
|
||||
class="absolute h-auto left-1/2 top-0 bottom-0 w-1 bg-primary transform -translate-x-1/2 z-0 line-central"
|
||||
style="animation-delay: {branchIndex * 200}ms;"
|
||||
></div>
|
||||
|
||||
<!-- Iterate in pairs essentially by grouping them two by two -->
|
||||
<div class="ews-rib-layout__grid">
|
||||
<div class="grid grid-cols-2 relative z-10">
|
||||
{#each branchItems as item, index}
|
||||
{@const side = index % 2 === 0 ? "left" : "right"}
|
||||
{@const delay = (branchIndex + 1) * (index + 1) * 10}
|
||||
|
||||
|
||||
<svelte:element
|
||||
this={getHref ? "a" : "div"}
|
||||
href={getHref?.(item)}
|
||||
class="ews-rib-layout__node {side === 'left'
|
||||
? 'ews-rib-layout__node--left node'
|
||||
: 'ews-rib-layout__node--right node-flip'}"
|
||||
class="{side === 'left'
|
||||
? 'flex flex-grow justify-end items-center relative pr-0 col-start-1 node'
|
||||
: 'flex justify-start items-center relative pl-0 col-start-2 w-auto node-flip'}"
|
||||
>
|
||||
{#if side === "left"}
|
||||
<div class="ews-rib-layout__node-content parent-node">
|
||||
<div class="relative flex parent-node">
|
||||
{@render nodeContent(item, { side, branchIndex, index, delay })}
|
||||
</div>
|
||||
<div
|
||||
class="ews-rib-layout__connector-wrapper ews-rib-layout__connector-wrapper--left line"
|
||||
>
|
||||
<div class="w-24 flex justify-end relative line">
|
||||
<div
|
||||
class="ews-rib-layout__connector-line line-node"
|
||||
class="h-[2px] w-24 bg-primary z-0 line-node"
|
||||
style="animation-delay: {delay}ms;"
|
||||
></div>
|
||||
{#if connectorContent}
|
||||
<div
|
||||
class="ews-rib-layout__connector-text ews-rib-layout__connector-text--left fade-in animation-delay-5"
|
||||
class="font-bold text-xs uppercase absolute left-2 z-10 text-left top-1 fade-in animation-delay-5 text-primary"
|
||||
>
|
||||
{@render connectorContent(item, {
|
||||
side,
|
||||
branchIndex,
|
||||
index,
|
||||
delay,
|
||||
})}
|
||||
{@render connectorContent(item, { side, branchIndex, index, delay })}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="ews-rib-layout__connector-wrapper ews-rib-layout__connector-wrapper--right"
|
||||
>
|
||||
<div class="w-24 flex justify-start relative">
|
||||
<div
|
||||
class="ews-rib-layout__connector-line line-node"
|
||||
class="h-[2px] w-24 bg-primary z-0 line-node"
|
||||
style="animation-delay: {delay}ms;"
|
||||
></div>
|
||||
{#if connectorContent}
|
||||
<div
|
||||
class="ews-rib-layout__connector-text ews-rib-layout__connector-text--right fade-in animation-delay-5"
|
||||
class="font-bold text-xs uppercase absolute z-10 right-2 text-right top-1 fade-in animation-delay-5 text-primary"
|
||||
>
|
||||
{@render connectorContent(item, {
|
||||
side,
|
||||
branchIndex,
|
||||
index,
|
||||
delay,
|
||||
})}
|
||||
{@render connectorContent(item, { side, branchIndex, index, delay })}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div
|
||||
class="ews-rib-layout__node-content ews-rib-layout__node-content--right parent-node flip"
|
||||
>
|
||||
<div class="relative flex parent-node flip">
|
||||
{@render nodeContent(item, { side, branchIndex, index, delay })}
|
||||
</div>
|
||||
{/if}
|
||||
|
|
|
|||
|
|
@ -1,71 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { serialStore } from "$lib/stores/serialStore";
|
||||
import { fade } from "svelte/transition";
|
||||
import StripeBar from "./StripeBar.svelte";
|
||||
|
||||
let status = $derived($serialStore.status);
|
||||
let error = $derived($serialStore.error);
|
||||
|
||||
const statusProps = {
|
||||
connected: {
|
||||
color: "green",
|
||||
label: "LINKED",
|
||||
loop: true,
|
||||
reverse: false,
|
||||
},
|
||||
disconnected: {
|
||||
color: "",
|
||||
label: "LINK ESP32",
|
||||
loop: false,
|
||||
reverse: false,
|
||||
},
|
||||
unsupported: {
|
||||
color: "red",
|
||||
label: "NO SERIAL",
|
||||
loop: false,
|
||||
reverse: false,
|
||||
},
|
||||
connecting: {
|
||||
color: "blue",
|
||||
label: "LINKING...",
|
||||
loop: true,
|
||||
reverse: true,
|
||||
},
|
||||
};
|
||||
|
||||
async function handleConnect() {
|
||||
if (status === "connected") {
|
||||
await serialStore.disconnect();
|
||||
} else {
|
||||
await serialStore.connect();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="flex flex-col items-start no-snapshot">
|
||||
<button
|
||||
onclick={handleConnect}
|
||||
disabled={status === "unsupported" || status === "connecting"}
|
||||
class="ews-btn ews-btn-primary w-full"
|
||||
>
|
||||
{statusProps[status].label}
|
||||
</button>
|
||||
|
||||
{#if status === "connected"}
|
||||
<button
|
||||
onclick={() => serialStore.testConnection()}
|
||||
class="ews-btn ews-btn-danger w-full"
|
||||
>
|
||||
TEST BEEP / HEARTBEAT
|
||||
</button>
|
||||
{/if}
|
||||
|
||||
{#if error}
|
||||
<div
|
||||
transition:fade
|
||||
class="bg-red-950/80 border border-red-500/50 text-red-400 px-3 py-1 text-[10px] font-mono uppercase"
|
||||
>
|
||||
ERROR: {error}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
@ -1,5 +1,4 @@
|
|||
<script lang="ts">
|
||||
import "../styles/components/StripeBar.css";
|
||||
import type { Snippet } from "svelte";
|
||||
|
||||
interface Props {
|
||||
|
|
@ -25,20 +24,20 @@
|
|||
}: Props = $props();
|
||||
</script>
|
||||
|
||||
<div style="overflow: hidden;" class={className}>
|
||||
<div class="overflow-hidden {className}">
|
||||
<div
|
||||
class="ews-stripe-wrapper {orientation}"
|
||||
class="stripe-wrapper {orientation}"
|
||||
style="{orientation == 'vertical' ? 'width' : 'height'}: {size};"
|
||||
>
|
||||
<div
|
||||
class="ews-stripe-bar {color} {orientation} {loop
|
||||
class="stripe-bar {color} {orientation} {loop
|
||||
? 'loop-stripe'
|
||||
: ''}{orientation ? '-' + orientation : ''} {reverse
|
||||
? 'reverse'
|
||||
: ''} anim-duration-{duration}"
|
||||
></div>
|
||||
<div
|
||||
class="ews-stripe-bar {color} {orientation} {loop
|
||||
class="stripe-bar {color} {orientation} {loop
|
||||
? 'loop-stripe'
|
||||
: ''}{orientation ? '-' + orientation : ''} {reverse
|
||||
? 'reverse'
|
||||
|
|
|
|||
|
|
@ -1,718 +0,0 @@
|
|||
<script module lang="ts">
|
||||
export type ThreadTone = "normal" | "danger" | "muted";
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
// import { fade } from "svelte/transition";
|
||||
|
||||
type ThreadVariant = "spine" | "threaded";
|
||||
|
||||
interface ThreadItem {
|
||||
id: string;
|
||||
label: string;
|
||||
level?: number;
|
||||
tone?: ThreadTone;
|
||||
collapsed?: boolean;
|
||||
children?: ThreadItem[];
|
||||
}
|
||||
|
||||
interface Props {
|
||||
items?: ThreadItem[];
|
||||
variant?: ThreadVariant;
|
||||
className?: string;
|
||||
nodeWidth?: number;
|
||||
rowHeight?: number;
|
||||
indent?: number;
|
||||
tone?: "neutral" | "primary" | "danger";
|
||||
gap?: number;
|
||||
expandable?: boolean;
|
||||
animated?: boolean;
|
||||
collapseAll?: boolean;
|
||||
onToggle?: (id: string, collapsed: boolean) => void;
|
||||
}
|
||||
|
||||
const defaultItemsByVariant: Record<ThreadVariant, ThreadItem[]> = {
|
||||
spine: [
|
||||
{
|
||||
id: "spine-1",
|
||||
label: "Primary Alert Message",
|
||||
level: 1,
|
||||
tone: "normal",
|
||||
},
|
||||
{
|
||||
id: "spine-2",
|
||||
label: "Operator Verification Note",
|
||||
level: 2,
|
||||
tone: "muted",
|
||||
},
|
||||
{
|
||||
id: "spine-3",
|
||||
label: "Follow-up Action Detail",
|
||||
level: 3,
|
||||
tone: "muted",
|
||||
},
|
||||
],
|
||||
threaded: [
|
||||
{
|
||||
id: "thread-1",
|
||||
label: "Primary Alert Message",
|
||||
level: 1,
|
||||
tone: "normal",
|
||||
children: [
|
||||
{
|
||||
id: "thread-1-1",
|
||||
label: "Operator Verification Note",
|
||||
level: 2,
|
||||
tone: "muted",
|
||||
},
|
||||
{
|
||||
id: "thread-1-2",
|
||||
label: "Follow-up Action Detail",
|
||||
level: 3,
|
||||
tone: "muted",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "thread-2",
|
||||
label: "Secondary Discussion",
|
||||
level: 1,
|
||||
tone: "muted",
|
||||
children: [
|
||||
{
|
||||
id: "thread-2-1",
|
||||
label: "Nested Reply A",
|
||||
level: 2,
|
||||
tone: "normal",
|
||||
},
|
||||
{
|
||||
id: "thread-2-2",
|
||||
label: "Nested Reply B",
|
||||
level: 2,
|
||||
tone: "muted",
|
||||
children: [
|
||||
{
|
||||
id: "thread-2-2-1",
|
||||
label: "Deep Nested Reply",
|
||||
level: 3,
|
||||
tone: "muted",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "thread-3",
|
||||
label: "Final Comment",
|
||||
level: 1,
|
||||
tone: "muted",
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
let {
|
||||
items = [],
|
||||
variant = "spine",
|
||||
className = "",
|
||||
nodeWidth = 280,
|
||||
rowHeight = 42,
|
||||
indent = 21,
|
||||
tone = "primary",
|
||||
gap = 16,
|
||||
expandable = true,
|
||||
animated = true,
|
||||
collapseAll = false,
|
||||
onToggle,
|
||||
}: Props = $props();
|
||||
|
||||
let toggledIds = $state(new Set<string>());
|
||||
let currentToggleId: string | null = $state(null);
|
||||
|
||||
function isNodeCollapsed(id: string): boolean {
|
||||
if (!expandable) {
|
||||
return false;
|
||||
}
|
||||
const defaultCollapsed = !collapseAll;
|
||||
const toggled = toggledIds.has(id);
|
||||
return defaultCollapsed ? !toggled : toggled;
|
||||
}
|
||||
|
||||
function toggleCollapse(id: string) {
|
||||
currentToggleId = id;
|
||||
const newToggled = new Set(toggledIds);
|
||||
if (newToggled.has(id)) {
|
||||
newToggled.delete(id);
|
||||
} else {
|
||||
newToggled.add(id);
|
||||
}
|
||||
toggledIds = newToggled;
|
||||
onToggle?.(id, isNodeCollapsed(id));
|
||||
}
|
||||
|
||||
function flattenItems(
|
||||
itemList: ThreadItem[],
|
||||
parentCollapsed = false,
|
||||
): (ThreadItem & { parentCollapsed?: boolean })[] {
|
||||
const result: (ThreadItem & { parentCollapsed?: boolean })[] = [];
|
||||
for (const item of itemList) {
|
||||
const isCollapsed = isNodeCollapsed(item.id) || parentCollapsed;
|
||||
result.push({ ...item, parentCollapsed });
|
||||
if (item.children && item.children.length > 0 && !isCollapsed) {
|
||||
result.push(...flattenItems(item.children, isCollapsed));
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
function hasChildren(item: ThreadItem): boolean {
|
||||
return !!(item.children && item.children.length > 0);
|
||||
}
|
||||
|
||||
function getChildCount(item: ThreadItem): number {
|
||||
if (!item.children || item.children.length === 0) return 0;
|
||||
let count = item.children.length;
|
||||
for (const child of item.children) {
|
||||
count += getChildCount(child);
|
||||
}
|
||||
return count;
|
||||
}
|
||||
|
||||
const rowStep = $derived(rowHeight + gap);
|
||||
const rootX = $derived(indent);
|
||||
|
||||
const resolvedItems = $derived.by(() =>
|
||||
items.length > 0 ? items : defaultItemsByVariant[variant],
|
||||
);
|
||||
|
||||
const normalizedItems = $derived.by(() => {
|
||||
const items = resolvedItems.map((item, index) => ({
|
||||
id: item.id || `threaded-item-${index + 1}`,
|
||||
label: item.label || `Item ${index + 1}`,
|
||||
level: Math.max(1, Math.floor(item.level ?? 1)),
|
||||
tone: item.tone ?? ("muted" as ThreadTone),
|
||||
collapsed: item.collapsed ?? false,
|
||||
children: item.children,
|
||||
}));
|
||||
return flattenItems(items);
|
||||
});
|
||||
|
||||
const maxLevel = $derived.by(() =>
|
||||
normalizedItems.reduce((acc, item) => Math.max(acc, item.level ?? 1), 1),
|
||||
);
|
||||
|
||||
const canvasHeight = $derived.by(() => {
|
||||
if (normalizedItems.length === 0) return rowHeight;
|
||||
return normalizedItems.length * rowStep - gap;
|
||||
});
|
||||
|
||||
const canvasWidth = $derived.by(() => getNodeX(maxLevel) + nodeWidth + 8);
|
||||
|
||||
function getDepthX(depth: number) {
|
||||
if (depth <= 0) return rootX;
|
||||
return rootX + depth * indent;
|
||||
}
|
||||
|
||||
function getNodeX(level: number) {
|
||||
return getDepthX(level);
|
||||
}
|
||||
|
||||
function getRowCenter(index: number) {
|
||||
return index * rowStep + rowHeight / 2;
|
||||
}
|
||||
|
||||
function getHorizontalStartX(level: number) {
|
||||
if (variant === "spine") return rootX;
|
||||
return getDepthX(level - 1);
|
||||
}
|
||||
|
||||
function getThreadedVerticalX(currentLevel: number, nextLevel: number) {
|
||||
if (nextLevel > currentLevel) return getDepthX(currentLevel);
|
||||
if (nextLevel === currentLevel) return getDepthX(currentLevel - 1);
|
||||
return getDepthX(nextLevel - 1);
|
||||
}
|
||||
|
||||
function getParentIndex(index: number) {
|
||||
const currentLevel = normalizedItems[index].level ?? 0;
|
||||
for (let i = index - 1; i >= 0; i--) {
|
||||
if ((normalizedItems[i].level ?? 0) < currentLevel) {
|
||||
return i;
|
||||
}
|
||||
}
|
||||
return -1;
|
||||
}
|
||||
|
||||
function getChildIndex(parentId: string, childId: string): number {
|
||||
const parentIndex = normalizedItems.findIndex((i) => i.id === parentId);
|
||||
if (parentIndex === -1) return -1;
|
||||
const childIndex = normalizedItems[parentIndex].children?.findIndex(
|
||||
(i) => i.id === childId,
|
||||
);
|
||||
if (childIndex === -1) return -1;
|
||||
return childIndex ?? -1;
|
||||
}
|
||||
|
||||
function animateLine(
|
||||
node: SVGLineElement,
|
||||
params = { duration: 350, delay: 0 },
|
||||
) {
|
||||
const length = Math.hypot(
|
||||
(node.x2?.baseVal?.value ?? 0) - (node.x1?.baseVal?.value ?? 0),
|
||||
(node.y2?.baseVal?.value ?? 0) - (node.y1?.baseVal?.value ?? 0),
|
||||
);
|
||||
|
||||
node.style.strokeDasharray = String(length);
|
||||
node.style.strokeDashoffset = String(length);
|
||||
node.style.opacity = "0";
|
||||
|
||||
const anim = node.animate(
|
||||
[
|
||||
{ strokeDashoffset: length, opacity: 0 },
|
||||
{ strokeDashoffset: 0, opacity: 1 },
|
||||
],
|
||||
{
|
||||
duration: params.duration,
|
||||
delay: params.delay,
|
||||
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
||||
fill: "forwards",
|
||||
},
|
||||
);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
anim.cancel();
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function animatePath(
|
||||
node: SVGPathElement,
|
||||
params = { duration: 350, delay: 0 },
|
||||
) {
|
||||
if (!animated) {
|
||||
return;
|
||||
}
|
||||
const targetD = node.getAttribute("data-target-d");
|
||||
if (targetD) {
|
||||
const timeOut = setTimeout(() => {
|
||||
node.setAttribute("d", targetD);
|
||||
}, params.delay);
|
||||
return {
|
||||
destroy() {
|
||||
clearTimeout(timeOut);
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
const length = node.getTotalLength();
|
||||
|
||||
node.style.strokeDasharray = String(length);
|
||||
node.style.strokeDashoffset = String(length);
|
||||
node.style.opacity = "0";
|
||||
|
||||
const anim = node.animate(
|
||||
[
|
||||
{ strokeDashoffset: length, opacity: 0 },
|
||||
{ strokeDashoffset: 0, opacity: 1 },
|
||||
],
|
||||
{
|
||||
duration: params.duration,
|
||||
delay: params.delay,
|
||||
easing: "cubic-bezier(0.4, 0, 0.2, 1)",
|
||||
fill: "forwards",
|
||||
},
|
||||
);
|
||||
|
||||
const timeOut = setTimeout(() => {
|
||||
node.classList.add("smooth-line");
|
||||
node.removeAttribute("style");
|
||||
}, params.delay + params.duration);
|
||||
|
||||
return {
|
||||
destroy() {
|
||||
anim.cancel();
|
||||
clearTimeout(timeOut);
|
||||
},
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="ews-threaded-comments {tone} {className}">
|
||||
<div class="threaded-scroll">
|
||||
<div
|
||||
class="threaded-canvas"
|
||||
style:height={`${canvasHeight}px`}
|
||||
style:width={`100%`}
|
||||
>
|
||||
<svg
|
||||
class="threaded-connectors"
|
||||
height="100%"
|
||||
width="100%"
|
||||
viewBox={`0 0 100% ${canvasHeight}`}
|
||||
role="presentation"
|
||||
aria-hidden="true"
|
||||
>
|
||||
{#if normalizedItems.length > 1 && variant === "spine"}
|
||||
<path
|
||||
class="connector-line vertical-main smooth-line"
|
||||
d={`M 2,${rowHeight / 2} L 2,${(normalizedItems.length - 1) * rowStep + rowHeight / 2}`}
|
||||
/>
|
||||
{#each normalizedItems as item, index (`${item.id}-horizontal`)}
|
||||
{@const toggleIndex = normalizedItems.findIndex(
|
||||
(i) => i.id === currentToggleId,
|
||||
)}
|
||||
{@const parentIndex = getParentIndex(index)}
|
||||
{@const childIndex =
|
||||
getParentIndex(index) > -1
|
||||
? getChildIndex(normalizedItems[parentIndex].id, item.id)
|
||||
: 0}
|
||||
{@const delay =
|
||||
50 * Math.max(parentIndex + childIndex - toggleIndex, 1)}
|
||||
<path
|
||||
class="connector-line horizontal-1 {!animated
|
||||
? 'smooth-line'
|
||||
: ''}"
|
||||
d={`M 2 ${getRowCenter(index)} H ${getNodeX(item.level ?? 1) + 2}`}
|
||||
data-level={item.level}
|
||||
fill="none"
|
||||
use:animatePath={{
|
||||
duration: 200,
|
||||
delay: delay,
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if variant === "threaded"}
|
||||
<path
|
||||
class="connector-line vertical-main smooth-line"
|
||||
d={`M 2,${rowHeight / 2} L 2,${(normalizedItems.length - 1) * rowStep + rowHeight / 2}`}
|
||||
/>
|
||||
|
||||
{#each normalizedItems as item, index (`${item.id}-vertical`)}
|
||||
{#if index > 0 && getParentIndex(index) >= 0}
|
||||
{@const toggleIndex = normalizedItems.findIndex(
|
||||
(i) => i.id === currentToggleId,
|
||||
)}
|
||||
{@const parentIndex = getParentIndex(index)}
|
||||
{@const childIndex =
|
||||
getParentIndex(index) > -1
|
||||
? getChildIndex(normalizedItems[parentIndex].id, item.id)
|
||||
: 0}
|
||||
{@const delay =
|
||||
50 * Math.max(parentIndex + childIndex - toggleIndex, 1)}
|
||||
<path
|
||||
d="M {((item.level ?? 1) - 1) * rootX + 2}, {getRowCenter(
|
||||
index,
|
||||
) -
|
||||
rowStep * (index - getParentIndex(index))} L {((item.level ??
|
||||
1) -
|
||||
1) *
|
||||
rootX +
|
||||
2}, {getRowCenter(index + 1) - rowStep}"
|
||||
fill="none"
|
||||
class="connector-line vertical-2 {!animated
|
||||
? 'smooth-line'
|
||||
: ''}"
|
||||
use:animatePath={{
|
||||
duration: 200,
|
||||
delay: delay,
|
||||
}}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
{#each normalizedItems as item, index (`${item.id}-horizontal`)}
|
||||
{@const toggleIndex = normalizedItems.findIndex(
|
||||
(i) => i.id === currentToggleId,
|
||||
)}
|
||||
|
||||
{@const parentIndex = getParentIndex(index)}
|
||||
{@const childIndex =
|
||||
getParentIndex(index) > -1
|
||||
? getChildIndex(normalizedItems[parentIndex].id, item.id)
|
||||
: 0}
|
||||
{@const delay =
|
||||
100 * Math.max(parentIndex + childIndex - toggleIndex, 1)}
|
||||
|
||||
<path
|
||||
class="connector-line horizontal-2 {!animated
|
||||
? 'smooth-line'
|
||||
: ''}"
|
||||
d={`M ${((item.level ?? 1) - 1) * rootX + 2} ${getRowCenter(index)} H ${getNodeX(item.level ?? 1) + 2}`}
|
||||
data-level={item.level}
|
||||
fill="none"
|
||||
use:animatePath={{
|
||||
duration: 200,
|
||||
delay: delay,
|
||||
}}
|
||||
/>
|
||||
{/each}
|
||||
{/if}
|
||||
</svg>
|
||||
|
||||
{#each normalizedItems as item, index (item.id)}
|
||||
{@const isCollapsed = isNodeCollapsed(item.id)}
|
||||
{@const hasKids = hasChildren(item)}
|
||||
{@const childCount = getChildCount(item)}
|
||||
<div
|
||||
class="threaded-node-wrap"
|
||||
style:top={`${index * rowStep}px`}
|
||||
style:left={`${getNodeX(item.level ?? 1)}px`}
|
||||
style:height={`${rowHeight}px`}
|
||||
style:right={"0"}
|
||||
class:collapsed={isCollapsed}
|
||||
class:has-children={hasKids && expandable}
|
||||
>
|
||||
<div
|
||||
class="threaded-node {item.tone}"
|
||||
class:is-collapsed={isCollapsed}
|
||||
>
|
||||
{#if expandable && hasKids}
|
||||
<button
|
||||
class="expand-toggle"
|
||||
onclick={() => toggleCollapse(item.id)}
|
||||
aria-label={isCollapsed ? "Expand" : "Collapse"}
|
||||
>
|
||||
<span class="toggle-icon" class:collapsed={isCollapsed}>
|
||||
<svg viewBox="0 0 16 16" fill="currentColor">
|
||||
<path
|
||||
d="M4.5 5.5l3.5 3.5 3.5-3.5"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
fill="none"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
{#if isCollapsed}
|
||||
<span class="child-count">{childCount}</span>
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
<span class="node-label">{item.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.ews-threaded-comments {
|
||||
--line-color: rgba(var(--glow-rgb), 0.85);
|
||||
--line-glow: rgba(var(--glow-rgb), 0.5);
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ews-threaded-comments.neutral {
|
||||
--line-color: rgba(226, 231, 236, 0.92);
|
||||
--line-glow: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.ews-threaded-comments.primary {
|
||||
--line-color: rgba(var(--glow-rgb), 0.88);
|
||||
--line-glow: rgba(var(--glow-rgb), 0.45);
|
||||
}
|
||||
|
||||
.ews-threaded-comments.danger {
|
||||
--line-color: rgba(var(--danger-glow-rgb), 0.9);
|
||||
--line-glow: rgba(var(--danger-glow-rgb), 0.45);
|
||||
}
|
||||
|
||||
.threaded-scroll {
|
||||
width: 100%;
|
||||
/* overflow-x: auto;
|
||||
overflow-y: hidden; */
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.threaded-canvas {
|
||||
position: relative;
|
||||
min-width: 100%;
|
||||
transition:
|
||||
height 0.25s ease,
|
||||
width 0.25s ease;
|
||||
}
|
||||
|
||||
.threaded-connectors {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.connector-line {
|
||||
stroke: var(--line-color);
|
||||
stroke-width: 2;
|
||||
filter: drop-shadow(0 0 2px var(--line-glow));
|
||||
/* transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); */
|
||||
opacity: 0;
|
||||
animation: fadeIn 0.5s ease forwards;
|
||||
|
||||
/* stroke-dasharray: 100;
|
||||
stroke-dashoffset: 100;
|
||||
animation: draw 1s linear forwards; */
|
||||
}
|
||||
|
||||
.connector-line.smooth-line {
|
||||
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
@keyframes draw {
|
||||
to {
|
||||
stroke-dashoffset: 0; /* Animate the offset to zero to reveal the path */
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.threaded-node-wrap {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
transition:
|
||||
opacity 0.25s ease,
|
||||
transform 0.25s ease,
|
||||
top 0.25s ease,
|
||||
left 0.25s ease;
|
||||
}
|
||||
|
||||
.threaded-node {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 14px;
|
||||
font-size: 0.7rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.08em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(36, 36, 36, 0.98),
|
||||
rgba(62, 62, 62, 0.98)
|
||||
);
|
||||
border: 1px solid rgba(255, 255, 255, 0.16);
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.65);
|
||||
color: #f4f4f4;
|
||||
}
|
||||
|
||||
.threaded-node.normal {
|
||||
color: var(--text-color);
|
||||
border-color: rgba(var(--glow-rgb), 0.55);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(var(--glow-rgb), 0.18),
|
||||
0 0 8px rgba(var(--glow-rgb), 0.12);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(var(--glow-rgb), 0.1),
|
||||
rgba(var(--glow-rgb), 0.1)
|
||||
);
|
||||
}
|
||||
|
||||
.threaded-node.danger {
|
||||
color: var(--danger-text-color);
|
||||
border-color: rgba(var(--danger-glow-rgb), 0.7);
|
||||
box-shadow:
|
||||
inset 0 0 0 1px rgba(var(--danger-glow-rgb), 0.2),
|
||||
0 0 8px rgba(var(--danger-glow-rgb), 0.14);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(var(--danger-glow-rgb), 0.1),
|
||||
rgba(var(--danger-glow-rgb), 0.1)
|
||||
);
|
||||
}
|
||||
|
||||
.threaded-node.muted {
|
||||
border-color: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.expand-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 2px;
|
||||
margin-right: 8px;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
transition: all 0.2s ease;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.expand-toggle:hover {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
border-color: rgba(255, 255, 255, 0.25);
|
||||
}
|
||||
|
||||
.toggle-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-icon svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
.toggle-icon.collapsed {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
|
||||
.child-count {
|
||||
font-size: 0.6rem;
|
||||
font-weight: 600;
|
||||
padding: 0 4px;
|
||||
background: rgba(var(--glow-rgb), 0.3);
|
||||
border-radius: 8px;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.node-label {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* .threaded-node-wrap.collapsed {
|
||||
opacity: 0.5;
|
||||
} */
|
||||
|
||||
.threaded-node.is-collapsed {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ews-threaded-comments:not(.primary) .expand-toggle {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.ews-threaded-comments.neutral .child-count {
|
||||
background: rgba(226, 231, 236, 0.2);
|
||||
}
|
||||
|
||||
.ews-threaded-comments.danger .child-count {
|
||||
background: rgba(var(--danger-glow-rgb), 0.3);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.threaded-node {
|
||||
font-size: 0.65rem;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
import mapboxgl from "mapbox-gl";
|
||||
import AnimatedPopup from 'mapbox-gl-animated-popup';
|
||||
import type { InfoGempa } from '$lib/types';
|
||||
import { createGempaPopupHTML } from "$lib/utils/mapUtils";
|
||||
|
||||
type TitikGempaSetting = {
|
||||
map: mapboxgl.Map;
|
||||
|
|
@ -153,15 +152,30 @@ export class TitikGempa {
|
|||
|
||||
renderPopup() {
|
||||
const placeholder = document.createElement('div');
|
||||
placeholder.innerHTML = createGempaPopupHTML({
|
||||
id: this.id,
|
||||
mag: this.mag,
|
||||
depth: this.depth,
|
||||
time: new Date(this.infoGempa.time!).toLocaleString(),
|
||||
lat: this.infoGempa.lat,
|
||||
lng: this.infoGempa.lng,
|
||||
place: this.infoGempa.place ?? "-",
|
||||
});
|
||||
placeholder.innerHTML = `
|
||||
<div class="ews-card bordered-red min-h-48 min-w-48 whitespace-pre-wrap">
|
||||
<div class="ews-card-header bordered-red-bottom">
|
||||
<div class="overflow-hidden">
|
||||
<div class="stripe-wrapper"><div class="stripe-bar loop-stripe-reverse anim-duration-20"></div><div class="stripe-bar loop-stripe-reverse anim-duration-20"></div></div>
|
||||
<div class="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center">
|
||||
<p class="p-1 bg-black font-bold text-xs text-glow">EARTHQUAKE</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ews-card-content p-1 lg:p-2 custom-scrollbar">
|
||||
${this.mag ? `<table class="w-full">
|
||||
<tbody>
|
||||
<tr><td class="flex">Magnitudo</td><td class="text-right break-words pl-2">${Number(this.mag).toFixed(1)}</td></tr>
|
||||
<tr><td class="flex">Kedalaman</td><td class="text-right break-words pl-2">${this.depth}</td></tr>
|
||||
<tr><td class="flex">Waktu</td><td class="text-right break-words pl-2">${new Date(this.infoGempa.time!).toLocaleString()}</td></tr>
|
||||
<tr><td class="flex">Lokasi (Lat,Lng)</td><td class="text-right break-words pl-2">${this.infoGempa.lat} , ${this.infoGempa.lng}</td></tr>
|
||||
</tbody>
|
||||
</table>` : ''}
|
||||
${this.setting?.description != null && this.setting?.description != '' ? `<hr><p class="mt-1 text-xs">${this.setting?.description}</p>` : ''}
|
||||
</div>
|
||||
</div>
|
||||
`.trim()
|
||||
.replace(/>\s+</g, "><");
|
||||
|
||||
if (this.gemaMarker) {
|
||||
const popup = new AnimatedPopup({
|
||||
|
|
@ -286,7 +300,7 @@ export class TitikGempa {
|
|||
if (this.setting?.map != null) {
|
||||
this.setting.map.flyTo({
|
||||
center: [this.infoGempa.lng, this.infoGempa.lat],
|
||||
zoom: 8
|
||||
zoom: 6
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -79,12 +79,12 @@ export class TitikTsunami {
|
|||
renderPopup() {
|
||||
const placeholder = document.createElement('div');
|
||||
placeholder.innerHTML = `
|
||||
<div class="ews-card bordered bordered-red min-h-48 min-w-64 whitespace-pre-wrap">
|
||||
<div class="ews-card bordered-red min-h-48 min-w-64 whitespace-pre-wrap">
|
||||
<div class="ews-card-header bordered-red-bottom">
|
||||
<div class="overflow-hidden">
|
||||
<div class="stripe-wrapper"><div class="stripe-bar loop-stripe-reverse anim-duration-20"></div><div class="stripe-bar loop-stripe-reverse anim-duration-20"></div></div>
|
||||
<div class="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center">
|
||||
<p class="p-1 bg-black font-bold text-xs text-glow">TSUNAMI WARNING</p>
|
||||
<p class="p-1 bg-black font-bold text-xs text-glow">PERINGATAN TSUNAMI</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -124,7 +124,7 @@ export class TitikTsunami {
|
|||
if (this.setting?.map != null) {
|
||||
this.setting.map.flyTo({
|
||||
center: [this.infoTsunami.lng, this.infoTsunami.lat],
|
||||
zoom: 8
|
||||
zoom: 6
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -134,49 +134,45 @@
|
|||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="w-11/12 md:w-3/4 overflow-hidden bg-black relative rounded flex justify-center items-center opacity-0 show-pop-up animation-delay-2"
|
||||
class="w-3/4 overflow-hidden bg-black relative rounded flex justify-center items-center opacity-0 show-pop-up animation-delay-2"
|
||||
>
|
||||
<div
|
||||
class="absolute w-full h-2 m-auto top-0 left-0 right-0 overflow-hidden"
|
||||
>
|
||||
<StripeBar color="red" loop={true} className="w-full h-2"
|
||||
></StripeBar>
|
||||
<div class="w-2 h-full stripe-bar-red stripe-animation"></div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute w-full h-2 m-auto bottom-0 left-0 right-0 overflow-hidden"
|
||||
>
|
||||
<StripeBar
|
||||
color="red"
|
||||
loop={true}
|
||||
reverse={true}
|
||||
className="w-full h-2"
|
||||
></StripeBar>
|
||||
<div
|
||||
class="w-2 h-full stripe-bar-red stripe-animation-reverse"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute w-2 h-full m-auto top-0 bottom-0 left-0 overflow-hidden"
|
||||
>
|
||||
<StripeBar
|
||||
color="red"
|
||||
orientation="vertical"
|
||||
reverse={true}
|
||||
loop={true}
|
||||
className="w-2 h-full"
|
||||
></StripeBar>
|
||||
<div
|
||||
class="w-2 h-full stripe-bar-red-vertical loop-stripe-vertical-reverse"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute w-2 h-full m-auto top-0 bottom-0 right-0 overflow-hidden"
|
||||
>
|
||||
<StripeBar
|
||||
color="red"
|
||||
orientation="vertical"
|
||||
loop={true}
|
||||
className="w-2 h-full"
|
||||
></StripeBar>
|
||||
<div
|
||||
class="w-2 h-full stripe-bar-red-vertical loop-stripe-vertical"
|
||||
></div>
|
||||
</div>
|
||||
<div class="w-full h-full p-6">
|
||||
<div class="bordered-red p-2 text-center w-full mb-2">
|
||||
<div class="overflow-hidden relative">
|
||||
<StripeBar loop={true} reverse={true} duration={20}></StripeBar>
|
||||
<div class="stripe-wrapper">
|
||||
<div
|
||||
class="stripe-bar loop-stripe-reverse anim-duration-20"
|
||||
></div>
|
||||
<div
|
||||
class="stripe-bar loop-stripe-reverse anim-duration-20"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center"
|
||||
>
|
||||
|
|
@ -184,11 +180,17 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ews-card ews-card-red w-full h-auto">
|
||||
<div class="ews-card bordered-red w-full h-auto">
|
||||
<div class="ews-card-header bordered-red-bottom">
|
||||
<div class="overflow-hidden relative">
|
||||
<StripeBar loop={true} reverse={true} duration={20}
|
||||
></StripeBar>
|
||||
<div class="stripe-wrapper">
|
||||
<div
|
||||
class="stripe-bar loop-stripe-reverse anim-duration-20"
|
||||
></div>
|
||||
<div
|
||||
class="stripe-bar loop-stripe-reverse anim-duration-20"
|
||||
></div>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -1,716 +0,0 @@
|
|||
<script context="module" lang="ts">
|
||||
// Data point structure
|
||||
export interface DataPoint {
|
||||
t: number; // timestamp in MS
|
||||
v: number; // amplitude value
|
||||
}
|
||||
</script>
|
||||
|
||||
<script lang="ts">
|
||||
import "../styles/components/WaveformChart.css";
|
||||
import { onMount, onDestroy } from "svelte";
|
||||
import { browser } from "$app/environment";
|
||||
|
||||
export let waveformData: DataPoint[] = [];
|
||||
|
||||
// Colors
|
||||
export let backgroundColor: string = "#000000";
|
||||
export let gridColor: string = "#33cc55";
|
||||
export let axesColor: string = "#fa0";
|
||||
export let waveformColor: string = "#ff9900";
|
||||
export let psychoWaveformColor: string = "#ff9900";
|
||||
export let emptyTextColor: string = "#fa0";
|
||||
|
||||
// Zoom/Scale factor for Y-axis (Amplitude)
|
||||
export let zoomLevel: number = 0.05;
|
||||
export const MIN_ZOOM: number = 0.0001;
|
||||
export const MAX_ZOOM: number = 0.1;
|
||||
|
||||
// Time View Window
|
||||
export let timeWindowMs: number = 20000;
|
||||
export let timeOffsetMs: number = 0;
|
||||
|
||||
// Horizontal (X-axis / time) zoom limits in milliseconds
|
||||
export const MIN_TIME_WINDOW_MS: number = 2000; // 2 seconds minimum
|
||||
export const MAX_TIME_WINDOW_MS: number = 300000; // 5 minutes maximum
|
||||
|
||||
// Timezone
|
||||
export let selectedTimezone: number = 0; // 0: UTC, 7: WIB, 8: WITA, 9: WIT
|
||||
|
||||
// Demo Psycho mode
|
||||
export let isDemoPsychoMode: boolean = false;
|
||||
export let psychoPoints: { nx: number; ny: number }[] = [];
|
||||
|
||||
// Historical mode: set both to non-zero to activate
|
||||
// When active, live loop pauses and X-axis is fixed to this range
|
||||
export let historicalStartMs: number = 0;
|
||||
export let historicalEndMs: number = 0;
|
||||
|
||||
// Method to resume viewing live data
|
||||
export function resumeLive() {
|
||||
timeOffsetMs = 0;
|
||||
frozenLatestTime = 0;
|
||||
}
|
||||
|
||||
// Jump to the end of the historical range (right edge = endTime)
|
||||
export function jumpToHistoricalEnd() {
|
||||
timeOffsetMs = 0;
|
||||
frozenLatestTime = 0;
|
||||
draw();
|
||||
}
|
||||
|
||||
let canvas: HTMLCanvasElement;
|
||||
let ctx: CanvasRenderingContext2D;
|
||||
let container: HTMLDivElement;
|
||||
|
||||
let width = 1200;
|
||||
let height = 600;
|
||||
|
||||
let frozenLatestTime = 0;
|
||||
|
||||
// Automatically freeze live mode if timeOffsetMs is increased externally
|
||||
$: if (timeOffsetMs > 0 && frozenLatestTime === 0 && historicalStartMs === 0) {
|
||||
frozenLatestTime = Date.now();
|
||||
}
|
||||
let isDragging = false;
|
||||
let lastMouseX = 0;
|
||||
let initialPinchDistance = 0;
|
||||
let startedOnCanvas = false;
|
||||
|
||||
let animId: number;
|
||||
|
||||
function resizeCanvas() {
|
||||
if (!container || !canvas) return;
|
||||
|
||||
const rect = container.getBoundingClientRect();
|
||||
width = rect.width;
|
||||
height = rect.height;
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
draw();
|
||||
}
|
||||
|
||||
function handleWheel(e: WheelEvent) {
|
||||
e.preventDefault();
|
||||
|
||||
const isHistoricalMode = historicalStartMs > 0 && historicalEndMs > 0;
|
||||
const isMobile = width < 768;
|
||||
const leftPadding = isMobile ? 40 : 70;
|
||||
const drawWidth = width - leftPadding;
|
||||
|
||||
// CTRL + Scroll → Horizontal Zoom (X-axis / Time Window)
|
||||
if (e.ctrlKey && e.deltaY !== 0) {
|
||||
const oldWindow = timeWindowMs;
|
||||
const zoomFactor = e.deltaY > 0 ? 1.15 : 1 / 1.15; // zoom out / zoom in
|
||||
const newWindow = Math.min(
|
||||
MAX_TIME_WINDOW_MS,
|
||||
Math.max(MIN_TIME_WINDOW_MS, oldWindow * zoomFactor)
|
||||
);
|
||||
|
||||
// Anchor zoom to mouse cursor X position on the time axis
|
||||
const mouseXOnCanvas = e.offsetX - leftPadding;
|
||||
const cursorRatio = Math.max(0, Math.min(1, mouseXOnCanvas / drawWidth));
|
||||
|
||||
// Determine the time under the cursor before zoom
|
||||
let rightEdgeBefore: number;
|
||||
if (isHistoricalMode) {
|
||||
rightEdgeBefore = historicalEndMs - timeOffsetMs;
|
||||
} else {
|
||||
const latestTime =
|
||||
timeOffsetMs > 0 && frozenLatestTime > 0 ? frozenLatestTime : Date.now();
|
||||
rightEdgeBefore = latestTime - timeOffsetMs;
|
||||
}
|
||||
const leftEdgeBefore = rightEdgeBefore - oldWindow;
|
||||
const timeUnderCursor = leftEdgeBefore + cursorRatio * oldWindow;
|
||||
|
||||
// After zoom, the right edge must remain so that timeUnderCursor stays at cursorRatio
|
||||
// newRightEdge = timeUnderCursor + (1 - cursorRatio) * newWindow
|
||||
const newRightEdge = timeUnderCursor + (1 - cursorRatio) * newWindow;
|
||||
|
||||
timeWindowMs = newWindow;
|
||||
|
||||
if (isHistoricalMode) {
|
||||
timeOffsetMs = historicalEndMs - newRightEdge;
|
||||
const maxOffset = (historicalEndMs - historicalStartMs) - newWindow;
|
||||
if (timeOffsetMs < 0) timeOffsetMs = 0;
|
||||
if (maxOffset > 0 && timeOffsetMs > maxOffset) timeOffsetMs = maxOffset;
|
||||
} else {
|
||||
// Freeze the live clock at the current "right edge" reference point
|
||||
if (frozenLatestTime === 0 && timeOffsetMs === 0) {
|
||||
frozenLatestTime = Date.now();
|
||||
}
|
||||
const refTime = frozenLatestTime > 0 ? frozenLatestTime : Date.now();
|
||||
timeOffsetMs = refTime - newRightEdge;
|
||||
if (timeOffsetMs <= 0) {
|
||||
timeOffsetMs = 0;
|
||||
frozenLatestTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
draw();
|
||||
return; // Don't run other scroll handlers on CTRL+scroll
|
||||
}
|
||||
|
||||
// Vertical Scroll (Y-Axis Zoom) — no modifier key
|
||||
if (e.deltaY !== 0 && !e.shiftKey && !e.ctrlKey) {
|
||||
const zoomStep = zoomLevel * 0.1; // 10% change
|
||||
if (e.deltaY < 0) {
|
||||
zoomLevel = Math.min(MAX_ZOOM, zoomLevel + zoomStep);
|
||||
} else {
|
||||
zoomLevel = Math.max(MIN_ZOOM, zoomLevel - zoomStep);
|
||||
}
|
||||
}
|
||||
|
||||
// Horizontal Scroll with Shift key or Trackpad horizontal scroll (Pan Time)
|
||||
// Also allow horizontal wheel events (deltaX)
|
||||
if (e.deltaX !== 0 || (e.deltaY !== 0 && e.shiftKey)) {
|
||||
if (!isHistoricalMode && timeOffsetMs === 0) {
|
||||
frozenLatestTime = Date.now();
|
||||
}
|
||||
|
||||
const delta = Math.abs(e.deltaX) > 0 ? e.deltaX : e.deltaY;
|
||||
// Map pixels to milliseconds
|
||||
const msPerPixel = timeWindowMs / width;
|
||||
timeOffsetMs += delta * msPerPixel * 2;
|
||||
|
||||
// Prevent panning into the future (live) or past the start (historical)
|
||||
if (isHistoricalMode) {
|
||||
const maxOffset = (historicalEndMs - historicalStartMs) - timeWindowMs;
|
||||
if (timeOffsetMs < 0) timeOffsetMs = 0;
|
||||
if (maxOffset > 0 && timeOffsetMs > maxOffset) timeOffsetMs = maxOffset;
|
||||
} else {
|
||||
if (timeOffsetMs <= 0) {
|
||||
timeOffsetMs = 0;
|
||||
frozenLatestTime = 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
draw();
|
||||
}
|
||||
|
||||
// Mouse Dragging for Panning
|
||||
function handleMouseDown(e: MouseEvent) {
|
||||
isDragging = true;
|
||||
lastMouseX = e.clientX;
|
||||
}
|
||||
|
||||
function handleMouseMove(e: MouseEvent) {
|
||||
if (!isDragging) return;
|
||||
|
||||
const dx = e.clientX - lastMouseX;
|
||||
lastMouseX = e.clientX;
|
||||
|
||||
// Map pixel drag to time change
|
||||
const msPerPixel = timeWindowMs / width;
|
||||
const isHistoricalMode = historicalStartMs > 0 && historicalEndMs > 0;
|
||||
|
||||
// Moving right (dx > 0) means going back in time (increasing timeOffset)
|
||||
if (!isHistoricalMode && timeOffsetMs === 0 && dx > 0) {
|
||||
frozenLatestTime = Date.now();
|
||||
}
|
||||
|
||||
// Drag left = positive dx = go earlier in time (increase offset)
|
||||
timeOffsetMs -= dx * msPerPixel;
|
||||
|
||||
if (isHistoricalMode) {
|
||||
const maxOffset = (historicalEndMs - historicalStartMs) - timeWindowMs;
|
||||
if (timeOffsetMs < 0) timeOffsetMs = 0;
|
||||
if (maxOffset > 0 && timeOffsetMs > maxOffset) timeOffsetMs = maxOffset;
|
||||
} else {
|
||||
if (timeOffsetMs <= 0) {
|
||||
timeOffsetMs = 0;
|
||||
frozenLatestTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
draw();
|
||||
}
|
||||
|
||||
function handleMouseUp() {
|
||||
isDragging = false;
|
||||
}
|
||||
|
||||
function handleTouchStart(e: TouchEvent) {
|
||||
startedOnCanvas = true;
|
||||
if (e.touches.length === 1) {
|
||||
isDragging = true;
|
||||
lastMouseX = e.touches[0].clientX;
|
||||
} else if (e.touches.length === 2) {
|
||||
isDragging = false;
|
||||
const dx = e.touches[0].clientX - e.touches[1].clientX;
|
||||
const dy = e.touches[0].clientY - e.touches[1].clientY;
|
||||
initialPinchDistance = Math.hypot(dx, dy);
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchMove(e: TouchEvent) {
|
||||
if (!startedOnCanvas) return;
|
||||
|
||||
if (e.cancelable) {
|
||||
e.preventDefault(); // Prevent page scrolling
|
||||
}
|
||||
|
||||
if (isDragging && e.touches.length === 1) {
|
||||
const dx = e.touches[0].clientX - lastMouseX;
|
||||
lastMouseX = e.touches[0].clientX;
|
||||
|
||||
const msPerPixel = timeWindowMs / width;
|
||||
const isHistoricalMode = historicalStartMs > 0 && historicalEndMs > 0;
|
||||
|
||||
if (!isHistoricalMode && timeOffsetMs === 0 && dx > 0) {
|
||||
frozenLatestTime = Date.now();
|
||||
}
|
||||
|
||||
// Drag right (dx > 0) = scroll into the past (increase offset)
|
||||
timeOffsetMs -= dx * msPerPixel;
|
||||
|
||||
if (isHistoricalMode) {
|
||||
const maxOffset = (historicalEndMs - historicalStartMs) - timeWindowMs;
|
||||
if (timeOffsetMs < 0) timeOffsetMs = 0;
|
||||
if (maxOffset > 0 && timeOffsetMs > maxOffset) timeOffsetMs = maxOffset;
|
||||
} else {
|
||||
if (timeOffsetMs <= 0) {
|
||||
timeOffsetMs = 0;
|
||||
frozenLatestTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
draw();
|
||||
} else if (e.touches.length === 2) {
|
||||
const dx = e.touches[0].clientX - e.touches[1].clientX;
|
||||
const dy = e.touches[0].clientY - e.touches[1].clientY;
|
||||
const currentDistance = Math.hypot(dx, dy);
|
||||
|
||||
const diff = currentDistance - initialPinchDistance;
|
||||
|
||||
if (Math.abs(diff) > 2) {
|
||||
const zoomStep = zoomLevel * 0.05 * (Math.abs(diff) / 5);
|
||||
if (diff > 0) {
|
||||
zoomLevel = Math.min(MAX_ZOOM, zoomLevel + zoomStep);
|
||||
} else {
|
||||
zoomLevel = Math.max(MIN_ZOOM, zoomLevel - zoomStep);
|
||||
}
|
||||
initialPinchDistance = currentDistance;
|
||||
draw();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function handleTouchEnd(e: TouchEvent) {
|
||||
if (!startedOnCanvas) return;
|
||||
|
||||
if (e.touches.length < 2) {
|
||||
initialPinchDistance = 0;
|
||||
}
|
||||
if (e.touches.length === 0) {
|
||||
isDragging = false;
|
||||
startedOnCanvas = false;
|
||||
} else if (e.touches.length === 1) {
|
||||
isDragging = true;
|
||||
lastMouseX = e.touches[0].clientX;
|
||||
}
|
||||
}
|
||||
|
||||
function formatTimeStr(ms: number) {
|
||||
// Apply timezone offset (selectedTimezone is in hours)
|
||||
const tzOffsetMs = selectedTimezone * 60 * 60 * 1000;
|
||||
const d = new Date(ms + tzOffsetMs);
|
||||
return d.toISOString().substring(11, 19); // HH:MM:SS
|
||||
}
|
||||
|
||||
function draw() {
|
||||
if (!ctx || !canvas) return;
|
||||
|
||||
ctx.fillStyle = backgroundColor;
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
|
||||
if (waveformData.length === 0 && !isDemoPsychoMode) {
|
||||
// Draw empty state
|
||||
ctx.fillStyle = emptyTextColor;
|
||||
ctx.font = 'bold 16px "Inter", sans-serif';
|
||||
ctx.textAlign = "center";
|
||||
ctx.fillText("WAITING FOR SIGNAL...", width / 2, height / 2);
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine right/left edge: historical mode uses fixed range, live mode uses Date.now()
|
||||
const isHistoricalMode = historicalStartMs > 0 && historicalEndMs > 0;
|
||||
|
||||
let rightEdgeTime: number;
|
||||
let leftEdgeTime: number;
|
||||
|
||||
if (isHistoricalMode) {
|
||||
// In historical mode, the right edge starts at endTime and user scrolls left
|
||||
rightEdgeTime = historicalEndMs - timeOffsetMs;
|
||||
leftEdgeTime = rightEdgeTime - timeWindowMs;
|
||||
} else {
|
||||
// Live mode: smooth sliding clock
|
||||
const latestTime =
|
||||
timeOffsetMs > 0 && frozenLatestTime > 0
|
||||
? frozenLatestTime
|
||||
: Date.now();
|
||||
rightEdgeTime = latestTime - timeOffsetMs;
|
||||
leftEdgeTime = rightEdgeTime - timeWindowMs;
|
||||
}
|
||||
|
||||
const isMobile = width < 768;
|
||||
const leftPadding = isMobile ? 40 : 70;
|
||||
const bottomPadding = isMobile ? 30 : 40;
|
||||
const drawWidth = width - leftPadding;
|
||||
const drawHeight = height - bottomPadding;
|
||||
|
||||
// X-Axis Grid inside graph area (Neon Green with Crosshairs)
|
||||
ctx.strokeStyle = gridColor;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.beginPath();
|
||||
|
||||
const xGridStep = drawWidth / 8;
|
||||
const yGridStep = drawHeight / 12; // 12 divisions like the EVANGELION reference
|
||||
|
||||
for (let xPos = leftPadding; xPos <= width; xPos += xGridStep) {
|
||||
ctx.moveTo(xPos, 0);
|
||||
ctx.lineTo(xPos, drawHeight);
|
||||
|
||||
// Draw crosshairs on the lines
|
||||
for (let yPos = 0; yPos <= drawHeight; yPos += yGridStep) {
|
||||
// Crosshairs length: 10px
|
||||
ctx.moveTo(xPos - 5, yPos);
|
||||
ctx.lineTo(xPos + 5, yPos);
|
||||
}
|
||||
|
||||
// Draw floating crosshairs between the vertical lines (shifted by half a grid step)
|
||||
if (xPos + xGridStep <= width) {
|
||||
const midX = xPos + xGridStep / 2;
|
||||
for (
|
||||
let yPos = yGridStep / 2;
|
||||
yPos <= drawHeight;
|
||||
yPos += yGridStep
|
||||
) {
|
||||
ctx.moveTo(midX - 5, yPos);
|
||||
ctx.lineTo(midX + 5, yPos);
|
||||
ctx.moveTo(midX, yPos - 5);
|
||||
ctx.lineTo(midX, yPos + 5);
|
||||
}
|
||||
}
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
// Left Label Ruler (Amplitude)
|
||||
ctx.strokeStyle = axesColor;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(leftPadding, 0);
|
||||
ctx.lineTo(leftPadding, drawHeight);
|
||||
|
||||
ctx.fillStyle = axesColor;
|
||||
ctx.font = isMobile
|
||||
? 'bold 10px "Inter", sans-serif'
|
||||
: 'bold 14px "Inter", sans-serif';
|
||||
ctx.textAlign = "right";
|
||||
ctx.textBaseline = "middle";
|
||||
|
||||
for (let y = 0; y <= drawHeight; y += yGridStep) {
|
||||
// Ticks
|
||||
ctx.moveTo(leftPadding - (isMobile ? 4 : 8), y);
|
||||
ctx.lineTo(leftPadding, y);
|
||||
|
||||
const actualValue = (drawHeight / 2 - y) / zoomLevel;
|
||||
// Format to integer since amplitude counts are generally large or zero
|
||||
ctx.fillText(
|
||||
Math.round(actualValue).toString(),
|
||||
leftPadding - (isMobile ? 6 : 10),
|
||||
y,
|
||||
);
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
// Bottom Ruler (Time/Ticks) — Adaptive intervals
|
||||
ctx.strokeStyle = axesColor;
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, drawHeight);
|
||||
ctx.lineTo(width, drawHeight);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.fillStyle = axesColor;
|
||||
ctx.font = isMobile
|
||||
? 'bold 10px "Inter", sans-serif'
|
||||
: 'bold 12px "Inter", sans-serif';
|
||||
ctx.textAlign = "center";
|
||||
ctx.textBaseline = "top";
|
||||
|
||||
ctx.strokeStyle = axesColor;
|
||||
ctx.lineWidth = 1.5;
|
||||
ctx.beginPath();
|
||||
|
||||
const pixelsPerMs = drawWidth / timeWindowMs;
|
||||
|
||||
// ── Adaptive tick intervals ──────────────────────────────────────────
|
||||
// Each entry: [windowThreshold_ms, majorInterval_ms, minorInterval_ms, labelFormat]
|
||||
// labelFormat: 'hms' = HH:MM:SS, 'hm' = HH:MM, 'hmd' = HH:MM + date
|
||||
type LabelFmt = 'hms' | 'hm';
|
||||
const tickTable: [number, number, number, LabelFmt][] = [
|
||||
[ 3_000, 500, 100, 'hms'], // < 3 s → major 0.5s, minor 0.1s
|
||||
[ 8_000, 1_000, 250, 'hms'], // < 8 s → major 1s, minor 0.25s
|
||||
[ 20_000, 2_000, 500, 'hms'], // < 20 s → major 2s, minor 0.5s
|
||||
[ 45_000, 5_000, 1_000, 'hms'], // < 45 s → major 5s, minor 1s
|
||||
[ 90_000, 10_000, 2_000, 'hms'], // < 90 s → major 10s, minor 2s
|
||||
[ 180_000, 20_000, 5_000, 'hms'], // < 3 min → major 20s, minor 5s
|
||||
[ 360_000, 60_000, 15_000, 'hms'], // < 6 min → major 1min, minor 15s
|
||||
[ 900_000, 120_000, 30_000, 'hms'], // < 15 min→ major 2min, minor 30s
|
||||
[ 1_800_000, 300_000, 60_000, 'hm' ], // < 30 min→ major 5min, minor 1min
|
||||
[ 3_600_000, 600_000,120_000, 'hm' ], // < 1 hr → major 10min,minor 2min
|
||||
[ 7_200_000,1_200_000,300_000,'hm' ], // < 2 hr → major 20min,minor 5min
|
||||
[ 18_000_000,3_600_000,900_000,'hm' ], // < 5 hr → major 1hr, minor 15min
|
||||
];
|
||||
|
||||
let majorMs = 3_600_000; // default ≥ 5 hr
|
||||
let minorMs = 900_000;
|
||||
let labelFmt: LabelFmt = 'hm';
|
||||
|
||||
for (const [threshold, maj, min, fmt] of tickTable) {
|
||||
if (timeWindowMs < threshold) {
|
||||
majorMs = maj;
|
||||
minorMs = min;
|
||||
labelFmt = fmt;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
// Helper: format a timestamp for the label
|
||||
function formatLabel(ms: number): string {
|
||||
const tzOffsetMs = selectedTimezone * 60 * 60 * 1000;
|
||||
const d = new Date(ms + tzOffsetMs);
|
||||
const hh = String(d.getUTCHours()).padStart(2, '0');
|
||||
const mm = String(d.getUTCMinutes()).padStart(2, '0');
|
||||
const ss = String(d.getUTCSeconds()).padStart(2, '0');
|
||||
return labelFmt === 'hms' ? `${hh}:${mm}:${ss}` : `${hh}:${mm}`;
|
||||
}
|
||||
|
||||
// Draw minor ticks (no label)
|
||||
const minorStart = Math.floor(leftEdgeTime / minorMs) * minorMs;
|
||||
for (let t = minorStart; t <= rightEdgeTime; t += minorMs) {
|
||||
// Skip positions that will be covered by a major tick
|
||||
if (t % majorMs === 0) continue;
|
||||
const x = leftPadding + (t - leftEdgeTime) * pixelsPerMs;
|
||||
if (x >= leftPadding && x <= width) {
|
||||
ctx.moveTo(x, drawHeight);
|
||||
ctx.lineTo(x, drawHeight + 8);
|
||||
}
|
||||
}
|
||||
|
||||
// Draw major ticks + labels
|
||||
const majorStart = Math.floor(leftEdgeTime / majorMs) * majorMs;
|
||||
for (let t = majorStart; t <= rightEdgeTime; t += majorMs) {
|
||||
const x = leftPadding + (t - leftEdgeTime) * pixelsPerMs;
|
||||
if (x >= leftPadding && x <= width) {
|
||||
ctx.moveTo(x, drawHeight);
|
||||
ctx.lineTo(x, drawHeight + 18);
|
||||
ctx.fillText(formatLabel(t), x, drawHeight + 20);
|
||||
}
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
|
||||
// Draw the waveform line
|
||||
if (isDemoPsychoMode) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.rect(leftPadding, 0, drawWidth, drawHeight);
|
||||
ctx.clip();
|
||||
|
||||
ctx.strokeStyle = psychoWaveformColor;
|
||||
ctx.shadowBlur = 12;
|
||||
ctx.lineWidth = 2.5;
|
||||
ctx.lineJoin = "round";
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
const startX = leftPadding;
|
||||
const boundingBoxLeft = leftPadding + drawWidth * 0.3;
|
||||
const boundingBoxRight = leftPadding + drawWidth * 0.55;
|
||||
const boundingBoxTop = drawHeight * 0.1;
|
||||
const boundingBoxBottom = drawHeight * 0.9;
|
||||
const boxWidth = boundingBoxRight - boundingBoxLeft;
|
||||
const boxHeight = boundingBoxBottom - boundingBoxTop;
|
||||
|
||||
ctx.moveTo(startX, drawHeight - 2);
|
||||
ctx.bezierCurveTo(
|
||||
leftPadding + drawWidth * 0.15,
|
||||
drawHeight,
|
||||
leftPadding + drawWidth * 0.25,
|
||||
drawHeight * 0.1,
|
||||
boundingBoxLeft,
|
||||
boundingBoxTop,
|
||||
);
|
||||
|
||||
if (psychoPoints.length > 0) {
|
||||
const firstPx =
|
||||
boundingBoxLeft +
|
||||
boxWidth / 2 +
|
||||
(psychoPoints[0].nx * boxWidth) / 2;
|
||||
const firstPy =
|
||||
boundingBoxTop +
|
||||
boxHeight / 2 +
|
||||
(psychoPoints[0].ny * boxHeight) / 2;
|
||||
ctx.lineTo(firstPx, firstPy);
|
||||
|
||||
for (let i = 1; i < psychoPoints.length - 1; i++) {
|
||||
const px =
|
||||
boundingBoxLeft +
|
||||
boxWidth / 2 +
|
||||
(psychoPoints[i].nx * boxWidth) / 2;
|
||||
const py =
|
||||
boundingBoxTop +
|
||||
boxHeight / 2 +
|
||||
(psychoPoints[i].ny * boxHeight) / 2;
|
||||
const nextPx =
|
||||
boundingBoxLeft +
|
||||
boxWidth / 2 +
|
||||
(psychoPoints[i + 1].nx * boxWidth) / 2;
|
||||
const nextPy =
|
||||
boundingBoxTop +
|
||||
boxHeight / 2 +
|
||||
(psychoPoints[i + 1].ny * boxHeight) / 2;
|
||||
|
||||
const midX = (px + nextPx) / 2;
|
||||
const midY = (py + nextPy) / 2;
|
||||
|
||||
ctx.quadraticCurveTo(px, py, midX, midY);
|
||||
}
|
||||
|
||||
const lastPx =
|
||||
boundingBoxLeft +
|
||||
boxWidth / 2 +
|
||||
(psychoPoints[psychoPoints.length - 1].nx * boxWidth) / 2;
|
||||
const lastPy =
|
||||
boundingBoxTop +
|
||||
boxHeight / 2 +
|
||||
(psychoPoints[psychoPoints.length - 1].ny * boxHeight) / 2;
|
||||
ctx.lineTo(lastPx, lastPy);
|
||||
|
||||
ctx.lineTo(boundingBoxRight, drawHeight * 0.4);
|
||||
|
||||
let stairX = boundingBoxRight;
|
||||
let stairY = drawHeight * 0.4;
|
||||
|
||||
stairX += drawWidth * 0.05;
|
||||
ctx.lineTo(stairX, stairY);
|
||||
stairY += drawHeight * 0.2;
|
||||
ctx.lineTo(stairX, stairY);
|
||||
|
||||
stairX += drawWidth * 0.05;
|
||||
ctx.lineTo(stairX, stairY);
|
||||
stairY += drawHeight * 0.2;
|
||||
ctx.lineTo(stairX, stairY);
|
||||
|
||||
stairX += drawWidth * 0.05;
|
||||
ctx.lineTo(stairX, stairY);
|
||||
stairY = drawHeight - 2;
|
||||
ctx.lineTo(stairX, stairY);
|
||||
|
||||
ctx.lineTo(width, stairY);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
} else {
|
||||
const visiblePoints = waveformData.filter(
|
||||
(p) =>
|
||||
p.t >= leftEdgeTime - 1000 && p.t <= rightEdgeTime + 1000,
|
||||
);
|
||||
|
||||
if (visiblePoints.length > 0) {
|
||||
ctx.save();
|
||||
ctx.beginPath();
|
||||
ctx.rect(leftPadding, 0, drawWidth, drawHeight);
|
||||
ctx.clip();
|
||||
|
||||
ctx.strokeStyle = waveformColor;
|
||||
ctx.shadowBlur = 12;
|
||||
ctx.lineWidth = 2.5;
|
||||
ctx.lineJoin = "round";
|
||||
ctx.beginPath();
|
||||
|
||||
visiblePoints.forEach((p, i) => {
|
||||
const timeRatio = (p.t - leftEdgeTime) / timeWindowMs;
|
||||
const x = leftPadding + timeRatio * drawWidth;
|
||||
|
||||
const y = drawHeight / 2 - p.v * zoomLevel;
|
||||
|
||||
if (i === 0) ctx.moveTo(x, y);
|
||||
else ctx.lineTo(x, y);
|
||||
});
|
||||
|
||||
ctx.stroke();
|
||||
ctx.restore();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
if (!browser) return;
|
||||
|
||||
ctx = canvas.getContext("2d")!;
|
||||
|
||||
resizeCanvas();
|
||||
window.addEventListener("resize", resizeCanvas);
|
||||
|
||||
canvas.addEventListener("wheel", handleWheel, { passive: false });
|
||||
canvas.addEventListener("mousedown", handleMouseDown);
|
||||
window.addEventListener("mousemove", handleMouseMove);
|
||||
window.addEventListener("mouseup", handleMouseUp);
|
||||
|
||||
canvas.addEventListener("touchstart", handleTouchStart, {
|
||||
passive: false,
|
||||
});
|
||||
window.addEventListener("touchmove", handleTouchMove, {
|
||||
passive: false,
|
||||
});
|
||||
window.addEventListener("touchend", handleTouchEnd);
|
||||
window.addEventListener("touchcancel", handleTouchEnd);
|
||||
|
||||
function updateLoop() {
|
||||
const isHistoricalMode = historicalStartMs > 0 && historicalEndMs > 0;
|
||||
// In historical mode, we don't need continuous re-draws based on clock;
|
||||
// draw() is called on user interaction. But we still run the loop
|
||||
// at a low rate so panning/dragging still works smoothly.
|
||||
if (!isDragging || isHistoricalMode) {
|
||||
draw();
|
||||
}
|
||||
animId = requestAnimationFrame(updateLoop);
|
||||
}
|
||||
updateLoop();
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
if (!browser) return;
|
||||
window.removeEventListener("resize", resizeCanvas);
|
||||
if (canvas) {
|
||||
canvas.removeEventListener("wheel", handleWheel);
|
||||
canvas.removeEventListener("mousedown", handleMouseDown);
|
||||
canvas.removeEventListener("touchstart", handleTouchStart);
|
||||
}
|
||||
window.removeEventListener("mousemove", handleMouseMove);
|
||||
window.removeEventListener("mouseup", handleMouseUp);
|
||||
window.removeEventListener("touchmove", handleTouchMove);
|
||||
window.removeEventListener("touchend", handleTouchEnd);
|
||||
window.addEventListener("touchcancel", handleTouchEnd);
|
||||
|
||||
if (animId) {
|
||||
cancelAnimationFrame(animId);
|
||||
}
|
||||
});
|
||||
|
||||
// Handle incoming data/props changes to trigger draw if needed,
|
||||
// although updateLoop is already calling draw() repeatedly.
|
||||
</script>
|
||||
|
||||
<div bind:this={container} class="ews-waveform-chart-wrapper">
|
||||
<!-- Slot for putting overlays on top of canvas if needed -->
|
||||
<slot></slot>
|
||||
<canvas bind:this={canvas} class="ews-waveform-chart-canvas"></canvas>
|
||||
</div>
|
||||
|
|
@ -7,71 +7,31 @@
|
|||
"single_data": true,
|
||||
"attribute": "",
|
||||
"data_mapping": {
|
||||
"id": {
|
||||
"attribute": "identifier"
|
||||
},
|
||||
"id": { "attribute": "identifier" },
|
||||
"lng": {
|
||||
"attribute": "info.point.coordinates",
|
||||
"func": [
|
||||
{
|
||||
"split": {
|
||||
"separator": ",",
|
||||
"index": 0
|
||||
}
|
||||
},
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
{ "split": { "separator": ",", "index": 0 } },
|
||||
{ "toFloat": {} }
|
||||
]
|
||||
},
|
||||
"lat": {
|
||||
"attribute": "info.point.coordinates",
|
||||
"func": [
|
||||
{
|
||||
"split": {
|
||||
"separator": ",",
|
||||
"index": 1
|
||||
}
|
||||
},
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
{ "split": { "separator": ",", "index": 1 } },
|
||||
{ "toFloat": {} }
|
||||
]
|
||||
},
|
||||
"mag": {
|
||||
"attribute": "info.magnitude",
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"depth": {
|
||||
"attribute": "info.depth"
|
||||
},
|
||||
"place": {
|
||||
"attribute": "info.felt"
|
||||
},
|
||||
"message": {
|
||||
"attribute": "info.description"
|
||||
},
|
||||
"mag": { "attribute": "info.magnitude", "func": [{ "toFloat": {} }] },
|
||||
"depth": { "attribute": "info.depth" },
|
||||
"place": { "attribute": "info.felt" },
|
||||
"message": { "attribute": "info.description" },
|
||||
"time": {
|
||||
"attribute": "sent",
|
||||
"func": [
|
||||
{
|
||||
"replace": {
|
||||
"from": "WIB",
|
||||
"to": ""
|
||||
}
|
||||
},
|
||||
{
|
||||
"fromISO": {
|
||||
"zone": "Asia/Jakarta"
|
||||
}
|
||||
},
|
||||
{
|
||||
"formatReadable": {}
|
||||
}
|
||||
{ "replace": { "from": "WIB", "to": "" } },
|
||||
{ "fromISO": { "zone": "Asia/Jakarta" } },
|
||||
{ "formatReadable": {} }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -84,50 +44,17 @@
|
|||
"single_data": false,
|
||||
"attribute": "features",
|
||||
"data_mapping": {
|
||||
"id": {
|
||||
"attribute": "properties.id"
|
||||
},
|
||||
"lng": {
|
||||
"attribute": "geometry.coordinates",
|
||||
"index": 0,
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"lat": {
|
||||
"attribute": "geometry.coordinates",
|
||||
"index": 1,
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"mag": {
|
||||
"attribute": "properties.mag",
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"depth": {
|
||||
"attribute": "properties.depth"
|
||||
},
|
||||
"place": {
|
||||
"attribute": "properties.place"
|
||||
},
|
||||
"id": { "attribute": "properties.id" },
|
||||
"lng": { "attribute": "geometry.coordinates", "index": 0, "func": [{ "toFloat": {} }] },
|
||||
"lat": { "attribute": "geometry.coordinates", "index": 1, "func": [{ "toFloat": {} }] },
|
||||
"mag": { "attribute": "properties.mag", "func": [{ "toFloat": {} }] },
|
||||
"depth": { "attribute": "properties.depth" },
|
||||
"place": { "attribute": "properties.place" },
|
||||
"time": {
|
||||
"attribute": "properties.time",
|
||||
"func": [
|
||||
{
|
||||
"utcSqlToJakarta": {}
|
||||
},
|
||||
{
|
||||
"formatReadable": {}
|
||||
}
|
||||
{ "utcSqlToJakarta": {} },
|
||||
{ "formatReadable": {} }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -140,50 +67,17 @@
|
|||
"single_data": false,
|
||||
"attribute": "features",
|
||||
"data_mapping": {
|
||||
"id": {
|
||||
"attribute": "properties.id"
|
||||
},
|
||||
"lng": {
|
||||
"attribute": "geometry.coordinates",
|
||||
"index": 0,
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"lat": {
|
||||
"attribute": "geometry.coordinates",
|
||||
"index": 1,
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"mag": {
|
||||
"attribute": "properties.mag",
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"depth": {
|
||||
"attribute": "properties.depth"
|
||||
},
|
||||
"place": {
|
||||
"attribute": "properties.place"
|
||||
},
|
||||
"id": { "attribute": "properties.id" },
|
||||
"lng": { "attribute": "geometry.coordinates", "index": 0, "func": [{ "toFloat": {} }] },
|
||||
"lat": { "attribute": "geometry.coordinates", "index": 1, "func": [{ "toFloat": {} }] },
|
||||
"mag": { "attribute": "properties.mag", "func": [{ "toFloat": {} }] },
|
||||
"depth": { "attribute": "properties.depth" },
|
||||
"place": { "attribute": "properties.place" },
|
||||
"time": {
|
||||
"attribute": "properties.time",
|
||||
"func": [
|
||||
{
|
||||
"utcSqlToJakarta": {}
|
||||
},
|
||||
{
|
||||
"formatReadable": {}
|
||||
}
|
||||
{ "utcSqlToJakarta": {} },
|
||||
{ "formatReadable": {} }
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -196,47 +90,46 @@
|
|||
"single_data": false,
|
||||
"attribute": "Infogempa.gempa",
|
||||
"data_mapping": {
|
||||
"id": {
|
||||
"attribute": "eventid"
|
||||
},
|
||||
"lng": {
|
||||
"attribute": "bujur",
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"lat": {
|
||||
"attribute": "lintang",
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"mag": {
|
||||
"attribute": "mag",
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"depth": {
|
||||
"attribute": "dalam"
|
||||
},
|
||||
"place": {
|
||||
"attribute": "area"
|
||||
},
|
||||
"id": { "attribute": "eventid" },
|
||||
"lng": { "attribute": "bujur", "func": [{ "toFloat": {} }] },
|
||||
"lat": { "attribute": "lintang", "func": [{ "toFloat": {} }] },
|
||||
"mag": { "attribute": "mag", "func": [{ "toFloat": {} }] },
|
||||
"depth": { "attribute": "dalam" },
|
||||
"place": { "attribute": "area" },
|
||||
"time": {
|
||||
"attribute": "waktu",
|
||||
"func": [
|
||||
{
|
||||
"formatReadable": {}
|
||||
}
|
||||
{ "utcSqlToJakarta": {} },
|
||||
{ "formatReadable": {} }
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
"id": "ssn_mexico",
|
||||
"category": "all",
|
||||
"source_url": "http://www.ssn.unam.mx/j/656823557",
|
||||
"type": "json",
|
||||
"single_data": false,
|
||||
"attribute": "",
|
||||
"data_mapping": {
|
||||
"id": {
|
||||
"attribute": "",
|
||||
"func": [{ "template": { "format": "${6}-${0}-${1}" } }]
|
||||
},
|
||||
"lng": { "attribute": "", "index": 3, "func": [{ "toFloat": {} }] },
|
||||
"lat": { "attribute": "", "index": 2, "func": [{ "toFloat": {} }] },
|
||||
"mag": { "attribute": "", "index": 5, "func": [{ "toFloat": {} }] },
|
||||
"depth": { "attribute": "", "index": 4 },
|
||||
"place": { "attribute": "", "index": 6 },
|
||||
"time": {
|
||||
"attribute": "",
|
||||
"func": [
|
||||
{ "template": { "format": "${0} ${1}" } },
|
||||
{ "fromFormat": { "format": "yyyy-MM-dd HH:mm:ss", "zone": "UTC" } },
|
||||
{ "formatReadable": {} }
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
]
|
||||
|
|
|
|||
|
|
@ -1,76 +0,0 @@
|
|||
[
|
||||
{
|
||||
"id": "ssn_mexico",
|
||||
"category": "all",
|
||||
"source_url": "http://www.ssn.unam.mx/j/656823557",
|
||||
"type": "json",
|
||||
"single_data": false,
|
||||
"attribute": "",
|
||||
"data_mapping": {
|
||||
"id": {
|
||||
"attribute": "",
|
||||
"func": [
|
||||
{
|
||||
"template": {
|
||||
"format": "${6}-${0}-${1}"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"lng": {
|
||||
"attribute": "",
|
||||
"index": 3,
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"lat": {
|
||||
"attribute": "",
|
||||
"index": 2,
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"mag": {
|
||||
"attribute": "",
|
||||
"index": 5,
|
||||
"func": [
|
||||
{
|
||||
"toFloat": {}
|
||||
}
|
||||
]
|
||||
},
|
||||
"depth": {
|
||||
"attribute": "",
|
||||
"index": 4
|
||||
},
|
||||
"place": {
|
||||
"attribute": "",
|
||||
"index": 6
|
||||
},
|
||||
"time": {
|
||||
"attribute": "",
|
||||
"func": [
|
||||
{
|
||||
"template": {
|
||||
"format": "${0} ${1}"
|
||||
}
|
||||
},
|
||||
{
|
||||
"fromFormat": {
|
||||
"format": "yyyy-MM-dd HH:mm:ss",
|
||||
"zone": "UTC"
|
||||
}
|
||||
},
|
||||
{
|
||||
"formatReadable": {}
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
import type { DataPoint } from "$lib/components/WaveformChart.svelte";
|
||||
|
||||
export class WaveformService {
|
||||
private buffer: DataPoint[] = [];
|
||||
private maxBufferMs: number;
|
||||
private seis: any;
|
||||
|
||||
constructor(maxBufferMs: number = 300000) {
|
||||
this.maxBufferMs = maxBufferMs;
|
||||
}
|
||||
|
||||
public async init() {
|
||||
if (!this.seis) {
|
||||
this.seis = await import("seisplotjs");
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Parse raw miniseed ArrayBuffer dari HTTP response (tanpa skip WebSocket prefix).
|
||||
* @param expectedStartMs - Hint waktu awal (Unix ms) untuk fallback jika header gagal diparsing.
|
||||
* @param skipTrim - Jika true, buffer tidak di-trim (gunakan untuk data historis besar).
|
||||
*/
|
||||
public processMiniseedRaw(
|
||||
mseedDataBuffer: ArrayBuffer,
|
||||
nominalSampleRateMs: number = 10,
|
||||
expectedStartMs?: number,
|
||||
skipTrim: boolean = false
|
||||
) {
|
||||
if (!this.seis) {
|
||||
console.warn("WaveformService not initialized with seisplotjs, ignoring data.");
|
||||
return;
|
||||
}
|
||||
|
||||
const records = this.seis.miniseed.parseDataRecords(mseedDataBuffer);
|
||||
const newPoints: DataPoint[] = [];
|
||||
|
||||
// Used to chain records sequentially when header timestamps can't be trusted
|
||||
let cumulativeMs: number | null = expectedStartMs ?? null;
|
||||
|
||||
// Reasonable range: 1970 ~ 10 years from now (to reject Date.now()-like fallback noise)
|
||||
const MIN_VALID_TS = 0;
|
||||
const MAX_VALID_TS = Date.now() + 365 * 24 * 60 * 60 * 1000 * 10;
|
||||
|
||||
records.forEach((r: any) => {
|
||||
const samples = r.decompress();
|
||||
if (!samples || samples.length === 0) return;
|
||||
|
||||
const mean = samples.reduce((sum: number, v: number) => sum + v, 0) / samples.length;
|
||||
const demeaned = samples.map((v: number) => v - mean);
|
||||
|
||||
let msPerSample = nominalSampleRateMs;
|
||||
if (r.header && r.header.sampleRate) {
|
||||
msPerSample = 1000 / r.header.sampleRate;
|
||||
}
|
||||
|
||||
// Try to extract start timestamp from header; accept only if it's in valid historical range
|
||||
let startTimeMs: number | null = null;
|
||||
if (r.header && r.header.start) {
|
||||
try {
|
||||
let parsed: number;
|
||||
const h = r.header.start;
|
||||
if (typeof h.toMillis === 'function') {
|
||||
parsed = h.toMillis();
|
||||
} else if (typeof h.toEpochMilli === 'function') {
|
||||
parsed = h.toEpochMilli();
|
||||
} else if (typeof h.toJSDate === 'function') {
|
||||
parsed = h.toJSDate().getTime();
|
||||
} else {
|
||||
parsed = h.valueOf();
|
||||
}
|
||||
|
||||
if (
|
||||
typeof parsed === 'number' &&
|
||||
!isNaN(parsed) &&
|
||||
parsed > MIN_VALID_TS &&
|
||||
parsed < MAX_VALID_TS
|
||||
) {
|
||||
// Extra sanity: if expectedStartMs provided, parsed should be close to it (within ±3 hours)
|
||||
if (expectedStartMs !== undefined) {
|
||||
const diff = Math.abs(parsed - expectedStartMs);
|
||||
if (diff < 3 * 60 * 60 * 1000) {
|
||||
startTimeMs = parsed;
|
||||
}
|
||||
} else {
|
||||
startTimeMs = parsed;
|
||||
}
|
||||
}
|
||||
} catch (e) {
|
||||
console.warn("Failed to parse miniseed header start time:", e);
|
||||
}
|
||||
}
|
||||
|
||||
// Fallback: chain from previous record end OR expectedStartMs
|
||||
if (startTimeMs === null) {
|
||||
if (cumulativeMs !== null) {
|
||||
startTimeMs = cumulativeMs;
|
||||
} else {
|
||||
startTimeMs = Date.now();
|
||||
}
|
||||
}
|
||||
|
||||
for (let i = 0; i < demeaned.length; i++) {
|
||||
newPoints.push({
|
||||
t: startTimeMs! + i * msPerSample,
|
||||
v: demeaned[i],
|
||||
});
|
||||
}
|
||||
|
||||
cumulativeMs = startTimeMs! + demeaned.length * msPerSample;
|
||||
});
|
||||
|
||||
if (skipTrim) {
|
||||
// Add without trimming (historical data can span hours)
|
||||
for (let i = 0; i < newPoints.length; i++) {
|
||||
this.buffer.push(newPoints[i]);
|
||||
}
|
||||
this.buffer.sort((a, b) => a.t - b.t);
|
||||
} else {
|
||||
this.addPoints(newPoints);
|
||||
}
|
||||
}
|
||||
|
||||
public processMiniseed(mseedDataBuffer: ArrayBuffer, nominalSampleRateMs: number = 10) {
|
||||
if (!this.seis) {
|
||||
console.warn("WaveformService not initialized with seisplotjs, ignoring data.");
|
||||
return;
|
||||
}
|
||||
|
||||
const mseedData = mseedDataBuffer.slice(8);
|
||||
const records = this.seis.miniseed.parseDataRecords(mseedData);
|
||||
|
||||
const newPoints: DataPoint[] = [];
|
||||
|
||||
records.forEach((r: any) => {
|
||||
const samples = r.decompress();
|
||||
const mean = samples.reduce((sum: number, v: number) => sum + v, 0) / samples.length;
|
||||
const demeaned = samples.map((v: number) => v - mean);
|
||||
|
||||
let startTimeMs = Date.now();
|
||||
if (r.header && r.header.start) {
|
||||
try {
|
||||
startTimeMs = r.header.start.valueOf();
|
||||
} catch (e) {
|
||||
console.warn(e);
|
||||
}
|
||||
}
|
||||
|
||||
let msPerSample = nominalSampleRateMs;
|
||||
if (r.header && r.header.sampleRate) {
|
||||
msPerSample = 1000 / r.header.sampleRate;
|
||||
}
|
||||
|
||||
for (let i = 0; i < demeaned.length; i++) {
|
||||
newPoints.push({
|
||||
t: startTimeMs + i * msPerSample,
|
||||
v: demeaned[i],
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
this.addPoints(newPoints);
|
||||
}
|
||||
|
||||
public generateDemoData(demoPhase: number, samplesToGenerate: number = 4, msPerSample: number = 10): number {
|
||||
const now = Date.now();
|
||||
let currentPhase = demoPhase;
|
||||
const newPoints: DataPoint[] = [];
|
||||
|
||||
for (let i = 0; i < samplesToGenerate; i++) {
|
||||
currentPhase += 0.1;
|
||||
const noise = (Math.random() - 0.5) * 500;
|
||||
const primaryWave = Math.sin(currentPhase) * 3000;
|
||||
const secondaryWave = Math.cos(currentPhase * 0.5) * 1000;
|
||||
const spike = Math.random() > 0.98 ? (Math.random() - 0.5) * 10000 : 0;
|
||||
|
||||
newPoints.push({
|
||||
t: now - (samplesToGenerate - i - 1) * msPerSample,
|
||||
v: primaryWave + secondaryWave + noise + spike,
|
||||
});
|
||||
}
|
||||
|
||||
this.addPoints(newPoints);
|
||||
return currentPhase;
|
||||
}
|
||||
|
||||
public addPoints(points: DataPoint[]) {
|
||||
if (points.length === 0) return;
|
||||
|
||||
// Use a more performant way to push large arrays if needed, but for miniseed packets this is usually fine
|
||||
for(let i=0; i<points.length; i++){
|
||||
this.buffer.push(points[i]);
|
||||
}
|
||||
|
||||
this.trimBuffer();
|
||||
}
|
||||
|
||||
private trimBuffer() {
|
||||
this.buffer.sort((a, b) => a.t - b.t);
|
||||
|
||||
const latestTime = this.buffer[this.buffer.length - 1].t;
|
||||
const cutoffTime = latestTime - this.maxBufferMs;
|
||||
|
||||
let trimIndex = 0;
|
||||
while (trimIndex < this.buffer.length && this.buffer[trimIndex].t < cutoffTime) {
|
||||
trimIndex++;
|
||||
}
|
||||
|
||||
if (trimIndex > 0) {
|
||||
this.buffer.splice(0, trimIndex);
|
||||
}
|
||||
}
|
||||
|
||||
public getBuffer(): DataPoint[] {
|
||||
return this.buffer;
|
||||
}
|
||||
|
||||
public clearBuffer(): void {
|
||||
this.buffer.length = 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,106 +0,0 @@
|
|||
import { writable, get } from 'svelte/store';
|
||||
import { browser } from '$app/environment';
|
||||
import { demoStore } from './demoStore';
|
||||
|
||||
export type SerialStatus = 'connected' | 'disconnected' | 'unsupported' | 'connecting';
|
||||
|
||||
interface SerialState {
|
||||
status: SerialStatus;
|
||||
error: string | null;
|
||||
}
|
||||
|
||||
function createSerialStore() {
|
||||
const { subscribe, set, update } = writable<SerialState>({
|
||||
status: browser && 'serial' in navigator ? 'disconnected' : 'unsupported',
|
||||
error: null
|
||||
});
|
||||
|
||||
let port: SerialPort | null = null;
|
||||
let writer: WritableStreamDefaultWriter | null = null;
|
||||
|
||||
async function connect() {
|
||||
if (!browser || !('serial' in navigator)) return;
|
||||
|
||||
update(s => ({ ...s, status: 'connecting', error: null }));
|
||||
|
||||
try {
|
||||
port = await navigator.serial.requestPort();
|
||||
await port.open({
|
||||
baudRate: 115200,
|
||||
dataTerminalReady: true,
|
||||
requestToSend: true
|
||||
});
|
||||
writer = port.writable?.getWriter() || null;
|
||||
|
||||
update(s => ({ ...s, status: 'connected' }));
|
||||
|
||||
port.addEventListener('error', () => {
|
||||
console.error('Serial port error:');
|
||||
});
|
||||
|
||||
// Listen for port disconnection
|
||||
port.addEventListener('disconnect', () => {
|
||||
disconnect();
|
||||
});
|
||||
|
||||
} catch (err: any) {
|
||||
console.error('Serial connection error:', err);
|
||||
update(s => ({ ...s, status: 'disconnected', error: err.message }));
|
||||
}
|
||||
}
|
||||
|
||||
async function disconnect() {
|
||||
if (writer) {
|
||||
await writer.releaseLock();
|
||||
writer = null;
|
||||
}
|
||||
if (port) {
|
||||
await port.close();
|
||||
port = null;
|
||||
}
|
||||
update(s => ({ ...s, status: 'disconnected' }));
|
||||
}
|
||||
|
||||
async function sendData(data: any) {
|
||||
if (!writer) return;
|
||||
|
||||
try {
|
||||
const encoder = new TextEncoder();
|
||||
const jsonString = JSON.stringify(data) + '\n';
|
||||
console.log(jsonString);
|
||||
await writer.write(encoder.encode(jsonString));
|
||||
} catch (err) {
|
||||
console.error('Failed to send data:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Auto-subscribe to demoStore for earthquake alerts
|
||||
if (browser) {
|
||||
demoStore.subscribe(state => {
|
||||
if (state.gempaAlert) {
|
||||
sendData({
|
||||
type: 'GEMPA',
|
||||
id: state.gempaAlert.id,
|
||||
mag: state.gempaAlert.mag,
|
||||
// depth: state.gempaAlert.depth,
|
||||
// mmi: state.gempaAlert.mmi,
|
||||
// place: state.gempaAlert.place
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function testConnection() {
|
||||
await sendData({ type: 'TEST', message: 'HEARTBEAT' });
|
||||
}
|
||||
|
||||
return {
|
||||
subscribe,
|
||||
connect,
|
||||
disconnect,
|
||||
sendData,
|
||||
testConnection
|
||||
};
|
||||
}
|
||||
|
||||
export const serialStore = createSerialStore();
|
||||
|
|
@ -1,15 +1,13 @@
|
|||
:root {
|
||||
--orange: #fa0;
|
||||
--red: #e60908;
|
||||
--red: #f23;
|
||||
--glow-rgb: 255, 170, 0;
|
||||
--fill-color: #fa0;
|
||||
--text-color: #fa0;
|
||||
--danger-fill-color: #e60908;
|
||||
--danger-fill-color: #f23;
|
||||
--danger-glow-rgb: 255, 0, 0;
|
||||
--danger-text-color: #e60908;
|
||||
--danger-text-color: #f23;
|
||||
--gutter-size: 8px;
|
||||
--border-width: 3px;
|
||||
color-scheme: dark;
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -37,10 +35,4 @@ body {
|
|||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
:root {
|
||||
--border-width: 1px;
|
||||
}
|
||||
}
|
||||
|
|
@ -383,67 +383,132 @@
|
|||
|
||||
|
||||
.bordered {
|
||||
--text-color: var(--orange);
|
||||
color: var(--text-color);
|
||||
--border-color: rgba(var(--glow-rgb));
|
||||
--border-glow-color: rgba(var(--glow-rgb));
|
||||
border-radius: var(--gutter-size);
|
||||
border-style: solid;
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--border-color);
|
||||
border-width: 3px;
|
||||
border-color: var(--orange);
|
||||
/* box-shadow:
|
||||
inset 0 0 0 1px var(--border-glow-color),
|
||||
0 0 0 1px var(--border-glow-color); */
|
||||
}
|
||||
|
||||
.bordered-bottom {
|
||||
/* color: var(--text-color); */
|
||||
/* --border-glow-color: rgba(var(--glow-rgb)); */
|
||||
color: var(--text-color);
|
||||
--border-glow-color: rgba(var(--glow-rgb));
|
||||
border-color: unset;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
border-bottom: 3px solid rgb(var(--glow-rgb));
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bordered-top {
|
||||
/* color: var(--text-color); */
|
||||
/* --border-glow-color: rgba(var(--glow-rgb)); */
|
||||
color: var(--text-color);
|
||||
--border-glow-color: rgba(var(--glow-rgb));
|
||||
border-color: unset;
|
||||
border-top: var(--border-width) solid var(--border-color);
|
||||
border-top: 3px solid rgb(var(--glow-rgb));
|
||||
}
|
||||
|
||||
.bordered-red {
|
||||
--text-color: var(--red);
|
||||
color: var(--text-color);
|
||||
/* color: var(--danger-text-color);
|
||||
color: var(--danger-text-color);
|
||||
--border-glow-color: rgba(var(--danger-glow-rgb));
|
||||
border-radius: var(--gutter-size);
|
||||
border-style: solid;
|
||||
border-width: 3px;
|
||||
border-color: var(--red); */
|
||||
--border-color: rgba(var(--danger-glow-rgb));
|
||||
border-radius: var(--gutter-size);
|
||||
border-style: solid;
|
||||
border-width: var(--border-width);
|
||||
border-color: var(--border-color);
|
||||
border-color: var(--red);
|
||||
|
||||
}
|
||||
|
||||
.bordered-red-bottom {
|
||||
/* color: var(--danger-text-color); */
|
||||
/* --border-glow-color: rgba(var(--danger-glow-rgb)); */
|
||||
color: var(--danger-text-color);
|
||||
--border-glow-color: rgba(var(--danger-glow-rgb));
|
||||
border-color: unset;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
border-bottom: 3px solid rgb(var(--danger-glow-rgb));
|
||||
|
||||
|
||||
}
|
||||
|
||||
.bordered-red-top {
|
||||
/* color: var(--danger-text-color); */
|
||||
/* --border-glow-color: rgba(var(--danger-glow-rgb)); */
|
||||
color: var(--danger-text-color);
|
||||
--border-glow-color: rgba(var(--danger-glow-rgb));
|
||||
border-color: unset;
|
||||
border-top: var(--border-width) solid var(--border-color);
|
||||
border-top: 3px solid rgb(var(--danger-glow-rgb));
|
||||
}
|
||||
|
||||
.ews-card {
|
||||
background-color: black;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.ews-card-header {
|
||||
padding: 6px;
|
||||
color: var(--orange);
|
||||
position: relative;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
}
|
||||
|
||||
.ews-card-header .ews-card-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ews-card-header button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ews-card-footer {
|
||||
padding: 6px;
|
||||
/* border-top: 3px var(--red) solid; */
|
||||
color: var(--orange);
|
||||
position: relative;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
}
|
||||
|
||||
.ews-card-footer .ews-card-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* .ews-card-content {
|
||||
padding: unset;
|
||||
} */
|
||||
|
||||
.ews-card-content tbody {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.ews-card-float {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.ews-card-float .ews-card-content {
|
||||
display: block;
|
||||
max-height: 45vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.ews-card-close-button {
|
||||
font-size: 24px;
|
||||
color: #e60003;
|
||||
padding: 2px 4px;
|
||||
background-color: black !important;
|
||||
right: 10px !important;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
.parallelogram {
|
||||
height: 30px;
|
||||
|
|
@ -541,19 +606,19 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.-striped {
|
||||
--stripe-color: var(--danger-fill-color);
|
||||
--stripe-size: 15px;
|
||||
.-stripeed {
|
||||
--stripee-color: var(--danger-fill-color);
|
||||
--stripee-size: 15px;
|
||||
--glow-color: rgba(var(--danger-glow-rgb), 0.8);
|
||||
--glow-size: 3px;
|
||||
background-image: repeating-linear-gradient(-45deg,
|
||||
var(--glow-color) calc(-1 * var(--glow-size)),
|
||||
var(--stripe-color) 0,
|
||||
var(--stripe-color) calc(var(--stripe-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripe-size)),
|
||||
var(--glow-color) calc(2 * var(--stripe-size) - var(--glow-size)));
|
||||
var(--stripee-color) 0,
|
||||
var(--stripee-color) calc(var(--stripee-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripee-size)),
|
||||
var(--glow-color) calc(2 * var(--stripee-size) - var(--glow-size)));
|
||||
}
|
||||
|
||||
.-blink {
|
||||
|
|
@ -573,6 +638,31 @@
|
|||
padding-top: var(--label-gutter-size);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ews-card-float .ews-card-content {
|
||||
height: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.ews-card-float.open .ews-card-content {
|
||||
height: unset;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
/* .ews-card-float {
|
||||
margin: auto;
|
||||
right: 0.25rem;
|
||||
left: 0.25rem;
|
||||
} */
|
||||
|
||||
.ews-card-float .ews-card-header {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
.ews-card-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.github-icon {
|
||||
width: 20px;
|
||||
|
|
@ -805,12 +895,8 @@
|
|||
transparent 50%,
|
||||
rgba(255, 0, 0, 0.1) 50%);
|
||||
background-size: 100% 4px;
|
||||
/* animation: scanline 8s linear infinite; */
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.scanline.animate::after {
|
||||
animation: scanline 8s linear infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
table tr td {
|
||||
|
|
@ -978,62 +1064,4 @@ table tr td {
|
|||
|
||||
button {
|
||||
text-box: trim-both cap alphabetic;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.ews-title.internal .text.-characters {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ews-title.badge .text.-characters {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.ews-title.internal .decal {
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* Custom Range Slider */
|
||||
.custom-range {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
height: 4px;
|
||||
background: rgba(255, 165, 0, 0.2);
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.custom-range::-webkit-slider-thumb {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--orange);
|
||||
border: 2px solid black;
|
||||
border-radius: 0; /* Square/Diamond look for EWS */
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.5);
|
||||
transition: all 0.2s ease;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.custom-range::-webkit-slider-thumb:hover {
|
||||
transform: rotate(45deg) scale(1.2);
|
||||
box-shadow: 0 0 15px rgba(var(--glow-rgb), 0.8);
|
||||
}
|
||||
|
||||
.custom-range::-moz-range-thumb {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: var(--orange);
|
||||
border: 2px solid black;
|
||||
border-radius: 0;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 0 10px rgba(var(--glow-rgb), 0.5);
|
||||
transition: all 0.2s ease;
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
|
@ -1,136 +0,0 @@
|
|||
.ews-card {
|
||||
--ews-card-color: var(--orange, #fa0);
|
||||
--ews-card-radius: var(--gutter-size, 8px);
|
||||
--ews-card-border-width: 3px;
|
||||
background-color: black;
|
||||
transition: 0.3s;
|
||||
|
||||
border-radius: var(--ews-card-radius);
|
||||
border-style: solid;
|
||||
border-width: var(--ews-card-border-width);
|
||||
border-color: var(--ews-card-color);
|
||||
}
|
||||
|
||||
.ews-card.ews-card-red {
|
||||
--ews-card-color: var(--red, #e60908);
|
||||
}
|
||||
|
||||
.ews-card-header {
|
||||
padding: 6px;
|
||||
color: var(--ews-card-color);
|
||||
position: relative;
|
||||
border-radius: 10px 10px 0px 0px;
|
||||
border-bottom: var(--ews-card-border-width) solid var(--ews-card-color);
|
||||
}
|
||||
|
||||
.ews-card-header .ews-card-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ews-card-header button {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.ews-card-footer {
|
||||
padding: 6px;
|
||||
color: var(--ews-card-color);
|
||||
position: relative;
|
||||
border-radius: 0px 0px 10px 10px;
|
||||
border-top: var(--ews-card-border-width) solid var(--ews-card-color);
|
||||
}
|
||||
|
||||
.ews-card-footer .ews-card-text {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ews-card-content {
|
||||
color: var(--ews-card-color);
|
||||
}
|
||||
|
||||
|
||||
.ews-card-content::-webkit-scrollbar-track {
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
border-radius: 10px;
|
||||
background-color: rgb(61, 61, 61);
|
||||
}
|
||||
|
||||
.ews-card-content::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
background-color: rgb(61, 61, 61);
|
||||
}
|
||||
|
||||
.ews-card-content::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
|
||||
background-color: var(--red);
|
||||
}
|
||||
|
||||
.ews-card-content tbody {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
.ews-card-float {
|
||||
transition: all 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.ews-card-float .ews-card-content {
|
||||
display: block;
|
||||
max-height: 45vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.ews-card-close-button {
|
||||
font-size: 24px;
|
||||
color: #e60003;
|
||||
padding: 2px 4px;
|
||||
background-color: black !important;
|
||||
right: 10px !important;
|
||||
top: 10px !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
||||
.ews-card {
|
||||
--ews-card-border-width: 1px;
|
||||
}
|
||||
|
||||
.ews-card-float .ews-card-content {
|
||||
display: none;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.ews-card-float.open .ews-card-content {
|
||||
display: block;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.ews-card-float {
|
||||
margin: auto;
|
||||
right: 0.25rem;
|
||||
left: 0.25rem;
|
||||
}
|
||||
|
||||
.ews-card-float .ews-card-header {
|
||||
border-bottom: unset;
|
||||
}
|
||||
|
||||
.ews-card-header {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,304 +0,0 @@
|
|||
/* =============================================
|
||||
HEXAGONAL GRID STYLES
|
||||
============================================= */
|
||||
|
||||
/* --- Shared hex clip-path (flat-top orientation) --- */
|
||||
.ews-hex-clip {
|
||||
clip-path: polygon(24.96% 100%,
|
||||
0% 50%,
|
||||
24.96% 0%,
|
||||
74.87% 0%,
|
||||
99.84% 50%,
|
||||
74.87% 100%);
|
||||
}
|
||||
|
||||
/* --- Shared hex clip-path (pointy-top / rotated 90°) --- */
|
||||
.ews-hex-clip-pointy {
|
||||
clip-path: polygon(0% 25.13%,
|
||||
50% 0%,
|
||||
100% 25.13%,
|
||||
100% 74.87%,
|
||||
50% 100%,
|
||||
0% 74.87%);
|
||||
}
|
||||
|
||||
/* ---- 1. Basic Flat Hex Grid ---- */
|
||||
.ews-hex-grid-flat {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.ews-hex-cell-flat {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 70px;
|
||||
aspect-ratio: 584 / 507;
|
||||
clip-path: polygon(24.96% 100%, 0% 50%, 24.96% 0%, 74.87% 0%, 99.84% 50%, 74.87% 100%);
|
||||
background-color: rgba(255, 170, 0, 0.08);
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.25s ease, transform 0.2s ease;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.ews-hex-cell-flat::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 2px;
|
||||
clip-path: polygon(24.96% 100%, 0% 50%, 24.96% 0%, 74.87% 0%, 99.84% 50%, 74.87% 100%);
|
||||
background-color: rgba(255, 170, 0, 0.04);
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ews-hex-cell-flat:hover {
|
||||
background-color: rgba(255, 170, 0, 0.18);
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.ews-hex-cell-flat.ews-hex-danger {
|
||||
background-color: rgba(255, 34, 51, 0.15);
|
||||
box-shadow: 0 0 12px 2px rgba(255, 34, 51, 0.3);
|
||||
}
|
||||
|
||||
.ews-hex-cell-flat.ews-hex-danger::before {
|
||||
background-color: rgba(255, 34, 51, 0.06);
|
||||
}
|
||||
|
||||
.ews-hex-cell-flat.ews-hex-warn {
|
||||
background-color: rgba(255, 170, 0, 0.15);
|
||||
box-shadow: 0 0 10px 2px rgba(255, 170, 0, 0.25);
|
||||
}
|
||||
|
||||
.ews-hex-cell-flat.ews-hex-safe {
|
||||
background-color: rgba(0, 200, 80, 0.12);
|
||||
box-shadow: 0 0 8px 1px rgba(0, 200, 80, 0.2);
|
||||
}
|
||||
|
||||
.ews-hex-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 2px;
|
||||
color: var(--orange);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* ---- 2. Honeycomb Offset Grid ---- */
|
||||
.ews-hex-honeycomb {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.ews-hex-row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.ews-hex-row-offset {
|
||||
margin-left: calc(72px / 2 + 2px);
|
||||
margin-top: -14px;
|
||||
}
|
||||
|
||||
.ews-hex-hive {
|
||||
position: relative;
|
||||
width: 72px;
|
||||
height: 83px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.2s ease, background-color 0.2s ease;
|
||||
}
|
||||
|
||||
.ews-hex-hive.bg-hex {
|
||||
clip-path: polygon(0% 25.13%, 50% 0%, 100% 25.13%, 100% 74.87%, 50% 100%, 0% 74.87%);
|
||||
display: unset;
|
||||
transition: unset;
|
||||
background-color: transparent;
|
||||
/* height: unset; */
|
||||
|
||||
background-image: url('data:image/svg+xml,<svg width="115" height="133" viewBox="0 0 115 133" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M115 99.1859L57.5 132.25L7.62939e-06 99.1859L7.62939e-06 33.0641L57.5 3.05176e-05L115 33.0641L115 99.1859Z" fill="%23E60003"/><path d="M113.69 98.4426L57.6307 130.678L1.57149 98.4426L1.57149 33.9776L57.6307 1.74199L113.69 33.9776L113.69 98.4426Z" fill="black"/><path d="M111.071 97.0671L57.6309 127.796L4.1913 97.0671L4.1913 35.6145L57.6309 4.88519L111.071 35.6145L111.071 97.0671Z" fill="%23E60003"/></svg>');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.bg-hex.yellow {
|
||||
background-image: url('data:image/svg+xml,<svg width="115" height="133" viewBox="0 0 115 133" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M115 99.1859L57.5 132.25L7.62939e-06 99.1859L7.62939e-06 33.0641L57.5 3.05176e-05L115 33.0641L115 99.1859Z" fill="%23fa0"/><path d="M113.69 98.4426L57.6307 130.678L1.57149 98.4426L1.57149 33.9776L57.6307 1.74199L113.69 33.9776L113.69 98.4426Z" fill="black"/><path d="M111.071 97.0671L57.6309 127.796L4.1913 97.0671L4.1913 35.6145L57.6309 4.88519L111.071 35.6145L111.071 97.0671Z" fill="%23fa0"/></svg>');
|
||||
}
|
||||
|
||||
.ews-hex-hive.bg-hex-flat {
|
||||
clip-path: polygon(24.96% 100%, 0% 50%, 24.96% 0%, 74.87% 0%, 99.84% 50%, 74.87% 100%);
|
||||
display: unset;
|
||||
transition: unset;
|
||||
background-color: transparent;
|
||||
|
||||
background-image: url('data:image/svg+xml,<svg width="584" height="507" viewBox="0 0 584 507" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M145.77 507L0 253.5L145.77 -3.05176e-05H437.28L583.05 253.5L437.28 507H145.77Z" fill="%23E60003"/><path d="M149.046 500.648L6.92932 253.5L149.046 6.35181H433.253L575.37 253.5L433.253 500.648H149.046Z" fill="black"/><path d="M155.007 492L18 253.5L155.007 15H428.993L566 253.5L428.993 492H155.007Z" fill="%23E60003"/></svg>');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.ews-hex-hive.flat {
|
||||
clip-path: polygon(24.96% 100%, 0% 50%, 24.96% 0%, 74.87% 0%, 99.84% 50%, 74.87% 100%);
|
||||
display: unset;
|
||||
transition: unset;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
|
||||
.bg-hex-flat.yellow {
|
||||
background-image: url('data:image/svg+xml,<svg width="584" height="507" viewBox="0 0 584 507" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M145.77 507L0 253.5L145.77 -3.05176e-05H437.28L583.05 253.5L437.28 507H145.77Z" fill="%23fa0"/><path d="M149.046 500.648L6.92932 253.5L149.046 6.35181H433.253L575.37 253.5L433.253 500.648H149.046Z" fill="black"/><path d="M155.007 492L18 253.5L155.007 15H428.993L566 253.5L428.993 492H155.007Z" fill="%23fa0"/></svg>');
|
||||
}
|
||||
|
||||
.ews-hex-hive.ews-hex-danger {
|
||||
background-color: rgba(255, 34, 51, 0.18);
|
||||
filter: drop-shadow(0 0 8px rgba(255, 34, 51, 0.5));
|
||||
}
|
||||
|
||||
.ews-hex-hive.ews-hex-warn {
|
||||
background-color: rgba(255, 170, 0, 0.18);
|
||||
filter: drop-shadow(0 0 6px rgba(255, 170, 0, 0.4));
|
||||
}
|
||||
|
||||
.ews-hex-hive-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 1px;
|
||||
text-align: center;
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
/* ---- 3. Animated Status Hex Cells ---- */
|
||||
.ews-hex-status-cell {
|
||||
position: relative;
|
||||
width: 90px;
|
||||
height: 104px;
|
||||
clip-path: polygon(0% 25.13%, 50% 0%, 100% 25.13%, 100% 74.87%, 50% 100%, 0% 74.87%);
|
||||
background-color: rgba(255, 170, 0, 0.06);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: transform 0.25s ease;
|
||||
}
|
||||
|
||||
.ews-hex-status-cell::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 3px;
|
||||
clip-path: polygon(0% 25.13%, 50% 0%, 100% 25.13%, 100% 74.87%, 50% 100%, 0% 74.87%);
|
||||
background: transparent;
|
||||
border: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.ews-hex-status-cell:hover {
|
||||
transform: scale(1.08);
|
||||
}
|
||||
|
||||
.ews-hex-status-cell.ews-hex-danger {
|
||||
background-color: rgba(255, 34, 51, 0.12);
|
||||
filter: drop-shadow(0 0 10px rgba(255, 34, 51, 0.45));
|
||||
}
|
||||
|
||||
.ews-hex-status-cell.ews-hex-warn {
|
||||
background-color: rgba(255, 170, 0, 0.12);
|
||||
filter: drop-shadow(0 0 8px rgba(255, 170, 0, 0.4));
|
||||
}
|
||||
|
||||
.ews-hex-status-cell.ews-hex-caution {
|
||||
background-color: rgba(255, 255, 0, 0.08);
|
||||
filter: drop-shadow(0 0 6px rgba(255, 255, 0, 0.25));
|
||||
}
|
||||
|
||||
.ews-hex-status-cell.ews-hex-safe {
|
||||
background-color: rgba(0, 200, 80, 0.08);
|
||||
filter: drop-shadow(0 0 6px rgba(0, 200, 80, 0.2));
|
||||
}
|
||||
|
||||
.ews-hex-status-cell.ews-hex-pulse {
|
||||
animation: hexPulse 1.4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes hexPulse {
|
||||
|
||||
0%,
|
||||
100% {
|
||||
filter: drop-shadow(0 0 8px rgba(255, 34, 51, 0.3));
|
||||
}
|
||||
|
||||
50% {
|
||||
filter: drop-shadow(0 0 22px rgba(255, 34, 51, 0.85));
|
||||
}
|
||||
}
|
||||
|
||||
.ews-hex-status-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 2px;
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
/* ---- 4. Hex with Strip Decoration ---- */
|
||||
.ews-hex-stripe-cell {
|
||||
position: relative;
|
||||
width: 110px;
|
||||
height: 127px;
|
||||
clip-path: polygon(0% 25.13%, 50% 0%, 100% 25.13%, 100% 74.87%, 50% 100%, 0% 74.87%);
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(255, 170, 0, 0.05);
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.ews-hex-stripe-cell:hover {
|
||||
transform: scale(1.06);
|
||||
}
|
||||
|
||||
.ews-hex-stripe-cell.ews-hex-danger {
|
||||
background-color: rgba(255, 34, 51, 0.08);
|
||||
}
|
||||
|
||||
.ews-hex-stripe-bg {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.ews-hex-stripe-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
gap: 1px;
|
||||
color: var(--orange);
|
||||
background-color: rgba(0, 0, 0, 0.55);
|
||||
padding: 6px 10px;
|
||||
clip-path: polygon(0% 25.13%, 50% 0%, 100% 25.13%, 100% 74.87%, 50% 100%, 0% 74.87%);
|
||||
width: 88%;
|
||||
height: 88%;
|
||||
}
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
.ews-hex-shape {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 0.866 / 1;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='115' height='133' viewBox='0 0 115 133' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M115 99.1859L57.5 132.25L7.62939e-06 99.1859L7.62939e-06 33.0641L57.5 3.05176e-05L115 33.0641L115 99.1859Z' fill='%23E60003'/%3E%3Cpath d='M113.69 98.4426L57.6307 130.678L1.57149 98.4426L1.57149 33.9776L57.6307 1.74199L113.69 33.9776L113.69 98.4426Z' fill='black'/%3E%3Cpath d='M111.071 97.0671L57.6309 127.796L4.1913 97.0671L4.1913 35.6145L57.6309 4.88519L111.071 35.6145L111.071 97.0671Z' fill='%23E60003'/%3E%3C/svg%3E%0A");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
--polygon-shape: polygon(0% 25.13%,
|
||||
/* top-left point */
|
||||
50% 0%,
|
||||
/* top center point */
|
||||
100% 25.13%,
|
||||
/* top-right point */
|
||||
100% 74.87%,
|
||||
/* bottom-right point */
|
||||
50% 100%,
|
||||
/* bottom center point */
|
||||
0% 74.87%
|
||||
/* bottom-left point */
|
||||
);
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
|
||||
.ews-hex-shape.clip-content {
|
||||
overflow: hidden;
|
||||
clip-path: var(--polygon-shape);
|
||||
}
|
||||
|
||||
.ews-hex-shape.clip-content .inner-content {
|
||||
--ews-hex-padding: 10px;
|
||||
width: calc(100% - var(--ews-hex-padding));
|
||||
height: calc(100% - var(--ews-hex-padding));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
clip-path: var(--polygon-shape);
|
||||
}
|
||||
|
||||
.ews-hex-shape.flat-top {
|
||||
aspect-ratio: 1.1547 / 1;
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='584' height='507' viewBox='0 0 584 507' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M145.77 507L0 253.5L145.77 -3.05176e-05H437.28L583.05 253.5L437.28 507H145.77Z' fill='%23E60003'/%3E%3Cpath d='M149.046 500.648L6.92932 253.5L149.046 6.35181H433.253L575.37 253.5L433.253 500.648H149.046Z' fill='black'/%3E%3Cpath d='M155.007 492L18 253.5L155.007 15H428.993L566 253.5L428.993 492H155.007Z' fill='%23E60003'/%3E%3C/svg%3E%0A");
|
||||
--polygon-shape: polygon(24.96% 100%,
|
||||
/* 145.77/584, 507/507 */
|
||||
0% 50%,
|
||||
/* 0/584, 253.5/507 */
|
||||
24.96% 0%,
|
||||
/* 145.77/584, 0/507 */
|
||||
74.87% 0%,
|
||||
/* 437.28/584, 0/507 */
|
||||
99.84% 50%,
|
||||
/* 583.05/584, 253.5/507 */
|
||||
74.87% 100%
|
||||
/* 437.28/584, 507/507 */
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
.ews-hex-shape.orange {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='115' height='133' viewBox='0 0 115 133' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M115 99.1859L57.5 132.25L7.62939e-06 99.1859L7.62939e-06 33.0641L57.5 3.05176e-05L115 33.0641L115 99.1859Z' fill='%23fa0'/%3E%3Cpath d='M113.69 98.4426L57.6307 130.678L1.57149 98.4426L1.57149 33.9776L57.6307 1.74199L113.69 33.9776L113.69 98.4426Z' fill='black'/%3E%3Cpath d='M111.071 97.0671L57.6309 127.796L4.1913 97.0671L4.1913 35.6145L57.6309 4.88519L111.071 35.6145L111.071 97.0671Z' fill='%23fa0'/%3E%3C/svg%3E%0A");
|
||||
}
|
||||
|
||||
.ews-hex-shape.orange.flat-top {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='584' height='507' viewBox='0 0 584 507' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M145.77 507L0 253.5L145.77 -3.05176e-05H437.28L583.05 253.5L437.28 507H145.77Z' fill='%23fa0'/%3E%3Cpath d='M149.046 500.648L6.92932 253.5L149.046 6.35181H433.253L575.37 253.5L433.253 500.648H149.046Z' fill='black'/%3E%3Cpath d='M155.007 492L18 253.5L155.007 15H428.993L566 253.5L428.993 492H155.007Z' fill='%23fa0'/%3E%3C/svg%3E%0A");
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -1,266 +0,0 @@
|
|||
.ews-rib-layout {
|
||||
display: inline-flex;
|
||||
height: auto;
|
||||
justify-content: center;
|
||||
gap: 1rem;
|
||||
width: 100%;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ews-rib-layout__branch {
|
||||
position: relative;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.ews-rib-layout__branch {
|
||||
padding-top: 2.5rem;
|
||||
padding-bottom: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.ews-rib-layout__spine {
|
||||
position: absolute;
|
||||
height: auto;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 0.25rem;
|
||||
transform: translateX(-50%);
|
||||
z-index: 0;
|
||||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
.ews-rib-layout__grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.ews-rib-layout__node {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ews-rib-layout__node--left {
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
padding-right: 0;
|
||||
grid-column-start: 1;
|
||||
}
|
||||
|
||||
.ews-rib-layout__node--right {
|
||||
justify-content: flex-start;
|
||||
padding-left: 0;
|
||||
grid-column-start: 2;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.ews-rib-layout__node-content {
|
||||
position: relative;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ews-rib-layout__connector-wrapper {
|
||||
width: 6rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ews-rib-layout__connector-wrapper--left {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.ews-rib-layout__connector-wrapper--right {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.ews-rib-layout__connector-line {
|
||||
height: 2px;
|
||||
width: 6rem;
|
||||
z-index: 0;
|
||||
background-color: var(--orange);
|
||||
}
|
||||
|
||||
.ews-rib-layout__connector-text {
|
||||
font-weight: 700;
|
||||
font-size: 0.75rem;
|
||||
line-height: 1rem;
|
||||
text-transform: uppercase;
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
z-index: 10;
|
||||
color: var(--orange);
|
||||
}
|
||||
|
||||
.ews-rib-layout__connector-text--left {
|
||||
left: 0.5rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.ews-rib-layout__connector-text--right {
|
||||
right: 0.5rem;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ews-rib-node {
|
||||
--bg-url: url('data:image/svg+xml,<svg width="500" height="100" viewBox="0 0 500 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M500 0H37.5414L-1.63437e-05 100H462.459L500 0Z" fill="%2300FF80"/><path d="M168.5 0H37.1618L30.5 19H161.838L168.5 0Z" fill="%23FC8416"/></svg>');
|
||||
background-image: var(--bg-url);
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
width: 6rem;
|
||||
height: 1.5rem;
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
margin-top: 1.5rem;
|
||||
|
||||
margin-right: -0.5rem;
|
||||
}
|
||||
|
||||
.parent-node {
|
||||
transform: translateX(0px);
|
||||
rotate: -21deg !important;
|
||||
transition: all 0.2s ease-in-out;
|
||||
margin-left: 0px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.parent-node.flip {
|
||||
rotate: 21deg !important;
|
||||
}
|
||||
|
||||
.node:hover .parent-node {
|
||||
cursor: pointer;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ews-rib-node.danger {
|
||||
--bg-url: url('data:image/svg+xml,<svg width="500" height="100" viewBox="0 0 500 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M500 0H37.5414L-1.63437e-05 100H462.459L500 0Z" fill="%23E60003"/><path d="M168.5 0H37.1618L30.5 19H161.838L168.5 0Z" fill="%23FC8416"/></svg>');
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ews-rib-node.flip {
|
||||
margin-left: -0.5rem;
|
||||
--bg-url: url('data:image/svg+xml,<svg width="500" height="100" viewBox="0 0 500 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H462.459L500 100H37.5415L0 0Z" fill="%2300FF80"/><path d="M0 0H131.338L138 19H6.66178L0 0Z" fill="%23FC8416"/></svg>');
|
||||
}
|
||||
|
||||
.node-flip:hover .parent-node {
|
||||
cursor: pointer;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.ews-rib-node.flip.danger {
|
||||
--bg-url: url('data:image/svg+xml,<svg width="500" height="100" viewBox="0 0 500 100" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0H462.459L500 100H37.5415L0 0Z" fill="%23E60003"/><path d="M0 0H131.338L138 19H6.66178L0 0Z" fill="%23FC8416"/></svg>');
|
||||
}
|
||||
|
||||
|
||||
.ews-rib-node.slide-fade-in {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
animation: slideFadeIn 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
|
||||
.ews-rib-node-flip.slide-fade-in {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
animation: slideFadeInFlip 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
|
||||
/* Slide and fade in animation */
|
||||
.slide-fade-in {
|
||||
animation: slideFadeIn 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes slideFadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(-15px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-fade-in-flip {
|
||||
animation: slideFadeInFlip 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes slideFadeInFlip {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
transform: translateX(15px);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.line-node {
|
||||
width: 0%;
|
||||
animation: slideWidth 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
|
||||
@keyframes slideWidth {
|
||||
0% {
|
||||
width: 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
width: calc(var(--spacing) * 24);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.line-central {
|
||||
height: 0%;
|
||||
animation: slideHeight 0.5s ease-in-out forwards;
|
||||
}
|
||||
|
||||
@keyframes slideHeight {
|
||||
0% {
|
||||
height: 0%;
|
||||
}
|
||||
|
||||
100% {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,128 +0,0 @@
|
|||
/* Strip Bar Styles */
|
||||
.ews-stripe-wrapper {
|
||||
width: max(200vw, 2000px);
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.ews-stripe-wrapper.vertical {
|
||||
height: 100%;
|
||||
width: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.ews-stripe-bar {
|
||||
width: max(200vw, 2000px);
|
||||
height: 100%;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
margin-right: 0px !important;
|
||||
margin-left: 0px !important;
|
||||
/* margin-bottom: -5px; */
|
||||
--ews-ews-stripe-color: var(--orange, #fa0);
|
||||
--ews-ews-stripe-size: 15px;
|
||||
--ews-glow-color: rgba(255, 94, 0, 0.8);
|
||||
--ews-glow-size: 3px;
|
||||
background-image: repeating-linear-gradient(-45deg,
|
||||
var(--ews-glow-color) calc(-1 * var(--ews-glow-size)),
|
||||
var(--ews-ews-stripe-color) 0,
|
||||
var(--ews-ews-stripe-color) calc(var(--ews-ews-stripe-size) - var(--ews-glow-size) / 2),
|
||||
var(--ews-glow-color) calc(var(--ews-ews-stripe-size) + var(--ews-glow-size) / 2),
|
||||
transparent calc(var(--ews-ews-stripe-size) + var(--ews-glow-size) / 2),
|
||||
transparent calc(2 * var(--ews-ews-stripe-size)),
|
||||
var(--ews-glow-color) calc(2 * var(--ews-ews-stripe-size) - var(--ews-glow-size)));
|
||||
/* background-size: var(--background-width) var(--background-height); */
|
||||
background-size: 47px 47px;
|
||||
}
|
||||
|
||||
.ews-stripe-bar.red {
|
||||
--ews-ews-stripe-color: var(--red, #e60908);
|
||||
--ews-ews-stripe-size: 15px;
|
||||
--ews-glow-color: rgba(255, 17, 0, 0.8);
|
||||
--ews-glow-size: 3px;
|
||||
}
|
||||
|
||||
.ews-stripe-bar.vertical {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
|
||||
.ews-stripe-bar-red {
|
||||
width: max(200vw, 2000px);
|
||||
height: 30px;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
/* margin-bottom: -5px; */
|
||||
--ews-ews-stripe-color: var(--red, #e60908);
|
||||
--ews-ews-stripe-size: 15px;
|
||||
--ews-glow-color: rgba(255, 17, 0, 0.8);
|
||||
--ews-glow-size: 3px;
|
||||
background-image: repeating-linear-gradient(-45deg,
|
||||
var(--ews-glow-color) calc(-1 * var(--ews-glow-size)),
|
||||
var(--ews-ews-stripe-color) 0,
|
||||
var(--ews-ews-stripe-color) calc(var(--ews-ews-stripe-size) - var(--ews-glow-size) / 2),
|
||||
var(--ews-glow-color) calc(var(--ews-ews-stripe-size) + var(--ews-glow-size) / 2),
|
||||
transparent calc(var(--ews-ews-stripe-size) + var(--ews-glow-size) / 2),
|
||||
transparent calc(2 * var(--ews-ews-stripe-size)),
|
||||
var(--ews-glow-color) calc(2 * var(--ews-ews-stripe-size) - var(--ews-glow-size)));
|
||||
}
|
||||
|
||||
.ews-stripe-bar-vertical {
|
||||
height: max(2000px, 200vh);
|
||||
transform: translate3d(0, 0, 0);
|
||||
--ews-ews-stripe-color: var(--orange, #fa0);
|
||||
--ews-ews-stripe-size: 15px;
|
||||
--ews-glow-color: rgba(255, 94, 0, 0.8);
|
||||
--ews-glow-size: 3px;
|
||||
background-image: repeating-linear-gradient(45deg,
|
||||
var(--ews-glow-color) calc(-1 * var(--ews-glow-size)),
|
||||
var(--ews-ews-stripe-color) 0,
|
||||
var(--ews-ews-stripe-color) calc(var(--ews-ews-stripe-size) - var(--ews-glow-size) / 2),
|
||||
var(--ews-glow-color) calc(var(--ews-ews-stripe-size) + var(--ews-glow-size) / 2),
|
||||
transparent calc(var(--ews-ews-stripe-size) + var(--ews-glow-size) / 2),
|
||||
transparent calc(2 * var(--ews-ews-stripe-size)),
|
||||
var(--ews-glow-color) calc(2 * var(--ews-ews-stripe-size) - var(--ews-glow-size)));
|
||||
}
|
||||
|
||||
.ews-stripe-bar-red-vertical {
|
||||
height: max(2000px, 200vh);
|
||||
transform: translate3d(0, 0, 0);
|
||||
--ews-ews-stripe-color: var(--red, #e60908);
|
||||
--ews-ews-stripe-size: 15px;
|
||||
--ews-glow-color: rgba(255, 17, 0, 0.8);
|
||||
--ews-glow-size: 3px;
|
||||
background-image: repeating-linear-gradient(45deg,
|
||||
var(--ews-glow-color) calc(-1 * var(--ews-glow-size)),
|
||||
var(--ews-ews-stripe-color) 0,
|
||||
var(--ews-ews-stripe-color) calc(var(--ews-ews-stripe-size) - var(--ews-glow-size) / 2),
|
||||
var(--ews-glow-color) calc(var(--ews-ews-stripe-size) + var(--ews-glow-size) / 2),
|
||||
transparent calc(var(--ews-ews-stripe-size) + var(--ews-glow-size) / 2),
|
||||
transparent calc(2 * var(--ews-ews-stripe-size)),
|
||||
var(--ews-glow-color) calc(2 * var(--ews-ews-stripe-size) - var(--ews-glow-size)));
|
||||
}
|
||||
|
||||
.ews-stripe-wrapper-vertical {
|
||||
height: max(200vh, 2000px);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
margin: 0px !important;
|
||||
padding: 0px !important;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.ews-stripe {
|
||||
background-color: black;
|
||||
width: 100vw;
|
||||
border-top: 1px solid var(--red, #e60908);
|
||||
border-bottom: 1px solid var(--red, #e60908);
|
||||
position: fixed;
|
||||
}
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
.ews-waveform-chart-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
cursor: crosshair;
|
||||
}
|
||||
|
||||
.ews-waveform-chart-canvas {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
touch-action: none;
|
||||
z-index: 0;
|
||||
}
|
||||
|
|
@ -26,25 +26,25 @@
|
|||
margin-right: 0px !important;
|
||||
margin-left: 0px !important;
|
||||
/* margin-bottom: -5px; */
|
||||
--stripe-color: var(--orange);
|
||||
--stripe-size: 15px;
|
||||
--stripee-color: var(--orange);
|
||||
--stripee-size: 15px;
|
||||
--glow-color: rgba(255, 94, 0, 0.8);
|
||||
--glow-size: 3px;
|
||||
background-image: repeating-linear-gradient(-45deg,
|
||||
var(--glow-color) calc(-1 * var(--glow-size)),
|
||||
var(--stripe-color) 0,
|
||||
var(--stripe-color) calc(var(--stripe-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripe-size)),
|
||||
var(--glow-color) calc(2 * var(--stripe-size) - var(--glow-size)));
|
||||
var(--stripee-color) 0,
|
||||
var(--stripee-color) calc(var(--stripee-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripee-size)),
|
||||
var(--glow-color) calc(2 * var(--stripee-size) - var(--glow-size)));
|
||||
/* background-size: var(--background-width) var(--background-height); */
|
||||
background-size: 47px 47px;
|
||||
}
|
||||
|
||||
.stripe-bar.red {
|
||||
--stripe-color: var(--red);
|
||||
--stripe-size: 15px;
|
||||
--stripee-color: var(--red);
|
||||
--stripee-size: 15px;
|
||||
--glow-color: rgba(255, 17, 0, 0.8);
|
||||
--glow-size: 3px;
|
||||
}
|
||||
|
|
@ -63,52 +63,52 @@
|
|||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
/* margin-bottom: -5px; */
|
||||
--stripe-color: var(--red);
|
||||
--stripe-size: 15px;
|
||||
--stripee-color: var(--red);
|
||||
--stripee-size: 15px;
|
||||
--glow-color: rgba(255, 17, 0, 0.8);
|
||||
--glow-size: 3px;
|
||||
background-image: repeating-linear-gradient(-45deg,
|
||||
var(--glow-color) calc(-1 * var(--glow-size)),
|
||||
var(--stripe-color) 0,
|
||||
var(--stripe-color) calc(var(--stripe-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripe-size)),
|
||||
var(--glow-color) calc(2 * var(--stripe-size) - var(--glow-size)));
|
||||
var(--stripee-color) 0,
|
||||
var(--stripee-color) calc(var(--stripee-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripee-size)),
|
||||
var(--glow-color) calc(2 * var(--stripee-size) - var(--glow-size)));
|
||||
}
|
||||
|
||||
.stripe-bar-vertical {
|
||||
height: max(2000px, 200vh);
|
||||
transform: translate3d(0, 0, 0);
|
||||
--stripe-color: var(--orange);
|
||||
--stripe-size: 15px;
|
||||
--stripee-color: var(--orange);
|
||||
--stripee-size: 15px;
|
||||
--glow-color: rgba(255, 94, 0, 0.8);
|
||||
--glow-size: 3px;
|
||||
background-image: repeating-linear-gradient(45deg,
|
||||
var(--glow-color) calc(-1 * var(--glow-size)),
|
||||
var(--stripe-color) 0,
|
||||
var(--stripe-color) calc(var(--stripe-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripe-size)),
|
||||
var(--glow-color) calc(2 * var(--stripe-size) - var(--glow-size)));
|
||||
var(--stripee-color) 0,
|
||||
var(--stripee-color) calc(var(--stripee-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripee-size)),
|
||||
var(--glow-color) calc(2 * var(--stripee-size) - var(--glow-size)));
|
||||
}
|
||||
|
||||
.stripe-bar-red-vertical {
|
||||
height: max(2000px, 200vh);
|
||||
transform: translate3d(0, 0, 0);
|
||||
--stripe-color: var(--red);
|
||||
--stripe-size: 15px;
|
||||
--stripee-color: var(--red);
|
||||
--stripee-size: 15px;
|
||||
--glow-color: rgba(255, 17, 0, 0.8);
|
||||
--glow-size: 3px;
|
||||
background-image: repeating-linear-gradient(45deg,
|
||||
var(--glow-color) calc(-1 * var(--glow-size)),
|
||||
var(--stripe-color) 0,
|
||||
var(--stripe-color) calc(var(--stripe-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripe-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripe-size)),
|
||||
var(--glow-color) calc(2 * var(--stripe-size) - var(--glow-size)));
|
||||
var(--stripee-color) 0,
|
||||
var(--stripee-color) calc(var(--stripee-size) - var(--glow-size) / 2),
|
||||
var(--glow-color) calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(var(--stripee-size) + var(--glow-size) / 2),
|
||||
transparent calc(2 * var(--stripee-size)),
|
||||
var(--glow-color) calc(2 * var(--stripee-size) - var(--glow-size)));
|
||||
}
|
||||
|
||||
.stripe-wrapper-vertical {
|
||||
|
|
|
|||
|
|
@ -166,7 +166,6 @@
|
|||
/* Textarea variant */
|
||||
.ews-textarea {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color-scheme: dark;
|
||||
color: var(--text-color);
|
||||
font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
|
||||
font-size: 0.875rem;
|
||||
|
|
@ -215,7 +214,6 @@
|
|||
/* Select variant */
|
||||
.ews-select {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
color-scheme: dark;
|
||||
color: var(--text-color);
|
||||
font-family: "Roboto Condensed", Arial, Helvetica, sans-serif;
|
||||
text-transform: uppercase;
|
||||
|
|
|
|||
|
|
@ -1,67 +0,0 @@
|
|||
export interface Snapshot {
|
||||
id: string;
|
||||
timestamp: number;
|
||||
time: string;
|
||||
place: string;
|
||||
mag: number | string;
|
||||
imageBase64: string;
|
||||
}
|
||||
|
||||
const DB_NAME = "ews-snapshots-db";
|
||||
const DB_VERSION = 1;
|
||||
const STORE_NAME = "snapshots";
|
||||
|
||||
export function openDB(): Promise<IDBDatabase> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const request = indexedDB.open(DB_NAME, DB_VERSION);
|
||||
request.onupgradeneeded = (event) => {
|
||||
const db = (event.target as IDBOpenDBRequest).result;
|
||||
if (!db.objectStoreNames.contains(STORE_NAME)) {
|
||||
db.createObjectStore(STORE_NAME, { keyPath: "id" });
|
||||
}
|
||||
};
|
||||
request.onsuccess = (event) => {
|
||||
resolve((event.target as IDBOpenDBRequest).result);
|
||||
};
|
||||
request.onerror = (event) => {
|
||||
reject((event.target as IDBOpenDBRequest).error);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
export async function saveSnapshot(snapshot: Snapshot): Promise<void> {
|
||||
const db = await openDB();
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction([STORE_NAME], "readwrite");
|
||||
const store = transaction.objectStore(STORE_NAME);
|
||||
const request = store.put(snapshot);
|
||||
request.onsuccess = () => resolve();
|
||||
request.onerror = () => reject(request.error);
|
||||
});
|
||||
}
|
||||
|
||||
export async function getSnapshots(): Promise<Snapshot[]> {
|
||||
const db = await openDB();
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction([STORE_NAME], "readonly");
|
||||
const store = transaction.objectStore(STORE_NAME);
|
||||
const request = store.getAll();
|
||||
request.onsuccess = () => {
|
||||
const results = request.result as Snapshot[];
|
||||
results.sort((a, b) => b.timestamp - a.timestamp); // newest first
|
||||
resolve(results);
|
||||
};
|
||||
request.onerror = () => reject(request.error);
|
||||
});
|
||||
}
|
||||
|
||||
export async function deleteSnapshot(id: string): Promise<void> {
|
||||
const db = await openDB();
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = db.transaction([STORE_NAME], "readwrite");
|
||||
const store = transaction.objectStore(STORE_NAME);
|
||||
const request = store.delete(id);
|
||||
request.onsuccess = () => resolve();
|
||||
request.onerror = () => reject(request.error);
|
||||
});
|
||||
}
|
||||
|
|
@ -10,12 +10,11 @@ export function createGempaPopupHTML(data: {
|
|||
time: string;
|
||||
lat: number;
|
||||
lng: number;
|
||||
place?: string;
|
||||
}): string {
|
||||
return `
|
||||
<div class="ews-card ews-card-red min-h-48 min-w-48 whitespace-pre-wrap" data-id="${data.id}">
|
||||
<div class="ews-card bordered-red min-h-48 min-w-48 whitespace-pre-wrap" data-id="${data.id}">
|
||||
<div class="ews-card-header bordered-red-bottom overflow-hidden">
|
||||
<div class="ews-stripe-wrapper " style="height: 30px;"><div class="ews-stripe-bar red loop-stripe reverse anim-duration-20"></div> <div class="ews-stripe-bar red loop-stripe reverse anim-duration-20"></div></div>
|
||||
<div class="stripe-wrapper"><div class="stripe-bar-red loop-stripe-reverse anim-duration-20"></div><div class="stripe-bar-red loop-stripe-reverse anim-duration-20"></div></div>
|
||||
<div class="absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center">
|
||||
<p class="p-1 bg-black font-bold text-xs ews-title">EARTHQUAKE</p>
|
||||
</div>
|
||||
|
|
@ -24,7 +23,6 @@ export function createGempaPopupHTML(data: {
|
|||
<table class="w-full">
|
||||
<tbody>
|
||||
<tr><td class="flex">Magnitudo</td><td class="text-right break-words pl-2">${Number(data.mag).toFixed(1)}</td></tr>
|
||||
<tr><td class="flex">Place</td><td class="text-right break-words pl-2">${data.place}</td></tr>
|
||||
<tr><td class="flex">Kedalaman</td><td class="text-right break-words pl-2">${data.depth}</td></tr>
|
||||
<tr><td class="flex">Waktu</td><td class="text-right break-words pl-2">${data.time}</td></tr>
|
||||
<tr><td class="flex">Lokasi (Lat,Lng)</td><td class="text-right break-words pl-2">${data.lat} , ${data.lng}</td></tr>
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
</svelte:head>
|
||||
|
||||
<div class="backgroundline absolute inset-0 pointer-events-none z-10"></div>
|
||||
<div class="no-snapshot scanline fixed inset-0 pointer-events-none z-10"></div>
|
||||
<div class="scanline fixed inset-0 pointer-events-none z-10"></div>
|
||||
{@render children()}
|
||||
|
||||
{#if $demoStore.gempaAlert}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
File diff suppressed because it is too large
Load diff
|
|
@ -7,16 +7,12 @@
|
|||
import type { TitikTsunami } from "$lib/components/TitikTsunami";
|
||||
import HexGrid from "$lib/components/HexGrid.svelte";
|
||||
|
||||
// import Highlight from "svelte-highlight";
|
||||
// import css from "svelte-highlight/languages/css";
|
||||
// import vbscriptHtml from "svelte-highlight/languages/vbscript-html";
|
||||
import Highlight from "svelte-highlight";
|
||||
import css from "svelte-highlight/languages/css";
|
||||
import vbscriptHtml from "svelte-highlight/languages/vbscript-html";
|
||||
import StripeBar from "$lib/components/StripeBar.svelte";
|
||||
import InfiniteScroll from "$lib/components/InfiniteScroll.svelte";
|
||||
import HexShape from "$lib/components/HexShape.svelte";
|
||||
import MentalToxicityLevel from "$lib/components/MentalToxicityLevel.svelte";
|
||||
import ThreadedComments, {
|
||||
type ThreadTone,
|
||||
} from "$lib/components/ThreadedComments.svelte";
|
||||
|
||||
let showGempaBumiAlert = $state(false);
|
||||
let showTsunamiAlert = $state(false);
|
||||
|
|
@ -52,103 +48,13 @@
|
|||
{ label: "ZONA F", val: "5.9", warn: true },
|
||||
{ label: "ZONA G", val: "8.1", danger: true },
|
||||
];
|
||||
|
||||
const threadedSpineItems: {
|
||||
id: string;
|
||||
label: string;
|
||||
level: number;
|
||||
tone: ThreadTone;
|
||||
}[] = [
|
||||
{ id: "spine-1", label: "MAIN THREAD TOPIC", level: 1, tone: "danger" },
|
||||
{ id: "spine-2", label: "FOLLOW-UP COMMENT", level: 2, tone: "normal" },
|
||||
{ id: "spine-3", label: "NESTED DETAIL NOTE", level: 3, tone: "normal" },
|
||||
];
|
||||
|
||||
const threadedNestedItems: {
|
||||
id: string;
|
||||
label: string;
|
||||
level: number;
|
||||
tone: ThreadTone;
|
||||
children?: typeof threadedNestedItems;
|
||||
}[] = [
|
||||
{
|
||||
id: "threaded-1",
|
||||
label: "MAIN THREAD TOPIC",
|
||||
level: 1,
|
||||
tone: "danger",
|
||||
children: [
|
||||
{
|
||||
id: "threaded-1-1",
|
||||
label: "REPLY CHILD A",
|
||||
level: 2,
|
||||
tone: "normal",
|
||||
children: [
|
||||
{
|
||||
id: "threaded-1-1-1",
|
||||
label: "DEEP NESTED REPLY",
|
||||
level: 3,
|
||||
tone: "normal",
|
||||
children: [
|
||||
{
|
||||
id: "threaded-1-1-1-1",
|
||||
label: "DEEP DEEP NESTED REPLY",
|
||||
level: 4,
|
||||
tone: "muted",
|
||||
},
|
||||
{
|
||||
id: "threaded-1-1-1-2",
|
||||
label: "DEEP DEEP NESTED REPLY",
|
||||
level: 4,
|
||||
tone: "muted",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "threaded-1-2",
|
||||
label: "REPLY CHILD B",
|
||||
level: 2,
|
||||
tone: "muted",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "threaded-2",
|
||||
label: "SECOND COMMENT",
|
||||
level: 1,
|
||||
tone: "normal",
|
||||
children: [
|
||||
{
|
||||
id: "threaded-2-1",
|
||||
label: "REPLY TO SECOND",
|
||||
level: 2,
|
||||
tone: "normal",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "threaded-3",
|
||||
label: "THIRD COMMENT",
|
||||
level: 1,
|
||||
tone: "muted",
|
||||
},
|
||||
];
|
||||
|
||||
let lastToggledId = $state<string | null>(null);
|
||||
let lastToggledState = $state<boolean | null>(null);
|
||||
|
||||
function handleToggle(id: string, collapsed: boolean) {
|
||||
lastToggledId = id;
|
||||
lastToggledState = collapsed;
|
||||
}
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Showcase UI Components</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="p-8 min-h-screen max-w-4xl mx-auto text-xs">
|
||||
<div class="p-8 min-h-screen w-4xl mx-auto text-xs">
|
||||
<div class="mb-8">
|
||||
<h1 class="text-3xl font-bold mb-2">Showcase UI Components</h1>
|
||||
</div>
|
||||
|
|
@ -181,11 +87,6 @@
|
|||
<StripeBar color="red" loop={true} reverse={true} duration={20}
|
||||
></StripeBar>
|
||||
</div>
|
||||
|
||||
<p>Flip</p>
|
||||
<div class="h-[30px]">
|
||||
<StripeBar className="my-2 -scale-x-100"></StripeBar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="w-full">
|
||||
|
|
@ -212,7 +113,6 @@
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- CARD DEMO -->
|
||||
<section>
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
||||
|
|
@ -295,30 +195,34 @@
|
|||
</div>
|
||||
<div class="flex gap-2 w-full justify-center items-center">
|
||||
<div class="">
|
||||
<HexShape clipContent={true} color="orange" className="h-[100px]">
|
||||
<StripeBar
|
||||
className="bg-black"
|
||||
loop={true}
|
||||
reverse={true}
|
||||
duration={20}
|
||||
color="red"
|
||||
></StripeBar>
|
||||
</HexShape>
|
||||
<div
|
||||
class="hex-shape orange flat-top clip-content h-[100px] flex flex-col justify-center items-center"
|
||||
>
|
||||
<div class="inner-content">
|
||||
<StripeBar
|
||||
className="bg-black"
|
||||
color="red"
|
||||
loop={true}
|
||||
reverse={true}
|
||||
duration={20}
|
||||
></StripeBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="">
|
||||
<HexShape
|
||||
clipContent={true}
|
||||
flatTop={false}
|
||||
color="orange"
|
||||
className="h-[100px]"
|
||||
<div
|
||||
class="hex-shape orange clip-content h-[100px] flex flex-col justify-center items-center"
|
||||
>
|
||||
<StripeBar
|
||||
className="bg-black"
|
||||
loop={true}
|
||||
color="red"
|
||||
duration={20}
|
||||
></StripeBar>
|
||||
</HexShape>
|
||||
<div class="inner-content">
|
||||
<StripeBar
|
||||
className="bg-black"
|
||||
color="red"
|
||||
loop={true}
|
||||
reverse={true}
|
||||
duration={20}
|
||||
></StripeBar>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="long-hex h-[100px]"></div>
|
||||
|
|
@ -330,121 +234,42 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<section class="col-span-1 md:col-span-2 lg:col-span-3">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
||||
Infinite Scroll
|
||||
</h2>
|
||||
|
||||
<!-- Demo 1: Ticker bar with emergency notices -->
|
||||
<div class="flex w-full relative mb-4">
|
||||
<StripeBar className="my-2 " size="200px"></StripeBar>
|
||||
<StripeBar className="my-2 -scale-x-100 " size="200px"></StripeBar>
|
||||
<div
|
||||
class="absolute top-0 left-0 bottom-0 right-0 flex items-center justify-center text-center"
|
||||
>
|
||||
<div class="p-1 bg-black rounded-lg w-full">
|
||||
<div class="bordered-red bg-black p-2 w-full text-primary">
|
||||
<InfiniteScroll speed={60} gap={48}>
|
||||
{#snippet children()}
|
||||
<div class="flex flex-col text-center px-4">
|
||||
<span class="text-xs">CONDITION: RED</span>
|
||||
<b class="text-4xl" style="line-height: 0.8;">EMERGENCY</b>
|
||||
<span class="text-xs">CODE: 102</span>
|
||||
</div>
|
||||
{/snippet}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Demo 2: Variasi speed & direction -->
|
||||
<div class="flex flex-col gap-3">
|
||||
<div>
|
||||
<p class="text-gray-500 text-xs mb-1">speed=40 (slow), gap=32px</p>
|
||||
<div class="bordered p-2">
|
||||
<InfiniteScroll speed={40} gap={32}>
|
||||
{#snippet children()}
|
||||
<span class="ews-text text-sm px-4">⬡ SEISMIC ALERT</span>
|
||||
<span class="ews-text danger text-sm px-4">⚠ AWAS GEMPA</span>
|
||||
<span class="ews-text text-sm px-4">⬡ ZONE: SUMATERA</span>
|
||||
<span class="ews-text danger text-sm px-4">⚠ MAG 7.2</span>
|
||||
{/snippet}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-gray-500 text-xs mb-1">
|
||||
speed=120 (fast), direction=right
|
||||
</p>
|
||||
<div class="bordered p-2">
|
||||
<InfiniteScroll speed={120} gap={32} direction="right">
|
||||
{#snippet children()}
|
||||
<span class="ews-text-digital text-sm px-4"
|
||||
>STATION: BDG-01</span
|
||||
>
|
||||
<span class="ews-text-digital text-sm px-4">DEPTH: 10km</span>
|
||||
<span class="ews-text-digital text-sm px-4">LAT: -6.208</span>
|
||||
<span class="ews-text-digital text-sm px-4">LNG: 106.845</span>
|
||||
{/snippet}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-gray-500 text-xs mb-1">
|
||||
pauseOnHover, speed=80, gap=64px — single large item
|
||||
</p>
|
||||
<div class="bordered-red p-2">
|
||||
<InfiniteScroll speed={80} gap={64} pauseOnHover={true}>
|
||||
{#snippet children()}
|
||||
<div class="flex flex-col text-center px-2">
|
||||
<span class="text-xs text-gray-400">HOVER TO PAUSE</span>
|
||||
<b class="text-2xl ews-text danger">⚠ TSUNAMI WARNING</b>
|
||||
<span class="text-xs">EVAKUASI SEGERA</span>
|
||||
</div>
|
||||
{/snippet}
|
||||
</InfiniteScroll>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- HEXAGONAL GRID -->
|
||||
<section class="col-span-1 md:col-span-2 lg:col-span-3">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
||||
Hexagonal Grid
|
||||
</h2>
|
||||
|
||||
<div class="w-full flex flex-col md:flex-row gap-2">
|
||||
<!-- Honeycomb Offset Grid -->
|
||||
<div class="basis-0 flex-1">
|
||||
<p class="text-gray-500 text-xs mb-3">Honeycomb Offset Grid</p>
|
||||
<HexGrid gap={0}>
|
||||
{#each { length: 30 } as _, i}
|
||||
<div class="ews-hex-hive">
|
||||
<HexShape clipContent={true} flatTop={false}>
|
||||
{i}
|
||||
</HexShape>
|
||||
</div>
|
||||
{/each}
|
||||
</HexGrid>
|
||||
</div>
|
||||
<div class="flex flex-col gap-8">
|
||||
<div class="w-full flex gap-2">
|
||||
<!-- Honeycomb Offset Grid -->
|
||||
<div class="basis-0 flex-1">
|
||||
<p class="text-gray-500 text-xs mb-3">Honeycomb Offset Grid</p>
|
||||
<HexGrid>
|
||||
{#each { length: 30 } as _, i}
|
||||
<div class="hex-hive bg-hex">
|
||||
<HexShape clipContent={true} flatTop={false}>
|
||||
{i}
|
||||
</HexShape>
|
||||
</div>
|
||||
{/each}
|
||||
</HexGrid>
|
||||
</div>
|
||||
|
||||
<div class="basis-0 flex-1">
|
||||
<p class="text-gray-500 text-xs mb-3">
|
||||
Honeycomb Variant 2 Offset Grid
|
||||
</p>
|
||||
<HexGrid variant="flat">
|
||||
{#each { length: 30 } as _, i}
|
||||
<div class="hex-hive flat">
|
||||
<HexShape clipContent={true}>
|
||||
{i}
|
||||
</HexShape>
|
||||
</div>
|
||||
{/each}
|
||||
</HexGrid>
|
||||
<div class="basis-0 flex-1">
|
||||
<p class="text-gray-500 text-xs mb-3">
|
||||
Honeycomb Variant 2 Offset Grid
|
||||
</p>
|
||||
<HexGrid variant="flat">
|
||||
{#each { length: 30 } as _, i}
|
||||
<div class="hex-hive bg-hex-flat">
|
||||
<HexShape clipContent={true}>
|
||||
{i}
|
||||
</HexShape>
|
||||
</div>
|
||||
{/each}
|
||||
</HexGrid>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
|
@ -463,11 +288,7 @@
|
|||
<div class="text">MAG</div>
|
||||
</div>
|
||||
<div class="decal">
|
||||
<StripeBar
|
||||
className="w-full h-full"
|
||||
size={"100%"}
|
||||
orientation="vertical"
|
||||
></StripeBar>
|
||||
<div class="w-full h-full stripe-bar vertical"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -479,12 +300,7 @@
|
|||
<div class="text">MAG</div>
|
||||
</div>
|
||||
<div class="decal">
|
||||
<StripeBar
|
||||
className="w-full h-full"
|
||||
size={"100%"}
|
||||
orientation="vertical"
|
||||
color="red"
|
||||
></StripeBar>
|
||||
<div class="w-full h-full stripe-bar red vertical"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -497,12 +313,9 @@
|
|||
<div class="text">MAG</div>
|
||||
</div>
|
||||
<div class="decal">
|
||||
<StripeBar
|
||||
className="w-full h-full"
|
||||
size={"100%"}
|
||||
orientation="vertical"
|
||||
loop={true}
|
||||
></StripeBar>
|
||||
<div
|
||||
class="w-full h-full stripe-bar vertical loop-stripe-vertical-reverse anim-duration-10"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -514,13 +327,9 @@
|
|||
<div class="text">MAG</div>
|
||||
</div>
|
||||
<div class="decal">
|
||||
<StripeBar
|
||||
className="w-full h-full"
|
||||
size={"100%"}
|
||||
orientation="vertical"
|
||||
color="red"
|
||||
loop={true}
|
||||
></StripeBar>
|
||||
<div
|
||||
class="w-full h-full stripe-bar red vertical loop-stripe-vertical anim-duration-10"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -586,7 +395,7 @@
|
|||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-xs mb-1">ews-text danger</p>
|
||||
<p class="ews-text danger text-lg">EARLY WARNING</p>
|
||||
<p class="ews-text danger text-lg">PERINGATAN DINI</p>
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-gray-500 text-xs mb-1">ews-text</p>
|
||||
|
|
@ -682,7 +491,7 @@
|
|||
<div>
|
||||
<p class="text-gray-500 text-xs mb-1">ews-select danger</p>
|
||||
<select class="ews-select danger">
|
||||
<option>LEVEL WARNING</option>
|
||||
<option>LEVEL PERINGATAN</option>
|
||||
<option>SIAGA</option>
|
||||
<option>WASPADA</option>
|
||||
<option>AWAS</option>
|
||||
|
|
@ -856,95 +665,6 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
<!-- THREADED COMMENTS / NESTED LIST -->
|
||||
<section class="col-span-1 md:col-span-2 lg:col-span-3">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
||||
Threaded Comments / Nested List
|
||||
</h2>
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<div class="p-3">
|
||||
<p class="text-gray-500 text-xs mb-3">Variation 1 — Spine</p>
|
||||
<ThreadedComments
|
||||
variant="spine"
|
||||
items={threadedSpineItems}
|
||||
animated={false}
|
||||
/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<p class="text-gray-500 text-xs mb-3">Variation 2 — Threaded</p>
|
||||
<ThreadedComments
|
||||
variant="threaded"
|
||||
items={threadedSpineItems}
|
||||
animated={false}
|
||||
/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<p class="text-gray-500 text-xs mb-3">
|
||||
Variation 3 — Spine (Expandable)
|
||||
</p>
|
||||
<ThreadedComments
|
||||
variant="spine"
|
||||
items={threadedNestedItems}
|
||||
tone="danger"
|
||||
expandable={true}
|
||||
animated={false}
|
||||
/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<p class="text-gray-500 text-xs mb-3">
|
||||
Variation 4 — Spine (Animated)
|
||||
</p>
|
||||
<ThreadedComments
|
||||
variant="spine"
|
||||
items={threadedNestedItems}
|
||||
expandable={true}
|
||||
animated={true}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="p-3">
|
||||
<p class="text-gray-500 text-xs mb-3">
|
||||
Variation 5 — Threaded (Expandable)
|
||||
</p>
|
||||
<ThreadedComments
|
||||
variant="threaded"
|
||||
items={threadedNestedItems}
|
||||
tone="danger"
|
||||
expandable={true}
|
||||
animated={false}
|
||||
/>
|
||||
</div>
|
||||
<div class="p-3">
|
||||
<p class="text-gray-500 text-xs mb-3">
|
||||
Variation 6 — Threaded (Animated)
|
||||
</p>
|
||||
<ThreadedComments
|
||||
variant="threaded"
|
||||
items={threadedNestedItems}
|
||||
expandable={true}
|
||||
animated={true}
|
||||
/>
|
||||
</div>
|
||||
<div class="p-3 col-span-1 lg:col-span-2">
|
||||
<p class="text-gray-500 text-xs mb-3">
|
||||
Variation 7 — Threaded (With Toggle Callback)
|
||||
</p>
|
||||
<div class="mb-2 text-xs text-gray-400">
|
||||
Last toggled: {lastToggledId ?? "none"} — {lastToggledState === null
|
||||
? ""
|
||||
: lastToggledState
|
||||
? "collapsed"
|
||||
: "expanded"}
|
||||
</div>
|
||||
<ThreadedComments
|
||||
variant="threaded"
|
||||
items={threadedNestedItems}
|
||||
onToggle={handleToggle}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- MENTAL TOXICITY LEVEL -->
|
||||
<section class="col-span-1 md:col-span-2 lg:col-span-3">
|
||||
<h2 class="text-xl font-semibold mb-4 border-b border-gray-700 pb-2">
|
||||
|
|
@ -978,7 +698,7 @@
|
|||
{#if showTsunamiAlert}
|
||||
<!-- Tsunami Alert takes up the full screen and has animations -->
|
||||
<div class="fixed inset-0 z-50 pointer-events-auto">
|
||||
<TsunamiAlert infoTsunami={dummyTsunami.infoTsunami} />
|
||||
<TsunamiAlert alertTsunami={dummyTsunami} />
|
||||
<button
|
||||
class="absolute top-4 right-4 z-[60] bg-black text-white px-4 py-2"
|
||||
onclick={() => (showTsunamiAlert = false)}
|
||||
|
|
|
|||
|
|
@ -227,20 +227,7 @@
|
|||
class="min-h-screen py-1 md:py-4 flex flex-col items-center overflow-x-hidden overflow-y-auto font-mono"
|
||||
>
|
||||
<div
|
||||
class="flex no-snapshot fixed right-2 translate-y-0 top-2 left-0 right-0 m-auto flex-row justify-center items-center z-5 gap-2 pointer-events-none"
|
||||
style="width:fit-content"
|
||||
>
|
||||
<a
|
||||
class="ews-btn ews-btn-primary scale-75 md:scale-100 pointer-events-auto"
|
||||
href="/">HOME</a
|
||||
>
|
||||
<a
|
||||
class="ews-btn ews-btn-primary scale-75 md:scale-100 pointer-events-auto"
|
||||
href="/status-ui">STATION STATUS</a
|
||||
>
|
||||
</div>
|
||||
<div
|
||||
class="mb-2 text-center p-2 z-10 w-full bordered flex justify-center items-center relative show-pop-up mt-6"
|
||||
class="mb-2 text-center p-2 z-10 w-full bordered flex justify-center items-center relative show-pop-up"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<StripeBar loop={true} duration={20} color="red"></StripeBar>
|
||||
|
|
@ -262,14 +249,14 @@
|
|||
{#snippet title()}
|
||||
<h1>NETWORK CHANNEL STATUS</h1>
|
||||
{/snippet}
|
||||
<div class="overflow-y-auto h-[80vh]">
|
||||
<div class="overflow-y-auto max-h-[700px]">
|
||||
<MentalToxicityLevel networks={networkStats} />
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
<div class="w-full lg:w-2/3 bordered relative overflow-hidden">
|
||||
<div
|
||||
class="w-full h-[80vh] bg-black rounded"
|
||||
class="w-full h-[700px] bg-black rounded"
|
||||
bind:this={mapContainer}
|
||||
></div>
|
||||
|
||||
|
|
|
|||
|
|
@ -20,7 +20,8 @@
|
|||
onMount(() => {
|
||||
// https://geofon.bmkg.go.id/fdsnws/station/1/
|
||||
// URL GEOFON (tanpa format=text agar mengembalikan XML)
|
||||
const url = `https://geofon.gfz-potsdam.de/fdsnws/station/1/query?${mapStore.urlParams}&level=station`;
|
||||
const url =
|
||||
`https://geofon.gfz-potsdam.de/fdsnws/station/1/query?${mapStore.urlParams}&level=station`;
|
||||
|
||||
fetch(url)
|
||||
.then((response) => {
|
||||
|
|
@ -90,21 +91,7 @@
|
|||
class="min-h-screen py-1 md:py-4 flex flex-col items-center overflow-x-hidden overflow-y-auto font-mono"
|
||||
>
|
||||
<div
|
||||
class="flex no-snapshot fixed right-2 translate-y-0 top-2 left-0 right-0 m-auto flex-row justify-center items-center z-5 gap-2 pointer-events-none"
|
||||
style="width:fit-content"
|
||||
>
|
||||
<a
|
||||
class="ews-btn ews-btn-primary scale-75 md:scale-100 pointer-events-auto"
|
||||
href="/">HOME</a
|
||||
>
|
||||
<a
|
||||
class="ews-btn ews-btn-primary scale-75 md:scale-100 pointer-events-auto"
|
||||
href="/status-map">STATION MAP</a
|
||||
>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="mb-2 text-center p-2 z-10 w-full bordered flex justify-center items-center relative show-pop-up mt-6"
|
||||
class="mb-2 text-center p-2 z-10 w-full bordered flex justify-center items-center relative show-pop-up"
|
||||
>
|
||||
<div class="overflow-hidden">
|
||||
<StripeBar loop={true} duration={20} color="red"></StripeBar>
|
||||
|
|
@ -127,14 +114,15 @@
|
|||
getHref={(item: any) =>
|
||||
`/realtime?networkCode=${item.networkCode}&stationCode=${item.stationCode}`}
|
||||
>
|
||||
{#snippet nodeContent(
|
||||
item: any,
|
||||
{ side, delay }: { side: string; delay: number },
|
||||
)}
|
||||
{#snippet nodeContent(item: any, { side, delay }: { side: string; delay: number })}
|
||||
<div
|
||||
class="slide-fade-in ews-rib-node {side === 'right'
|
||||
? 'flip'
|
||||
: ''} {item.type === 'danger' ? 'danger' : ''}"
|
||||
class="slide-fade-in {side === 'left' ? 'status-node' : 'status-node-flip'} {item.type ===
|
||||
'danger'
|
||||
? 'danger'
|
||||
: ''} w-24 h-6 flex flex-glow flex-col items-center justify-center relative mt-6 {side ===
|
||||
'left'
|
||||
? '-mr-2'
|
||||
: '-ml-2'} z-5 text-black text-xs font-bold"
|
||||
style="animation-delay: {delay}ms;"
|
||||
></div>
|
||||
{/snippet}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue