martin/svelte-traintimes
martin/svelte-traintimes
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Making some progress

Browse Source
This commit is contained in:
Martin Donnelly 2020-08-16 20:11:32 +01:00
parent 29c7c7e132
commit ac4e57433e
10 changed files with 83 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.svelte
View File

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

6
src/components/Header.svelte
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>

21
src/components/SettingsInput.svelte
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}

2
src/components/SettingsListItem.svelte
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>

19
src/components/TimetableList.svelte
View File

@ -60,7 +60,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 +75,24 @@
{#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}

8
src/components/TrainRoute.svelte
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>

13
src/components/Twitter.svelte
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}

2
src/components/TwitterSettings.svelte
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}>

4
src/pages/Twitter.svelte
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 () => {

36
src/store/store.js
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;