Merge branch 'feature/websockets' into 'master'

Feature/websockets

See merge request martind2000/svelte-traintimes!1
This commit is contained in:
Martin Donnelly 2020-09-16 10:02:56 +00:00
commit f98c092cca
15 changed files with 1062 additions and 67 deletions

458
.idea/dbnavigator.xml Normal file
View File

@ -0,0 +1,458 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="DBNavigator.Project.DataEditorManager">
<record-view-column-sorting-type value="BY_INDEX" />
<value-preview-text-wrapping value="true" />
<value-preview-pinned value="false" />
</component>
<component name="DBNavigator.Project.DataExportManager">
<export-instructions>
<create-header value="true" />
<quote-values-containing-separator value="true" />
<quote-all-values value="false" />
<value-separator value="" />
<file-name value="" />
<file-location value="" />
<scope value="GLOBAL" />
<destination value="FILE" />
<format value="EXCEL" />
<charset value="UTF-8" />
</export-instructions>
</component>
<component name="DBNavigator.Project.DatabaseBrowserManager">
<autoscroll-to-editor value="false" />
<autoscroll-from-editor value="true" />
<show-object-properties value="true" />
<loaded-nodes />
</component>
<component name="DBNavigator.Project.DatabaseFileManager">
<open-files />
</component>
<component name="DBNavigator.Project.EditorStateManager">
<last-used-providers />
</component>
<component name="DBNavigator.Project.MethodExecutionManager">
<method-browser />
<execution-history>
<group-entries value="true" />
<execution-inputs />
</execution-history>
<argument-values-cache />
</component>
<component name="DBNavigator.Project.ObjectDependencyManager">
<last-used-dependency-type value="INCOMING" />
</component>
<component name="DBNavigator.Project.ObjectQuickFilterManager">
<last-used-operator value="EQUAL" />
<filters />
</component>
<component name="DBNavigator.Project.ScriptExecutionManager" clear-outputs="true">
<recently-used-interfaces />
</component>
<component name="DBNavigator.Project.Settings">
<connections />
<browser-settings>
<general>
<display-mode value="TABBED" />
<navigation-history-size value="100" />
<show-object-details value="false" />
</general>
<filters>
<object-type-filter>
<object-type name="SCHEMA" enabled="true" />
<object-type name="USER" enabled="true" />
<object-type name="ROLE" enabled="true" />
<object-type name="PRIVILEGE" enabled="true" />
<object-type name="CHARSET" enabled="true" />
<object-type name="TABLE" enabled="true" />
<object-type name="VIEW" enabled="true" />
<object-type name="MATERIALIZED_VIEW" enabled="true" />
<object-type name="NESTED_TABLE" enabled="true" />
<object-type name="COLUMN" enabled="true" />
<object-type name="INDEX" enabled="true" />
<object-type name="CONSTRAINT" enabled="true" />
<object-type name="DATASET_TRIGGER" enabled="true" />
<object-type name="DATABASE_TRIGGER" enabled="true" />
<object-type name="SYNONYM" enabled="true" />
<object-type name="SEQUENCE" enabled="true" />
<object-type name="PROCEDURE" enabled="true" />
<object-type name="FUNCTION" enabled="true" />
<object-type name="PACKAGE" enabled="true" />
<object-type name="TYPE" enabled="true" />
<object-type name="TYPE_ATTRIBUTE" enabled="true" />
<object-type name="ARGUMENT" enabled="true" />
<object-type name="DIMENSION" enabled="true" />
<object-type name="CLUSTER" enabled="true" />
<object-type name="DBLINK" enabled="true" />
</object-type-filter>
</filters>
<sorting>
<object-type name="COLUMN" sorting-type="NAME" />
<object-type name="FUNCTION" sorting-type="NAME" />
<object-type name="PROCEDURE" sorting-type="NAME" />
<object-type name="ARGUMENT" sorting-type="POSITION" />
</sorting>
<default-editors>
<object-type name="VIEW" editor-type="SELECTION" />
<object-type name="PACKAGE" editor-type="SELECTION" />
<object-type name="TYPE" editor-type="SELECTION" />
</default-editors>
</browser-settings>
<navigation-settings>
<lookup-filters>
<lookup-objects>
<object-type name="SCHEMA" enabled="true" />
<object-type name="USER" enabled="false" />
<object-type name="ROLE" enabled="false" />
<object-type name="PRIVILEGE" enabled="false" />
<object-type name="CHARSET" enabled="false" />
<object-type name="TABLE" enabled="true" />
<object-type name="VIEW" enabled="true" />
<object-type name="MATERIALIZED VIEW" enabled="true" />
<object-type name="NESTED TABLE" enabled="false" />
<object-type name="COLUMN" enabled="false" />
<object-type name="INDEX" enabled="true" />
<object-type name="CONSTRAINT" enabled="true" />
<object-type name="DATASET TRIGGER" enabled="true" />
<object-type name="DATABASE TRIGGER" enabled="true" />
<object-type name="SYNONYM" enabled="false" />
<object-type name="SEQUENCE" enabled="true" />
<object-type name="PROCEDURE" enabled="true" />
<object-type name="FUNCTION" enabled="true" />
<object-type name="PACKAGE" enabled="true" />
<object-type name="TYPE" enabled="true" />
<object-type name="TYPE ATTRIBUTE" enabled="false" />
<object-type name="ARGUMENT" enabled="false" />
<object-type name="DIMENSION" enabled="false" />
<object-type name="CLUSTER" enabled="false" />
<object-type name="DBLINK" enabled="true" />
</lookup-objects>
<force-database-load value="false" />
<prompt-connection-selection value="true" />
<prompt-schema-selection value="true" />
</lookup-filters>
</navigation-settings>
<dataset-grid-settings>
<general>
<enable-zooming value="true" />
<enable-column-tooltip value="true" />
</general>
<sorting>
<nulls-first value="true" />
<max-sorting-columns value="4" />
</sorting>
<tracking-columns>
<columnNames value="" />
<visible value="true" />
<editable value="false" />
</tracking-columns>
</dataset-grid-settings>
<dataset-editor-settings>
<text-editor-popup>
<active value="false" />
<active-if-empty value="false" />
<data-length-threshold value="100" />
<popup-delay value="1000" />
</text-editor-popup>
<values-actions-popup>
<show-popup-button value="true" />
<element-count-threshold value="1000" />
<data-length-threshold value="250" />
</values-actions-popup>
<general>
<fetch-block-size value="100" />
<fetch-timeout value="30" />
<trim-whitespaces value="true" />
<convert-empty-strings-to-null value="true" />
<select-content-on-cell-edit value="true" />
<large-value-preview-active value="true" />
</general>
<filters>
<prompt-filter-dialog value="true" />
<default-filter-type value="BASIC" />
</filters>
<qualified-text-editor text-length-threshold="300">
<content-types>
<content-type name="Text" enabled="true" />
<content-type name="XML" enabled="true" />
<content-type name="DTD" enabled="true" />
<content-type name="HTML" enabled="true" />
<content-type name="XHTML" enabled="true" />
<content-type name="CSS" enabled="true" />
<content-type name="SQL" enabled="true" />
<content-type name="PL/SQL" enabled="true" />
<content-type name="JavaScript" enabled="true" />
<content-type name="JSON" enabled="true" />
<content-type name="JSON5" enabled="true" />
<content-type name="JSP" enabled="true" />
<content-type name="JSPx" enabled="true" />
<content-type name="ASP" enabled="true" />
<content-type name="YAML" enabled="true" />
</content-types>
</qualified-text-editor>
<record-navigation>
<navigation-target value="VIEWER" />
</record-navigation>
</dataset-editor-settings>
<code-editor-settings>
<general>
<show-object-navigation-gutter value="false" />
<show-spec-declaration-navigation-gutter value="true" />
<enable-spellchecking value="true" />
<enable-reference-spellchecking value="false" />
</general>
<confirmations>
<save-changes value="false" />
<revert-changes value="true" />
</confirmations>
</code-editor-settings>
<code-completion-settings>
<filters>
<basic-filter>
<filter-element type="RESERVED_WORD" id="keyword" selected="true" />
<filter-element type="RESERVED_WORD" id="function" selected="true" />
<filter-element type="RESERVED_WORD" id="parameter" selected="true" />
<filter-element type="RESERVED_WORD" id="datatype" selected="true" />
<filter-element type="RESERVED_WORD" id="exception" selected="true" />
<filter-element type="OBJECT" id="schema" selected="true" />
<filter-element type="OBJECT" id="role" selected="true" />
<filter-element type="OBJECT" id="user" selected="true" />
<filter-element type="OBJECT" id="privilege" selected="true" />
<user-schema>
<filter-element type="OBJECT" id="table" selected="true" />
<filter-element type="OBJECT" id="view" selected="true" />
<filter-element type="OBJECT" id="materialized view" selected="true" />
<filter-element type="OBJECT" id="index" selected="true" />
<filter-element type="OBJECT" id="constraint" selected="true" />
<filter-element type="OBJECT" id="trigger" selected="true" />
<filter-element type="OBJECT" id="synonym" selected="false" />
<filter-element type="OBJECT" id="sequence" selected="true" />
<filter-element type="OBJECT" id="procedure" selected="true" />
<filter-element type="OBJECT" id="function" selected="true" />
<filter-element type="OBJECT" id="package" selected="true" />
<filter-element type="OBJECT" id="type" selected="true" />
<filter-element type="OBJECT" id="dimension" selected="true" />
<filter-element type="OBJECT" id="cluster" selected="true" />
<filter-element type="OBJECT" id="dblink" selected="true" />
</user-schema>
<public-schema>
<filter-element type="OBJECT" id="table" selected="false" />
<filter-element type="OBJECT" id="view" selected="false" />
<filter-element type="OBJECT" id="materialized view" selected="false" />
<filter-element type="OBJECT" id="index" selected="false" />
<filter-element type="OBJECT" id="constraint" selected="false" />
<filter-element type="OBJECT" id="trigger" selected="false" />
<filter-element type="OBJECT" id="synonym" selected="false" />
<filter-element type="OBJECT" id="sequence" selected="false" />
<filter-element type="OBJECT" id="procedure" selected="false" />
<filter-element type="OBJECT" id="function" selected="false" />
<filter-element type="OBJECT" id="package" selected="false" />
<filter-element type="OBJECT" id="type" selected="false" />
<filter-element type="OBJECT" id="dimension" selected="false" />
<filter-element type="OBJECT" id="cluster" selected="false" />
<filter-element type="OBJECT" id="dblink" selected="false" />
</public-schema>
<any-schema>
<filter-element type="OBJECT" id="table" selected="true" />
<filter-element type="OBJECT" id="view" selected="true" />
<filter-element type="OBJECT" id="materialized view" selected="true" />
<filter-element type="OBJECT" id="index" selected="true" />
<filter-element type="OBJECT" id="constraint" selected="true" />
<filter-element type="OBJECT" id="trigger" selected="true" />
<filter-element type="OBJECT" id="synonym" selected="true" />
<filter-element type="OBJECT" id="sequence" selected="true" />
<filter-element type="OBJECT" id="procedure" selected="true" />
<filter-element type="OBJECT" id="function" selected="true" />
<filter-element type="OBJECT" id="package" selected="true" />
<filter-element type="OBJECT" id="type" selected="true" />
<filter-element type="OBJECT" id="dimension" selected="true" />
<filter-element type="OBJECT" id="cluster" selected="true" />
<filter-element type="OBJECT" id="dblink" selected="true" />
</any-schema>
</basic-filter>
<extended-filter>
<filter-element type="RESERVED_WORD" id="keyword" selected="true" />
<filter-element type="RESERVED_WORD" id="function" selected="true" />
<filter-element type="RESERVED_WORD" id="parameter" selected="true" />
<filter-element type="RESERVED_WORD" id="datatype" selected="true" />
<filter-element type="RESERVED_WORD" id="exception" selected="true" />
<filter-element type="OBJECT" id="schema" selected="true" />
<filter-element type="OBJECT" id="user" selected="true" />
<filter-element type="OBJECT" id="role" selected="true" />
<filter-element type="OBJECT" id="privilege" selected="true" />
<user-schema>
<filter-element type="OBJECT" id="table" selected="true" />
<filter-element type="OBJECT" id="view" selected="true" />
<filter-element type="OBJECT" id="materialized view" selected="true" />
<filter-element type="OBJECT" id="index" selected="true" />
<filter-element type="OBJECT" id="constraint" selected="true" />
<filter-element type="OBJECT" id="trigger" selected="true" />
<filter-element type="OBJECT" id="synonym" selected="true" />
<filter-element type="OBJECT" id="sequence" selected="true" />
<filter-element type="OBJECT" id="procedure" selected="true" />
<filter-element type="OBJECT" id="function" selected="true" />
<filter-element type="OBJECT" id="package" selected="true" />
<filter-element type="OBJECT" id="type" selected="true" />
<filter-element type="OBJECT" id="dimension" selected="true" />
<filter-element type="OBJECT" id="cluster" selected="true" />
<filter-element type="OBJECT" id="dblink" selected="true" />
</user-schema>
<public-schema>
<filter-element type="OBJECT" id="table" selected="true" />
<filter-element type="OBJECT" id="view" selected="true" />
<filter-element type="OBJECT" id="materialized view" selected="true" />
<filter-element type="OBJECT" id="index" selected="true" />
<filter-element type="OBJECT" id="constraint" selected="true" />
<filter-element type="OBJECT" id="trigger" selected="true" />
<filter-element type="OBJECT" id="synonym" selected="true" />
<filter-element type="OBJECT" id="sequence" selected="true" />
<filter-element type="OBJECT" id="procedure" selected="true" />
<filter-element type="OBJECT" id="function" selected="true" />
<filter-element type="OBJECT" id="package" selected="true" />
<filter-element type="OBJECT" id="type" selected="true" />
<filter-element type="OBJECT" id="dimension" selected="true" />
<filter-element type="OBJECT" id="cluster" selected="true" />
<filter-element type="OBJECT" id="dblink" selected="true" />
</public-schema>
<any-schema>
<filter-element type="OBJECT" id="table" selected="true" />
<filter-element type="OBJECT" id="view" selected="true" />
<filter-element type="OBJECT" id="materialized view" selected="true" />
<filter-element type="OBJECT" id="index" selected="true" />
<filter-element type="OBJECT" id="constraint" selected="true" />
<filter-element type="OBJECT" id="trigger" selected="true" />
<filter-element type="OBJECT" id="synonym" selected="true" />
<filter-element type="OBJECT" id="sequence" selected="true" />
<filter-element type="OBJECT" id="procedure" selected="true" />
<filter-element type="OBJECT" id="function" selected="true" />
<filter-element type="OBJECT" id="package" selected="true" />
<filter-element type="OBJECT" id="type" selected="true" />
<filter-element type="OBJECT" id="dimension" selected="true" />
<filter-element type="OBJECT" id="cluster" selected="true" />
<filter-element type="OBJECT" id="dblink" selected="true" />
</any-schema>
</extended-filter>
</filters>
<sorting enabled="true">
<sorting-element type="RESERVED_WORD" id="keyword" />
<sorting-element type="RESERVED_WORD" id="datatype" />
<sorting-element type="OBJECT" id="column" />
<sorting-element type="OBJECT" id="table" />
<sorting-element type="OBJECT" id="view" />
<sorting-element type="OBJECT" id="materialized view" />
<sorting-element type="OBJECT" id="index" />
<sorting-element type="OBJECT" id="constraint" />
<sorting-element type="OBJECT" id="trigger" />
<sorting-element type="OBJECT" id="synonym" />
<sorting-element type="OBJECT" id="sequence" />
<sorting-element type="OBJECT" id="procedure" />
<sorting-element type="OBJECT" id="function" />
<sorting-element type="OBJECT" id="package" />
<sorting-element type="OBJECT" id="type" />
<sorting-element type="OBJECT" id="dimension" />
<sorting-element type="OBJECT" id="cluster" />
<sorting-element type="OBJECT" id="dblink" />
<sorting-element type="OBJECT" id="schema" />
<sorting-element type="OBJECT" id="role" />
<sorting-element type="OBJECT" id="user" />
<sorting-element type="RESERVED_WORD" id="function" />
<sorting-element type="RESERVED_WORD" id="parameter" />
</sorting>
<format>
<enforce-code-style-case value="true" />
</format>
</code-completion-settings>
<execution-engine-settings>
<statement-execution>
<fetch-block-size value="100" />
<execution-timeout value="20" />
<debug-execution-timeout value="600" />
<focus-result value="false" />
<prompt-execution value="false" />
</statement-execution>
<script-execution>
<command-line-interfaces />
<execution-timeout value="300" />
</script-execution>
<method-execution>
<execution-timeout value="30" />
<debug-execution-timeout value="600" />
<parameter-history-size value="10" />
</method-execution>
</execution-engine-settings>
<operation-settings>
<transactions>
<uncommitted-changes>
<on-project-close value="ASK" />
<on-disconnect value="ASK" />
<on-autocommit-toggle value="ASK" />
</uncommitted-changes>
<multiple-uncommitted-changes>
<on-commit value="ASK" />
<on-rollback value="ASK" />
</multiple-uncommitted-changes>
</transactions>
<session-browser>
<disconnect-session value="ASK" />
<kill-session value="ASK" />
<reload-on-filter-change value="false" />
</session-browser>
<compiler>
<compile-type value="KEEP" />
<compile-dependencies value="ASK" />
<always-show-controls value="false" />
</compiler>
<debugger>
<debugger-type value="JDBC" />
<use-generic-runners value="true" />
</debugger>
</operation-settings>
<ddl-file-settings>
<extensions>
<mapping file-type-id="VIEW" extensions="vw" />
<mapping file-type-id="TRIGGER" extensions="trg" />
<mapping file-type-id="PROCEDURE" extensions="prc" />
<mapping file-type-id="FUNCTION" extensions="fnc" />
<mapping file-type-id="PACKAGE" extensions="pkg" />
<mapping file-type-id="PACKAGE_SPEC" extensions="pks" />
<mapping file-type-id="PACKAGE_BODY" extensions="pkb" />
<mapping file-type-id="TYPE" extensions="tpe" />
<mapping file-type-id="TYPE_SPEC" extensions="tps" />
<mapping file-type-id="TYPE_BODY" extensions="tpb" />
</extensions>
<general>
<lookup-ddl-files value="true" />
<create-ddl-files value="false" />
<synchronize-ddl-files value="true" />
<use-qualified-names value="false" />
<make-scripts-rerunnable value="true" />
</general>
</ddl-file-settings>
<general-settings>
<regional-settings>
<date-format value="MEDIUM" />
<number-format value="UNGROUPED" />
<locale value="SYSTEM_DEFAULT" />
<use-custom-formats value="false" />
</regional-settings>
<environment>
<environment-types>
<environment-type id="development" name="Development" description="Development environment" color="-2430209/-12296320" readonly-code="false" readonly-data="false" />
<environment-type id="integration" name="Integration" description="Integration environment" color="-2621494/-12163514" readonly-code="true" readonly-data="false" />
<environment-type id="production" name="Production" description="Productive environment" color="-11574/-10271420" readonly-code="true" readonly-data="true" />
<environment-type id="other" name="Other" description="" color="-1576/-10724543" readonly-code="false" readonly-data="false" />
</environment-types>
<visibility-settings>
<connection-tabs value="true" />
<dialog-headers value="true" />
<object-editor-tabs value="true" />
<script-editor-tabs value="false" />
<execution-result-tabs value="true" />
</visibility-settings>
</environment>
</general-settings>
</component>
<component name="DBNavigator.Project.StatementExecutionManager">
<execution-variables />
</component>
</project>

