diff --git a/.eslintrc.cjs b/.eslintrc.cjs index 7c78d82..e1def6e 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -1,11 +1,6 @@ module.exports = { root: true, extends: ['eslint:recommended', 'plugin:svelte/recommended', 'prettier'], - overrides: [ - { - "files": ["**/*.svelte"] - } - ], parserOptions: { sourceType: 'module', ecmaVersion: 2020, @@ -17,6 +12,6 @@ module.exports = { node: true }, rules: { - indent: ['error', 2, {SwitchCase: 2}], + indent: ['error', 2, { SwitchCase: 2 }] } }; diff --git a/.prettierrc b/.prettierrc index a77fdde..6307b22 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,9 +1,11 @@ { - "useTabs": true, - "singleQuote": true, - "trailingComma": "none", - "printWidth": 100, - "plugins": ["prettier-plugin-svelte"], - "pluginSearchDirs": ["."], - "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] + "useTabs": false, + "tabWidth": 2, + "semi": true, + "singleQuote": true, + "trailingComma": "none", + "printWidth": 80, + "plugins": ["prettier-plugin-svelte"], + "pluginSearchDirs": ["."], + "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] } diff --git a/jsconfig.json b/jsconfig.json index fe45e13..f1da068 100644 --- a/jsconfig.json +++ b/jsconfig.json @@ -1,17 +1,17 @@ { - "extends": "./.svelte-kit/tsconfig.json", - "compilerOptions": { - "allowJs": true, - "checkJs": true, - "esModuleInterop": true, - "forceConsistentCasingInFileNames": true, - "resolveJsonModule": true, - "skipLibCheck": true, - "sourceMap": true, - "strict": true - } - // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files - // - // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes - // from the referenced tsconfig.json - TypeScript does not merge them in + "extends": "./.svelte-kit/tsconfig.json", + "compilerOptions": { + "allowJs": true, + "checkJs": true, + "esModuleInterop": true, + "forceConsistentCasingInFileNames": true, + "resolveJsonModule": true, + "skipLibCheck": true, + "sourceMap": true, + "strict": true + } + // Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias and https://kit.svelte.dev/docs/configuration#files + // + // If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes + // from the referenced tsconfig.json - TypeScript does not merge them in } diff --git a/package.json b/package.json index a0a988b..7617842 100644 --- a/package.json +++ b/package.json @@ -1,29 +1,29 @@ { - "name": "owlboard-svelte", - "version": "0.0.1", - "private": true, - "scripts": { - "dev": "vite dev", - "build": "vite build", - "preview": "vite preview", - "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", - "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch", - "lint": "prettier --plugin-search-dir . --check . && eslint .", - "format": "prettier --plugin-search-dir . --write ." - }, - "devDependencies": { - "@sveltejs/adapter-auto": "^2.0.0", - "@sveltejs/adapter-static": "^2.0.2", - "@sveltejs/kit": "^1.5.0", - "eslint": "^8.28.0", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-svelte": "^2.26.0", - "prettier": "^2.8.0", - "prettier-plugin-svelte": "^2.8.1", - "svelte": "^3.54.0", - "svelte-check": "^3.0.1", - "typescript": "^5.0.0", - "vite": "^4.3.0" - }, - "type": "module" + "name": "owlboard-svelte", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./jsconfig.json --watch", + "lint": "prettier --plugin-search-dir . --check . && eslint .", + "format": "prettier --plugin-search-dir . --write ." + }, + "devDependencies": { + "@sveltejs/adapter-auto": "^2.0.0", + "@sveltejs/adapter-static": "^2.0.2", + "@sveltejs/kit": "^1.5.0", + "eslint": "^8.28.0", + "eslint-config-prettier": "^8.5.0", + "eslint-plugin-svelte": "^2.26.0", + "prettier": "^2.8.0", + "prettier-plugin-svelte": "^2.8.1", + "svelte": "^3.54.0", + "svelte-check": "^3.0.1", + "typescript": "^5.0.0", + "vite": "^4.3.0" + }, + "type": "module" } diff --git a/src/app.css b/src/app.css index 9e8445f..e968024 100644 --- a/src/app.css +++ b/src/app.css @@ -1,72 +1,75 @@ /* FONTS */ @font-face { - font-family: 'firamono'; - src: url('/font/firamono/firamono-regular.woff2') format('woff2'), - url('/font/firamono/firamono-regular.woff') format('woff'), - url('/font/firamono/firamono-regular.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - } - @font-face { - font-family: 'firamono'; - src: url('/font/firamono/firamono-500.woff2') format('woff2'), - url('/font/firamono/firamono-500.woff') format('woff'), - url('/font/firamono/firamono-500.ttf') format('truetype'); - font-weight: 500; - font-style: normal; - } - @font-face { - font-family: 'urwgothic'; - src: url('/font/urwgothic/urwgothic.woff2') format('woff2'), - url('/font/urwgothic/urwgothic.woff') format('woff'), - url('/font/urwgothic/urwgothic.ttf') format('truetype'); - font-weight: normal; - font-style: normal; - } - @font-face { - font-family: 'urwgothic'; - src: url('/font/urwgothic/urwgothicDemi.woff2') format('woff2'), - url('/font/urwgothic/urwgothicDemi.woff') format('woff'), - url('/font/urwgothic/urwgothicDemi.ttf') format('truetype'); - font-weight: 900; - font-style: normal; - } + font-family: 'firamono'; + src: url('/font/firamono/firamono-regular.woff2') format('woff2'), + url('/font/firamono/firamono-regular.woff') format('woff'), + url('/font/firamono/firamono-regular.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'firamono'; + src: url('/font/firamono/firamono-500.woff2') format('woff2'), + url('/font/firamono/firamono-500.woff') format('woff'), + url('/font/firamono/firamono-500.ttf') format('truetype'); + font-weight: 500; + font-style: normal; +} +@font-face { + font-family: 'urwgothic'; + src: url('/font/urwgothic/urwgothic.woff2') format('woff2'), + url('/font/urwgothic/urwgothic.woff') format('woff'), + url('/font/urwgothic/urwgothic.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} +@font-face { + font-family: 'urwgothic'; + src: url('/font/urwgothic/urwgothicDemi.woff2') format('woff2'), + url('/font/urwgothic/urwgothicDemi.woff') format('woff'), + url('/font/urwgothic/urwgothicDemi.ttf') format('truetype'); + font-weight: 900; + font-style: normal; +} /* COLOR VARS */ :root { - --main-bg-color: #404c55; - --second-bg-color: #2b343c; /* Use as first arg in radial gradient */ - --accent-color: #007979; - --overlay-color: #3c6f79de; - --overlay-color-solid: #3c6f79; - --main-text-color: #00b7b7; - --second-text-color: #0afdfd; - --note-text-color: #9de7ff; - --link-color: azure; - --box-border-color: ; - --link-visited-color: azure; - --main-alert-color: #ed6d00; - --second-alert-color: #e77f00; /* Use as second arg in radial gradient */ - --main-warning-color: orange; - --board-name-color: #fcfc09; - } + --main-bg-color: #404c55; + --second-bg-color: #2b343c; /* Use as first arg in radial gradient */ + --accent-color: #007979; + --overlay-color: #3c6f79de; + --overlay-color-solid: #3c6f79; + --main-text-color: #00b7b7; + --second-text-color: #0afdfd; + --note-text-color: #9de7ff; + --link-color: azure; + --box-border-color: ; + --link-visited-color: azure; + --main-alert-color: #ed6d00; + --second-alert-color: #e77f00; /* Use as second arg in radial gradient */ + --main-warning-color: orange; + --board-name-color: #fcfc09; +} - html{ - width: 100%; - height: 100%; - } +html { + width: 100%; + height: 100%; +} - body { - background-color: var(--main-bg-color); - background-image: radial-gradient(var(--second-bg-color), var(--main-bg-color)); - color: var(--second-text-color); - font-family: urwgothic, sans-serif; - text-align: center; - padding-bottom: 60px; /*Footer height*/ - } - a { - color: var(--link-color) - } - button:hover { - cursor: pointer; - } \ No newline at end of file +body { + background-color: var(--main-bg-color); + background-image: radial-gradient( + var(--second-bg-color), + var(--main-bg-color) + ); + color: var(--second-text-color); + font-family: urwgothic, sans-serif; + text-align: center; + padding-bottom: 60px; /*Footer height*/ +} +a { + color: var(--link-color); +} +button:hover { + cursor: pointer; +} diff --git a/src/app.d.ts b/src/app.d.ts index f59b884..899c7e8 100644 --- a/src/app.d.ts +++ b/src/app.d.ts @@ -1,12 +1,12 @@ // See https://kit.svelte.dev/docs/types#app // for information about these interfaces declare global { - namespace App { - // interface Error {} - // interface Locals {} - // interface PageData {} - // interface Platform {} - } + namespace App { + // interface Error {} + // interface Locals {} + // interface PageData {} + // interface Platform {} + } } export {}; diff --git a/src/app.html b/src/app.html index 526d1bb..cf1bfd5 100644 --- a/src/app.html +++ b/src/app.html @@ -1,9 +1,9 @@ - - %sveltekit.head% - - -
%sveltekit.body%
- + + %sveltekit.head% + + +
%sveltekit.body%
+ diff --git a/src/lib/images/large-logo.svelte b/src/lib/images/large-logo.svelte index 2c7b5b6..0221ec9 100644 --- a/src/lib/images/large-logo.svelte +++ b/src/lib/images/large-logo.svelte @@ -1,10 +1,10 @@ -Logo +Logo \ No newline at end of file + img { + width: 50%; + max-width: 250px; + margin-top: 55px; + margin-bottom: 55px; + } + diff --git a/src/lib/islands/input-island-form.svelte b/src/lib/islands/input-island-form.svelte index 66349ce..5a65574 100644 --- a/src/lib/islands/input-island-form.svelte +++ b/src/lib/islands/input-island-form.svelte @@ -1,45 +1,54 @@ -
- -
+ + +
-
+
\ No newline at end of file + .form-input { + width: 75%; + height: 32px; + margin-top: 5px; + margin-bottom: 5px; + border-radius: 50px; + border: none; + text-align: center; + font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', + 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + text-transform: uppercase; + font-size: 15px; + } + button { + width: 50%; + margin-bottom: 5px; + margin-top: 5px; + border: none; + border-radius: 20px; + padding: 5px; + font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', + 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 16px; + font-weight: 400; + background-color: var(--main-bg-color); + color: var(--link-color); + } + diff --git a/src/lib/islands/island.svelte b/src/lib/islands/island.svelte index f9b151a..2641ab2 100644 --- a/src/lib/islands/island.svelte +++ b/src/lib/islands/island.svelte @@ -1,20 +1,21 @@
- {variables.title} - + {variables.title} +
\ No newline at end of file + } + diff --git a/src/lib/islands/overlay-island.svelte b/src/lib/islands/overlay-island.svelte index 17a8a39..b42563f 100644 --- a/src/lib/islands/overlay-island.svelte +++ b/src/lib/islands/overlay-island.svelte @@ -1,22 +1,23 @@ -
- {variables.title} - +
+ {variables.title} +
\ No newline at end of file + } + diff --git a/src/lib/islands/quick-link-island.svelte b/src/lib/islands/quick-link-island.svelte index 8051685..56014dd 100644 --- a/src/lib/islands/quick-link-island.svelte +++ b/src/lib/islands/quick-link-island.svelte @@ -1,57 +1,54 @@ - - {#if $ql.length === 0} + {#if $ql.length === 0}

Go to settings to add your Quick Links

- {/if} -
- {#each $ql as link} - {#if link.length === 3} - - {link.toUpperCase()} - - {:else if link.length === 4} - - {link.toUpperCase()} - - {/if} - {/each} -
- + {/if} +
+ {#each $ql as link} + {#if link.length === 3} + + {link.toUpperCase()} + + {:else if link.length === 4} + + {link.toUpperCase()} + + {/if} + {/each} +
- diff --git a/src/lib/islands/quick-link-set-island.svelte b/src/lib/islands/quick-link-set-island.svelte index 3d4e282..c4325f4 100644 --- a/src/lib/islands/quick-link-set-island.svelte +++ b/src/lib/islands/quick-link-set-island.svelte @@ -1,116 +1,117 @@ - - - {#if $ql.length === 0} -

Click the + button to add links

- {/if} -
-

Quick links can be CRS Codes or Headcodes

- {#each qlData as link} - - {/each} - -
- - -
- + function handleClick(event) { + // Handle the click event here + console.log('Island Clicked'); + // You can access the `variables` passed to the Island component here if needed + } + + + + {#if $ql.length === 0} +

Click the + button to add links

+ {/if} +
+

Quick links can be CRS Codes or Headcodes

+ {#each qlData as link} + + {/each} + +
+ + +
\ No newline at end of file + p { + margin-bottom: 0; + } + #qlAdd { + width: 40px; + } + .buttons { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-items: center; + width: 90%; + margin: auto; + padding-top: 5px; + } + input { + flex: 1; + width: 20%; + min-width: 50px; + margin: 5px; + border: none; + border-radius: 20px; + padding: 5px; + font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', + 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 16px; + font-weight: 400; + text-decoration: none; + text-align: center; + text-transform: uppercase; + } + button { + width: 30%; + margin-bottom: 5px; + margin-top: 10px; + border: none; + border-radius: 20px; + padding: 5px; + font-family: urwgothic, 'Lucida Sans', 'Lucida Sans Regular', + 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; + font-size: 16px; + font-weight: 400; + background-color: var(--main-bg-color); + color: var(--link-color); + } + diff --git a/src/lib/islands/result-island.svelte b/src/lib/islands/result-island.svelte index 4f73eb5..59208f6 100644 --- a/src/lib/islands/result-island.svelte +++ b/src/lib/islands/result-island.svelte @@ -1,27 +1,24 @@ - - {#each resultObject.resultLines as line} -

{line}

- {/each} - + {#each resultObject.resultLines as line} +

{line}

+ {/each}
\ No newline at end of file + p { + color: white; + } + diff --git a/src/lib/ldb/alert-bar.svelte b/src/lib/ldb/alert-bar.svelte index be80baa..28dc7de 100644 --- a/src/lib/ldb/alert-bar.svelte +++ b/src/lib/ldb/alert-bar.svelte @@ -1,116 +1,132 @@
- - {#if uniqueAlerts.length == 1} -

There is one active alert

- {:else if uniqueAlerts.length > 1} -

There are {numberAsWord(uniqueAlerts.length)} active alerts

- {:else} -

There are no active alerts

- {/if} -

V

+ + {#if uniqueAlerts.length == 1} +

There is one active alert

+ {:else if uniqueAlerts.length > 1} +

+ There are {numberAsWord(uniqueAlerts.length)} active alerts +

+ {:else} +

There are no active alerts

+ {/if} +

V

{#if displayAlerts} -
- {#each uniqueAlerts as msg} -

{@html msg}

- {/each} -
+
+ {#each uniqueAlerts as msg} +

{@html msg}

+ {/each} +
{/if} \ No newline at end of file + #block { + height: 40px; + } + #bar { + width: 100%; + height: 40px; + background-color: var(--main-alert-color); + opacity: 1; + position: fixed; + width: 100%; + top: 50px; + left: 0px; + z-index: 10; + } + img { + height: 25px; + width: 25px; + position: absolute; + left: 8px; + top: 8px; + margin: 0; + padding: 0; + } + #bartext { + color: white; + margin: auto; + font-weight: 600; + margin-top: 8px; + margin-bottom: 0px; + padding: 0px; + } + #arrow { + color: white; + font-family: Arial, Helvetica, sans-serif; + font-weight: 900; + position: absolute; + margin-top: 0; + right: 15px; + top: 11px; + border: none; + background-color: transparent; + transition-duration: 500ms; + transition-delay: 00ms; + } + #arrow:focus { + background-color: transparent; + } + #alerts { + position: fixed; + background-color: var(--main-alert-color); + opacity: 0.9; + width: 100%; + max-height: 80vh; + overflow-y: auto; + overflow-x: clip; + left: 0; + top: 89px; + } + .alert { + color: white; + text-align: center; + width: 80%; + margin: auto; + margin-top: 10px; + margin-bottom: 10px; + font-weight: 600; + } + .displayAlerts { + transition-duration: 500ms; + transition-delay: 400ms; + transform: rotate(180deg); + } + diff --git a/src/lib/ldb/public-ldb.svelte b/src/lib/ldb/public-ldb.svelte index 57b0e77..c306c3f 100644 --- a/src/lib/ldb/public-ldb.svelte +++ b/src/lib/ldb/public-ldb.svelte @@ -1,10 +1,10 @@ {#if alerts.length} - + {/if} {#if isLoading} -{:else} - {#if dataAge} -

Updated: {dataAge.toLocaleTimeString()}

- {#if services.length} - +{:else if dataAge} +

Updated: {dataAge.toLocaleTimeString()}

+ {#if services.length} +
+ + + + + + + + + + {#each services as service} - - - - - - - + + + + + + + - {#each services as service} - - - - - - - - - - - {/each} -
FromToPlat.Sch Arr.Exp Arr.Sch Dep.Exp Dep.
FromToPlat.Sch Arr.Exp Arr.Sch Dep.Exp Dep. + {#if Array.isArray(service.origin?.location)} + {service.origin.location[0]['locationName'] + + ' & ' + + service.origin.location[1]['locationName']} + {:else} + {service.origin?.location?.locationName || ''} + {/if} + + {#if Array.isArray(service.destination?.location)} + {service.destination.location[0]['locationName'] + + ' & ' + + service.destination.location[0]['locationName']} + {:else} + {service.destination?.location?.locationName || ''} + {/if} + {service.platform || '-'}{parseTime(service.sta).data}{parseTime(service.eta).data}{parseTime(service.std).data}{parseTime(service.etd).data}
- {#if Array.isArray(service.origin?.location)} - {service.origin.location[0]['locationName'] + - " & " + - service.origin.location[1]['locationName']} - {:else} - {service.origin?.location?.locationName || ''} - {/if} - - {#if Array.isArray(service.destination?.location)} - {service.destination.location[0]['locationName'] + - " & " + - service.destination.location[0]['locationName']} - {:else} - {service.destination?.location?.locationName || ''} - {/if} - {service.platform || '-'}{parseTime(service.sta).data}{parseTime(service.eta).data}{parseTime(service.std).data}{parseTime(service.etd).data}
+

A {service.operator || 'Unknown'} service {#if service['length']} @@ -205,36 +219,56 @@ {#if service.cancelReason}

{service.cancelReason}

{/if} -
- {:else} -

No Scheduled Train Services

- {/if} - {#if busServices.length} -
- Bus services
- Bus Services - + + {/each} +
+ {:else} +

No Scheduled Train Services

+ {/if} + {#if busServices.length} +
+ Bus services
+ Bus Services + + + + + + + + + + {#each busServices as service} - - - - - - + + + + + + - {#each busServices as service} - - - - - - - - - - {/each} -
FromToSch Arr.Exp Arr.Sch Dep.Exp Dep.
FromToSch Arr.Exp Arr.Sch Dep.Exp Dep.{service.origin?.location?.locationName || ''}{service.destination?.location?.locationName || ''}{parseTime(service.sta).data}{parseTime(service.eta).data}{parseTime(service.std).data}{parseTime(service.etd).data}
{service.origin?.location?.locationName || ''}{service.destination?.location?.locationName || ''}{parseTime(service.sta).data}{parseTime(service.eta).data}{parseTime(service.std).data}{parseTime(service.etd).data}
+

A {service.operator || 'Unknown'} service

@@ -244,47 +278,61 @@ {#if service.cancelReason}

{service.cancelReason}

{/if} -
- {/if} - {#if ferryServices.length} -
- Bus services
- Ferry Services - + + {/each} +
+ {/if} + {#if ferryServices.length} +
+ Bus services
+ Ferry Services + + + + + + + + + + {#each ferryServices as service} - - - - - - + + + + + + - {#each ferryServices as service} - - - - - - - - - - {/each} -
FromToSch Arr.Exp Arr.Sch Dep.Exp Dep.
FromToSch Arr.Exp Arr.Sch Dep.Exp Dep.{service.origin?.location?.locationName || ''}{service.destination?.location?.locationName || ''}{parseTime(service.sta).data}{parseTime(service.eta).data}{parseTime(service.std).data}{parseTime(service.etd).data}
{service.origin?.location?.locationName || ''}{service.destination?.location?.locationName || ''}{parseTime(service.sta).data}{parseTime(service.eta).data}{parseTime(service.std).data}{parseTime(service.etd).data}
+
{#if service.delayReason}

{service.delayReason}

{/if} {#if service.cancelReason}

{service.cancelReason}

{/if} -
- {/if} - {:else} -

Unable to find this station

+ + {/each} + {/if} +{:else} +

Unable to find this station

{/if} {#if serviceDetail} @@ -304,21 +352,47 @@ {prevPoint.locationName} {prevPoint.st} - {parseTime(prevPoint.at || prevPoint.et).data} + {parseTime(prevPoint.at || prevPoint.et).data} {/each} {:else} - {serviceDetail.previousCallingPoints.callingPointList.callingPoint.locationName} - {serviceDetail.previousCallingPoints.callingPointList.callingPoint.st} - {parseTime(serviceDetail.previousCallingPoints.callingPointList.callingPoint.at || serviceDetail.previousCallingPoints.callingPointList.callingPoint.et).data} + {serviceDetail.previousCallingPoints.callingPointList + .callingPoint.locationName} + {serviceDetail.previousCallingPoints.callingPointList + .callingPoint.st} + {parseTime( + serviceDetail.previousCallingPoints.callingPointList + .callingPoint.at || + serviceDetail.previousCallingPoints.callingPointList + .callingPoint.et + ).data} {/if} {/if} {title} {serviceDetail.std || serviceDetail.sta} - {parseTime(serviceDetail.etd || serviceDetail.eta).data} + {parseTime(serviceDetail.etd || serviceDetail.eta).data} {#if serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint} {#if Array.isArray(serviceDetail?.subsequentCallingPoints?.callingPointList?.callingPoint)} @@ -326,14 +400,31 @@ {nextPoint.locationName} {nextPoint.st} - {parseTime(nextPoint.et).data} + {parseTime(nextPoint.et).data} {/each} {:else} - {serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.locationName} - {serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.st} - {parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).data} + {serviceDetail.subsequentCallingPoints.callingPointList + .callingPoint.locationName} + {serviceDetail.subsequentCallingPoints.callingPointList + .callingPoint.st} + {parseTime( + serviceDetail.subsequentCallingPoints.callingPointList + .callingPoint.et + ).data} {/if} {/if} @@ -371,21 +462,40 @@ color: white; font-size: 14px; } -@media (min-width: 800px) { - table {font-size: 15px; max-width: 850px;} - .service-detail {font-size: 14px;} - .transport-mode {width: 50px;} - #timestamp {font-size: 16px;} -} -@media (min-width: 1000px) { - table {font-size: 17px;} - .service-detail{font-size: 16px;} - .table-head-text {font-size: 16px;} -} -@media (min-width: 1600px) { - table {font-size: 19px;} - .service-detail {font-size: 18px;} -} + @media (min-width: 800px) { + table { + font-size: 15px; + max-width: 850px; + } + .service-detail { + font-size: 14px; + } + .transport-mode { + width: 50px; + } + #timestamp { + font-size: 16px; + } + } + @media (min-width: 1000px) { + table { + font-size: 17px; + } + .service-detail { + font-size: 16px; + } + .table-head-text { + font-size: 16px; + } + } + @media (min-width: 1600px) { + table { + font-size: 19px; + } + .service-detail { + font-size: 18px; + } + } .origdest { color: yellow; } @@ -398,58 +508,58 @@ text-align: left; } .plat { - width: 10% + width: 10%; } .time { width: 10%; } - .changed{ + .changed { animation: pulse-change 1.5s linear infinite; -} + } -.cancelled { + .cancelled { animation: pulse-cancel 1.5s linear infinite; -} + } -@keyframes pulse-change { + @keyframes pulse-change { 50% { - color: var(--main-warning-color); + color: var(--main-warning-color); } -} + } -@keyframes pulse-cancel { + @keyframes pulse-cancel { 50% { - color: var(--main-alert-color); + color: var(--main-alert-color); } -} -#detailBox { - width: 100%; -} -h6 { - position: absolute; - top: -25px; - left: 20px; - font-size: 18px; -} -#closeService { - position: absolute; - top: 10px; - right: 10px; - border: none; - border-radius: 60px; - width: 35px; - height: 35px; - background-color: var(--main-bg-color); - color: white; - font-weight: 700; - font-size: 16px; -} -#detailTable { - margin-top: 40px; - color: white; - font-size: 15px; -} -.thisStop { - color: yellow; -} + } + #detailBox { + width: 100%; + } + h6 { + position: absolute; + top: -25px; + left: 20px; + font-size: 18px; + } + #closeService { + position: absolute; + top: 10px; + right: 10px; + border: none; + border-radius: 60px; + width: 35px; + height: 35px; + background-color: var(--main-bg-color); + color: white; + font-weight: 700; + font-size: 16px; + } + #detailTable { + margin-top: 40px; + color: white; + font-size: 15px; + } + .thisStop { + color: yellow; + } diff --git a/src/lib/ldb/staff-ldb.svelte b/src/lib/ldb/staff-ldb.svelte index 562d72a..3af5889 100644 --- a/src/lib/ldb/staff-ldb.svelte +++ b/src/lib/ldb/staff-ldb.svelte @@ -1,290 +1,327 @@ - {#if isLoading} - - {:else} - {#if alerts.length} - - {/if} - - - - - - - - - - - - - {#each services as service} - {#await generateServiceData(service)} - - - - {:then serviceStats} - - - - - - - - - - - - - - - - {:catch} - - - - {/await} - {/each} -
Updated: {dataAge.toLocaleTimeString()} - Staff Boards under development
IDFromToPlatSch ArrExp ArrSch DepExp Dep
- Loading... -
{service.trainid}{serviceStats.from}{serviceStats.to}{serviceStats.platform.number || '-'}{serviceStats.schArr}{serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr}{serviceStats.schDep}{serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep}
- {service.operator} {#if serviceStats.length} | {serviceStats.length} carriages{/if} -
- {#if service.isCancelled} - {#await getReasonCodeData(service.cancelReason)} - This train has been cancelled - {:then reasonCode} - {reasonCode[0].cancReason} -
- {/await} - {/if} - {#if service?.delayReason} - {#await getReasonCodeData(service.delayReason)} - This train has been delayed - {:then reasonCode} - {reasonCode[0].lateReason} -
- {/await} - {/if} -
Unable to load service
- {/if} + + {service.trainid} + {serviceStats.from} + {serviceStats.to} + {serviceStats.platform.number || '-'} + {serviceStats.schArr} + {serviceStats.isArrDelayed ? 'LATE' : serviceStats.expArr} + {serviceStats.schDep} + {serviceStats.isDepDelayed ? 'LATE' : serviceStats.expDep} + + + + {service.operator} + {#if serviceStats.length} | {serviceStats.length} carriages{/if} +
+ {#if service.isCancelled} + {#await getReasonCodeData(service.cancelReason)} + This train has been cancelled + {:then reasonCode} + {reasonCode[0].cancReason} +
+ {/await} + {/if} + {#if service?.delayReason} + {#await getReasonCodeData(service.delayReason)} + This train has been delayed + {:then reasonCode} + {reasonCode[0].lateReason} +
+ {/await} + {/if} + + + {:catch} + + Unable to load service + + {/await} + {/each} + +{/if} -