Making some progress

src/App.svelte

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

src/components/Header.svelte

@@ -49,10 +49,10 @@
 
 
     <section class="navbar-section  text-right">
-        <a href="/#/tweets" class="btn bg-primary ">Tweets</a>
+        <a title="Tweets" href="/#/tweets" class="btn--slim bg-primary"><i class="fa fa-twitter" style="color:white;"></i></a>
-        <a href="/#/settings" class="btn bg-primary ">Settings</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>
 

src/components/SettingsInput.svelte

@@ -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}

src/components/SettingsListItem.svelte

@@ -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>

src/components/TimetableList.svelte

@@ -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="row card flex align-bottom" transition:fade|local>
-                    <div class="col-5 mui--align-middle">
+                    <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-3 text-center align-middle {item.statusMode}">{item.status}</div>
-                        <div class="col-2 text-center mui--align-middle">{item.platform}</div>
+                        <div class="col-2 text-right align-middle">{item.platform}</div>
                     {/if}
                 </div>
             {/each}

src/components/TrainRoute.svelte

@@ -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="row TRcard">
-    <div class='entry ml-1'>
+    <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>

src/components/Twitter.svelte

@@ -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">
+    <div class="card--slim">
-        <blockquote>
+
             <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 class="text-subhead text-dark">{tweet.user.name}</div>
-                        <div>@{tweet.user.screen_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}

src/components/TwitterSettings.svelte

@@ -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}>

src/pages/Twitter.svelte

@@ -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 () => {

src/store/store.js

@@ -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;