View File

@ -30,7 +30,7 @@
<style lang="scss" global>
@import "./css/global.scss";
@import "./css/traintimes.scss";
@import './fonts/fujicons.css';
.up,

View File

@ -49,10 +49,10 @@
<section class="navbar-section text-right">
<a href="/#/tweets" class="btn bg-primary ">Tweets</a>
<a href="/#/settings" class="btn bg-primary ">Settings</a>
<a title="Tweets" href="/#/tweets" class="btn--slim bg-primary"><i class="fa fa-twitter" style="color:white;"></i></a>
<a title="Settings" href="/#/settings" class="btn bg-primary "><i class="fa fa-cog-solid" style="color:white;"></i></a>
{#if showFav}
<a href="/#/favourites" class="btn bg-primary">Favourites</a>
<a href="/#/favourites" class="btn--slim bg-primary">Favourites</a>
{/if}
</section>

View File

@ -45,17 +45,32 @@
</script>
<style>
<style lang="scss">
$mui-base-font-size:1rem;
$mui-dropdown-bg-color:#fff;
$mui-dropdown-border-radius:0.1;
$mui-base-line-height:1.6;
$mui-dropdown-link-font-color:#294c5d;
$mui-dropdown-link-font-color-hover:#294c5d;
$mui-dropdown-link-bg-color-hover:#dcc894;
$mui-dropdown-link-font-color-disabled:#ff00ff;
$mui-cursor-disabled:disabled;
@import "../css/global/dropdown.scss";
</style>
<span class="mui-dropdown--right">
<span class="mui-dropdown mui-dropdown--right">
<label for={name}>{label}</label>
<input autocomplete="off" {name} on:keyup={debouncedDoSearch} bind:value />
{#if searchResults.length > 0}
<ul class="mui-dropdown__menu mui--is-open">
{#each searchResults as item, index}
<li><div on:click={selectItem} data-content="{item}">{item[1]} ({item[0]})</div></li>
<!--<li><div on:click={selectItem} data-content="{item}">{item[1]} ({item[0]})</div></li>-->
<li><a on:click={selectItem} data-content="{item}">{item[1]} ({item[0]})</a></li>
{/each}
</ul>
{/if}

View File

@ -37,7 +37,7 @@
<div class="col-5">{item.startStation.name}</div>
<div class="col-1"><i class="fa fa-thick-arrow fa-1x mui--align-middle"></i></div>
<div class="col-5">{item.destStation.name}</div>
<div class="col-1"><button class="btn btn-sm" on:click="{() => buttonsVisible = !buttonsVisible}"><i class="fa fa-menu"></i></button></div>
<div class="col-1"><button class="btn btn-sm--slim" on:click="{() => buttonsVisible = !buttonsVisible}"><i class="fa fa-menu"></i></button></div>
</div>

View File

@ -37,7 +37,9 @@
const url = baseUrl.concat(routeUrl)
await axios.get(url)
.then((d) => {
const data = JSON.parse(d.data);
// const data = JSON.parse(d.data);
const data = {...d.data};
list = reducer.reduceTrainTimetable(data)
otherDetails = reducer.reduceOtherDetails(data)
})
@ -60,7 +62,7 @@
<div class="nrccAlert" style="padding:2px;">
<ul>
{#each otherDetails.nrMessages as item}
<li class="alert bg-danger"><i class="fa fa-info mui--align-middle"></i> {item.msg}
<li class="alert bg-danger"><i class="fa fa-info align-middle"></i> {item.msg}
{#if item.link}
<a href={item.link}>{item.linkText}</a>
{/if}
@ -75,23 +77,25 @@
{#if list.length > 0}
{#each list as item, i (item.serviceIdUrlSafe)}
<div class="grid card mui--align-bottom" transition:fade|local>
<div class="col-5 mui--align-middle">
<div class="row card flex align-bottom" transition:fade|local>
<div class="col-5 align-middle">
<span on:click={viewService(item.serviceIdUrlSafe)}>{item.location}</span>
<span class="mui--text-accent">{item.carriageCount}</span>
<span class="text-accent">{item.carriageCount}</span>
<div>
{#if item.via}
<em class="mui--text-accent via">{item.via}</em>
<!--<em class="text-accent via">{item.via}</em>-->
<span class="badge">{item.via}</span>
{/if}
</div>
</div>
<div class="col-2 text-center mui--align-middle time">{item.time}</div>
<div class="col-2 text-center align-middle time">{item.time}</div>
{#if item.isCancelled}
<div class="col-5 text-center mui--align-middle delayed"><i class="fa fa-alert fa-1x mui--align-middle"></i>{item.cancel}</div>
<div class="col-5 text-center align-middle delayed"><i class="fa fa-alert fa-1x mui--align-middle"></i>{item.cancel}
</div>
{:else}
<div class="col-3 text-center mui--align-middle {item.statusMode}">{item.status}</div>
<div class="col-2 text-center mui--align-middle">{item.platform}</div>
<div class="col-3 text-center align-middle {item.statusMode}">{item.status}</div>
<div class="col-2 text-right align-middle">{item.platform}</div>
{/if}
</div>
{/each}

View File

@ -97,7 +97,7 @@
align-items: center;
padding: 0.7rem 0rem;
z-index: 1;
width: 100%;
width: 98%;
opacity: 0.9;
margin-bottom: 0.4rem;
border-bottom-color: #666666;
@ -144,12 +144,12 @@
</style>
<div class="columns TRcard">
<div class='entry ml-1'>
<div class="row TRcard">
<div class='entry col-8 ml--1'>
<div>{startStationName}</div>
<div>{destStationName}</div>
</div>
<div class='entry text-right'>
<div class='entry col-4 text-center'>
<span class="btn {status}" on:click={onClick}>{displayTime}</span>
</div>
</div>

View File

@ -32,24 +32,25 @@
.avatar {
max-width: 48px;
max-height: 48px;
object-fit: scale-down;
border-radius: 0.1rem;
}
</style>
{#if tweet}
<div class="card">
<blockquote>
<div class="card--slim">
<div class="tweet-header">
<div class="grid">
<img class='avatar col-2' src={viaImgCache(tweet.user.profile_image_url_https)} alt="@{tweet.user.screen_name}"/>
<div class="col-10 ml-2">
<div class="text-subhead">{tweet.user.name}</div>
<div>@{tweet.user.screen_name}</div>
<div class="text-subhead text-dark">{tweet.user.name}</div>
<div class="badge">@{tweet.user.screen_name}</div>
</div>
</div>
</div>
{#if inReply}
<div>
<div class="text-primary">
Replying to @{tweet.in_reply_to_screen_name}
</div>
{/if}
@ -59,6 +60,6 @@
<div>
<small class="text-highlight2">{tweet.created_at}</small>
</div>
</blockquote>
</div>
{/if}

View File

@ -30,7 +30,7 @@
<div class="container ">
<div class="text-dark text-subhead">Twitter</div>
{#if mounted}
<div class="grid-1">
<div class="grid-1 pad">
<div>
<label class="label-body">
<input type="checkbox" bind:checked={_following.nationalrailenq.follow}>

View File

@ -0,0 +1,7 @@
@media (min-height: 900px) {
body{
font-size: x-large;
}
}

View File

@ -0,0 +1,6 @@
// #00ffa2
// body > div > div > div:nth-child(2) > section > div.nrccAlert > ul > li > a
.nrccAlert a {
color:#00ffa2;
}

233
src/css/nord.css Normal file
View File

@ -0,0 +1,233 @@
/*
* Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
* Copyright (c) 2016-present Sven Greb <development@svengreb.de>
*
* Project: Nord
* Version: 0.2.0
* Repository: https://github.com/arcticicestudio/nord
* License: MIT
* References:
* https://www.w3.org/TR/css-variables
* https://www.w3.org/TR/selectors/#root-pseudo
* https://drafts.csswg.org/css-variables
* https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables
* http://warpspire.com/kss
* https://github.com/kss-node/kss-node
*/
/*
An arctic, north-bluish color palette.
Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
highlighting and UI.
It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
ambiance.
Styleguide Nord
*/
:root {
/*
Base component color of "Polar Night".
Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
Markup:
<div style="background-color:#2e3440; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--nord0: #2e3440;
/*
Lighter shade color of the base component color.
Used as a lighter background color for UI elements like status bars.
Markup:
<div style="background-color:#3b4252; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--nord1: #3b4252;
/*
Lighter shade color of the base component color.
Used as line highlighting in the editor.
In the UI scope it may be used as selection- and highlight color.
Markup:
<div style="background-color:#434c5e; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--nord2: #434c5e;
/*
Lighter shade color of the base component color.
Used for comments, invisibles, indent- and wrap guide marker.
In the UI scope used as pseudoclass color for disabled elements.
Markup:
<div style="background-color:#4c566a; width=60; height=60"></div>
Styleguide Nord - Polar Night
*/
--nord3: #4c566a;
/*
Base component color of "Snow Storm".
Main color for text, variables, constants and attributes.
In the UI scope used as semi-light background depending on the theme shading design.
Markup:
<div style="background-color:#d8dee9; width=60; height=60"></div>
Styleguide Nord - Snow Storm
*/
--nord4: #d8dee9;
/*
Lighter shade color of the base component color.
Used as a lighter background color for UI elements like status bars.
Used as semi-light background depending on the theme shading design.
Markup:
<div style="background-color:#e5e9f0; width=60; height=60"></div>
Styleguide Nord - Snow Storm
*/
--nord5: #e5e9f0;
/*
Lighter shade color of the base component color.
Used for punctuations, carets and structuring characters like curly- and square brackets.
In the UI scope used as background, selection- and highlight color depending on the theme shading design.
Markup:
<div style="background-color:#eceff4; width=60; height=60"></div>
Styleguide Nord - Snow Storm
*/
--nord6: #eceff4;
/*
Bluish core color.
Used for classes, types and documentation tags.
Markup:
<div style="background-color:#8fbcbb; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--nord7: #8fbcbb;
/*
Bluish core accent color.
Represents the accent color of the color palette.
Main color for primary UI elements and methods/functions.
Can be used for
- Markup quotes
- Markup link URLs
Markup:
<div style="background-color:#88c0d0; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--nord8: #88c0d0;
/*
Bluish core color.
Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
punctuations like (semi)colons,commas and braces.
Markup:
<div style="background-color:#81a1c1; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--nord9: #81a1c1;
/*
Bluish core color.
Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
Markup:
<div style="background-color:#5e81ac; width=60; height=60"></div>
Styleguide Nord - Frost
*/
--nord10: #5e81ac;
/*
Colorful component color.
Used for errors, git/diff deletion and linter marker.
Markup:
<div style="background-color:#bf616a; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord11: #bf616a;
/*
Colorful component color.
Used for annotations.
Markup:
<div style="background-color:#d08770; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord12: #d08770;
/*
Colorful component color.
Used for escape characters, regular expressions and markup entities.
In the UI scope used for warnings and git/diff renamings.
Markup:
<div style="background-color:#ebcb8b; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord13: #ebcb8b;
/*
Colorful component color.
Main color for strings and attribute values.
In the UI scope used for git/diff additions and success visualizations.
Markup:
<div style="background-color:#a3be8c; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord14: #a3be8c;
/*
Colorful component color.
Used for numbers.
Markup:
<div style="background-color:#b48ead; width=60; height=60"></div>
Styleguide Nord - Aurora
*/
--nord15: #b48ead;
}

235
src/css/nord.scss Normal file
View File

@ -0,0 +1,235 @@
// Copyright (c) 2016-present Arctic Ice Studio <development@arcticicestudio.com>
// Copyright (c) 2016-present Sven Greb <development@svengreb.de>
// Project: Nord
// Version: 0.2.0
// Repository: https://github.com/arcticicestudio/nord
// License: MIT
// References:
// http://sass-lang.com
// http://sassdoc.com
////
/// An arctic, north-bluish color palette.
/// Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax
/// highlighting and UI.
/// It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful
/// ambiance.
///
/// @author Arctic Ice Studio <development@arcticicestudio.com>
////
/// Base component color of "Polar Night".
///
/// Used for texts, backgrounds, carets and structuring characters like curly- and square brackets.
///
/// @access public
/// @example scss - SCSS
/// /* For dark ambiance themes */
/// .background {
/// background-color: $nord0;
/// }
/// /* For light ambiance themes */
/// .text {
/// color: $nord0;
/// }
/// @group polarnight
/// @since 0.1.0
$nord0: #2e3440;
/// Lighter shade color of the base component color.
///
/// Used as a lighter background color for UI elements like status bars.
///
/// @access public
/// @group polarnight
/// @see $nord0
/// @since 0.1.0
$nord1: #3b4252;
/// Lighter shade color of the base component color.
///
/// Used as line highlighting in the editor.
/// In the UI scope it may be used as selection- and highlight color.
///
/// @access public
/// @example scss - SCSS
/// /* Code Syntax Highlighting scope */
/// .editor {
/// &.line {
/// background-color: $nord2;
/// }
/// }
///
/// /* UI scope */
/// button {
/// &:selected {
/// background-color: $nord2;
/// }
/// }
/// @group polarnight
/// @see $nord0
/// @since 0.1.0
$nord2: #434c5e;
/// Lighter shade color of the base component color.
///
/// Used for comments, invisibles, indent- and wrap guide marker.
/// In the UI scope used as pseudoclass color for disabled elements.
///
/// @access public
/// @example scss - SCSS
/// /* Code Syntax Highlighting scope */
/// .editor {
/// &.indent-guide,
/// &.wrap-guide {
/// &.marker {
/// color: $nord3;
/// }
/// }
/// }
/// .comment,
/// .invisible {
/// color: $nord3;
/// }
///
/// /* UI scope */
/// button {
/// &:disabled {
/// background-color: $nord3;
/// }
/// }
/// @group polarnight
/// @see $nord0
/// @since 0.1.0
$nord3: #4c566a;
/// Base component color of "Snow Storm".
///
/// Main color for text, variables, constants and attributes.
/// In the UI scope used as semi-light background depending on the theme shading design.
///
/// @access public
/// @example scss - SCSS
/// /* For light ambiance themes */
/// .background {
/// background-color: $nord4;
/// }
/// /* For dark ambiance themes */
/// .text {
/// color: $nord4;
/// }
/// @group snowstorm
/// @since 0.1.0
$nord4: #d8dee9;
/// Lighter shade color of the base component color.
///
/// Used as a lighter background color for UI elements like status bars.
/// Used as semi-light background depending on the theme shading design.
///
/// @access public
/// @group snowstorm
/// @see $nord4
/// @since 0.1.0
$nord5: #e5e9f0;
/// Lighter shade color of the base component color.
///
/// Used for punctuations, carets and structuring characters like curly- and square brackets.
/// In the UI scope used as background, selection- and highlight color depending on the theme shading design.
///
/// @access public
/// @group snowstorm
/// @see $nord4
/// @since 0.1.0
$nord6: #eceff4;
/// Bluish core color.
///
/// Used for classes, types and documentation tags.
///
/// @access public
/// @group frost
/// @since 0.1.0
$nord7: #8fbcbb;
/// Bluish core accent color.
///
/// Represents the accent color of the color palette.
/// Main color for primary UI elements and methods/functions.
///
/// Can be used for
/// - Markup quotes
/// - Markup link URLs
///
/// @access public
/// @group frost
/// @since 0.1.0
$nord8: #88c0d0;
/// Bluish core color.
///
/// Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and
/// punctuations like (semi)colons,commas and braces.
///
/// @access public
/// @group frost
/// @since 0.1.0
$nord9: #81a1c1;
/// Bluish core color.
///
/// Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`).
///
/// @access public
/// @group frost
/// @since 0.1.0
$nord10: #5e81ac;
/// Colorful component color.
///
/// Used for errors, git/diff deletion and linter marker.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord11: #bf616a;
/// Colorful component color.
///
/// Used for annotations.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord12: #d08770;
/// Colorful component color.
///
/// Used for escape characters, regular expressions and markup entities.
/// In the UI scope used for warnings and git/diff renamings.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord13: #ebcb8b;
/// Colorful component color.
///
/// Main color for strings and attribute values.
/// In the UI scope used for git/diff additions and success visualizations.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord14: #a3be8c;
/// Colorful component color.
///
/// Used for numbers.
///
/// @access public
/// @group aurora
/// @since 0.1.0
$nord15: #b48ead;

View File

@ -10,10 +10,10 @@
onMount(async () => {
await state.getTweets();
serviceInterval = setInterval(async () => {
/* serviceInterval = setInterval(async () => {
console.log('Twitter update')
await state.getTweets();
}, 300000);
}, 300000);*/
});
onDestroy(async () => {

View File

@ -11,6 +11,8 @@ import { writable, get } from 'svelte/store';
import localforage from 'localforage';
const baseUrl = (ENV === 'production') ? (`${location.protocol }//${ location.hostname}`) : 'http://localhost:8100';
import Websocket from '../libs/websocket';
let started = false;
const twitterAccounts = {
'nationalrailenq': {
@ -199,10 +201,19 @@ const state = {
getBaseUrl() {
return baseUrl;
},
trigger(item) {
console.log('trigger', item);
if (item.hasOwnProperty('message') ) {
const msg = item.message;
}
}
};
const webSocket = new Websocket(state);
localforage.getItem('twitterFollowing').then((value) => {
if (value !== null) state.twitterFollowing.set(value);
else {
@ -273,6 +284,31 @@ state.twitterFollowing.subscribe((v) => {
state.twitterFollowingList.set(list);
});
state.twitterFollowingList.subscribe((v) => {
if (v.length === 0) return;
console.log('twitterFollowingList', v.length, v);
v.forEach((item) => {
console.log(item);
const id = item[1].id;
webSocket.subscribe(`t-${id}`);
/*
for (let t = 0; t < v.length, t++;) {
console.log(t);
}
*/
});
});
state.tweetList.subscribe((v) => {
console.log('tweetList', v);
});
state.tweets.subscribe((v) => {
console.log('tweets', v);
});
// started = true;
setTimeout(() => {
started = true;