Rebuilt the docker builder and turned off twitter and added the station flipper

Docker/dev/Dockerfile

@@ -0,0 +1,21 @@
+FROM git.caliban.io/martin/node-python:10
+#FROM martind2000/node-python3:18
+ARG VERSION
+ENV VERSION=${VERSION:-development}
+
+WORKDIR /app
+
+COPY ./Docker/start.sh ./package*.json ./rollup.config.js  /app/
+
+RUN mkdir -p /app/public /app/public/img
+
+# COPY ./src /app/src
+
+# COPY ./types /app/types
+
+RUN set -x && npm install
+
+RUN chmod +x /app/start.sh
+
+
+ENTRYPOINT ["/app/start.sh"]

Docker/start.sh

@@ -0,0 +1,12 @@
+#!/bin/sh
+set -ex
+
+# npm run dev
+
+# npm run start
+
+npx browserslist@latest --update-db
+
+npm run watch &
+
+while true; do sleep infinity; done

docker-compose.yml

@@ -0,0 +1,21 @@
+version: '3.5'
+
+services:
+  svelte-traintimes-src:
+    container_name: svelte-traintimes-src
+    build:
+      context: .
+      dockerfile: ./Docker/dev/Dockerfile
+    image: svelte-traintimes-src
+    logging:
+      options:
+        max-size: '1m'
+        max-file: '5'
+    # restart: always
+    # env_file:
+    #      - .env
+
+    volumes:
+      - ./src:/app/src
+      - ./public:/app/public
+      - ./fonts:/app/fonts

fonts/fujicons.css

@@ -0,0 +1,323 @@
+@font-face {
+    font-family: 'Fujicons';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./fujicons.woff) format('woff');
+    unicode-range: U+0-10FFFF;
+}
+
+
+.fa {
+  display: inline-block;
+  font: normal normal normal 14px/1 Fujicons;
+  font-size: inherit;
+  text-rendering: auto;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+/* makes the font 33% larger relative to the icon container */
+.fa-lg {
+  font-size: 1.33333333em;
+  line-height: 0.75em;
+  vertical-align: -15%;
+}
+.fa-2x {
+  font-size: 2em;
+}
+.fa-3x {
+  font-size: 3em;
+}
+.fa-4x {
+  font-size: 4em;
+}
+.fa-5x {
+  font-size: 5em;
+}
+.fa-fw {
+  width: 1.28571429em;
+  text-align: center;
+}
+.fa-ul {
+  padding-left: 0;
+  margin-left: 2.14285714em;
+  list-style-type: none;
+}
+.fa-ul > li {
+  position: relative;
+}
+.fa-li {
+  position: absolute;
+  left: -2.14285714em;
+  width: 2.14285714em;
+  top: 0.14285714em;
+  text-align: center;
+}
+.fa-li.fa-lg {
+  left: -1.85714286em;
+}
+.fa-border {
+  padding: .2em .25em .15em;
+  border: solid 0.08em #eeeeee;
+  border-radius: .1em;
+}
+.fa-pull-left {
+  float: left;
+}
+.fa-pull-right {
+  float: right;
+}
+.fa.fa-pull-left {
+  margin-right: .3em;
+}
+.fa.fa-pull-right {
+  margin-left: .3em;
+}
+/* Deprecated as of 4.4.0 */
+.pull-right {
+  float: right;
+}
+.pull-left {
+  float: left;
+}
+.fa.pull-left {
+  margin-right: .3em;
+}
+.fa.pull-right {
+  margin-left: .3em;
+}
+.fa-spin {
+  -webkit-animation: fa-spin 2s infinite linear;
+  animation: fa-spin 2s infinite linear;
+}
+.fa-pulse {
+  -webkit-animation: fa-spin 1s infinite steps(8);
+  animation: fa-spin 1s infinite steps(8);
+}
+@-webkit-keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+@keyframes fa-spin {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+  100% {
+    -webkit-transform: rotate(359deg);
+    transform: rotate(359deg);
+  }
+}
+.fa-rotate-90 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
+  -webkit-transform: rotate(90deg);
+  -ms-transform: rotate(90deg);
+  transform: rotate(90deg);
+}
+.fa-rotate-180 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
+  -webkit-transform: rotate(180deg);
+  -ms-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+.fa-rotate-270 {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
+  -webkit-transform: rotate(270deg);
+  -ms-transform: rotate(270deg);
+  transform: rotate(270deg);
+}
+.fa-flip-horizontal {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
+  -webkit-transform: scale(-1, 1);
+  -ms-transform: scale(-1, 1);
+  transform: scale(-1, 1);
+}
+.fa-flip-vertical {
+  -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
+  -webkit-transform: scale(1, -1);
+  -ms-transform: scale(1, -1);
+  transform: scale(1, -1);
+}
+:root .fa-rotate-90,
+:root .fa-rotate-180,
+:root .fa-rotate-270,
+:root .fa-flip-horizontal,
+:root .fa-flip-vertical {
+  filter: none;
+}
+.fa-stack {
+  position: relative;
+  display: inline-block;
+  width: 2em;
+  height: 2em;
+  line-height: 2em;
+  vertical-align: middle;
+}
+.fa-stack-1x,
+.fa-stack-2x {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  text-align: center;
+}
+.fa-stack-1x {
+  line-height: inherit;
+}
+.fa-stack-2x {
+  font-size: 2em;
+}
+.fa-inverse {
+  color: #ffffff;
+}
+
+
+.fa-back:before {
+  content: "";
+}
+
+.fa-forward:before {
+  content: "";
+}
+
+.fa-globe:before {
+  content: "\EA12"
+}
+
+.fa-up:before {
+  content: "\E925"
+}
+
+.fa-down:before {
+  content: "\E922"
+}
+
+.fa-work:before {
+  content: "\E998"
+}
+
+.fa-home:before {
+  content: "\EA1E"
+}
+
+.fa-refresh:before {
+  content: "\EA88"
+}
+
+
+.fa-menu:before {
+  content: "\EA68"
+}
+
+.fa-star:before {
+  content: "\EAB3"
+}
+
+.fa-star-filled:before {
+  content: "\EAB2"
+}
+
+.fa-thick-arrow:before {
+  content: "\EA08"
+}
+
+.fa-tick:before {
+  content: "\E9A4"
+}
+
+.fa-cross:before {
+  content: "\E951"
+}
+
+.fa-cross-circle:before {
+  content: "\E9D2"
+}
+
+.fa-cross-circle-filled:before {
+  content: "\E9D1"
+}
+
+.fa-alert:before {
+  content: "\E9ED"
+}
+
+.fa-alert-filled:before {
+  content: "\E9EC"
+}
+
+.fa-info:before {
+  content: "\E9EF"
+}
+
+.fa-info-filled:before {
+  content: "\E9EE"
+}
+
+.fa-bookmark:before {
+  content: "\E951"
+}
+
+.fa-bookmark-filled:before {
+  content: "\E950"
+}
+
+.fa-clockface:before {
+  content: "\E9AB"
+}
+
+.fa-clockface-filled:before {
+  content: "\E9AA"
+}
+
+.fa-twitter:before {
+  content: "\EAE5"
+}
+
+.fa-cog:before {
+  content: "\EA9E"
+}
+
+.fa-cog-solid:before {
+  content: "\EA11"
+}
+
+.fa-foursquare:before {
+  content: "\EA0B"
+}
+
+
+
+
+
+
+
+
+
+
+/*full list*/
+
+.fa-binoculars-solid:before {
+  content: "\E900"
+}
+
+.fa-binoculars:before {
+  content: "\E901"
+}
+
+.fa-check-circle-solid:before {
+  content: "\E902"
+}
+
+.fa-check-circle:before {
+  content: "\E903"
+}
+
+.fa-back-chevron:before {
+  content: "\E91F"
+}
+
+

fonts/gotham.css

@@ -0,0 +1,39 @@
+@font-face {
+    font-family: 'Gotham';
+    font-style: normal;
+    font-weight: 400;
+    src: url(GothamSSm-Book.otf) format('opentype');
+    unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+    font-family: 'Gotham Light';
+    font-style: normal;
+    font-weight: 400;
+    src: url(GothamSSm-Light.otf) format('opentype');
+    unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+    font-family: 'Gotham Medium';
+    font-style: normal;
+    font-weight: 400;
+    src: url(GothamSSm-Medium.otf) format('opentype');
+    unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+    font-family: 'Gotham Bold';
+    font-style: normal;
+    font-weight: 400;
+    src: url(GothamSSm-Bold.otf) format('opentype');
+    unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+    font-family: 'Gotham Black';
+    font-style: normal;
+    font-weight: 400;
+    src: url(GothamSSm-Black.otf) format('opentype');
+    unicode-range: U+0-10FFFF;
+}

fonts/roboto-condensed.css

@@ -0,0 +1,7 @@
+@font-face {
+    font-family: 'Roboto Condensed';
+    font-style: normal;
+    font-weight: 400;
+    src: url(./Roboto_Condensed-normal-400.woff) format('woff');
+    unicode-range: U+0-10FFFF;
+}

fonts/roboto.css

@@ -0,0 +1,32 @@
+@font-face {
+	font-family: 'Roboto';
+	font-style: normal;
+	font-weight: 400;
+	src: url(Roboto-normal-400.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Roboto Condensed';
+	font-style: normal;
+	font-weight: 400;
+	src: url(Roboto_Condensed-normal-400.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Roboto Mono';
+	font-style: normal;
+	font-weight: 400;
+	src: url(Roboto_Mono-normal-400.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+
+@font-face {
+	font-family: 'Roboto Slab';
+	font-style: normal;
+	font-weight: 400;
+	src: url(Roboto_Slab-normal-400.woff) format('woff');
+	unicode-range: U+0-10FFFF;
+}
+

package.json

@@ -1,10 +1,22 @@
 {
   "name": "svelte-app",
   "version": "1.0.0",
+  "watch": {
+    "rebuild": {
+      "patterns": ["src"],
+      "extensions": "js,svelte,css,scss",
+      "quiet": false,
+      "legacyWatch": true,
+      "delay": 2500,
+      "runOnChangeOnly": false
+    }
+  },
   "scripts": {
     "build": "rollup -c",
     "dev": "rollup -c -w",
-    "start": "sirv public"
+    "start": "sirv public",
+    "rebuild" :"npm run build",
+    "watch": "npm-watch"
   },
   "devDependencies": {
     "@rollup/plugin-commonjs": "^15.0.0",
@@ -26,6 +38,7 @@
     "axios": "^0.19.2",
     "localforage": "^1.9.0",
     "muicss": "^0.10.2",
+    "npm-watch": "^0.13.0",
     "redaxios": "^0.3.0",
     "rollup-plugin-replace": "^2.2.0",
     "sirv-cli": "^1.0.6",

public/service-worker.js

@@ -36,6 +36,7 @@ const filesToCache = [
 
 self.addEventListener('install', function(e) {
   console.log('[ServiceWorker] Install');
+  return;
   e.waitUntil(
     caches.open(cacheName).then(function(cache) {
       console.log('[ServiceWorker] Caching app shell');

src/components/Header.svelte

@@ -1,11 +1,16 @@
 <script>
-    import {pop} from 'svelte-spa-router';
+    import {pop, location as loc} from 'svelte-spa-router';
 
     export let page;
     let showFav = false;
 
+    loc.subscribe((location) => {
+        // console.log("location", location);
+        page = location;
+    });
+
     let titleText = 'Traintimes';
-    $: currentMode = (page === 'Home') ? 0 : 1;
+    $: currentMode = (page === '' || page === '/') ? 0 : 1;
 
     function goBack() {
         pop();
@@ -16,6 +21,7 @@
     }
 
 
+
 </script>
 
 <style>
@@ -49,7 +55,7 @@
 
 
     <section class="navbar-section  text-right">
-        <a title="Tweets" href="/#/tweets" class="btn--slim bg-primary"><i class="fa fa-twitter" style="color:white;"></i></a>
+        <!--<a title="Tweets" href="/#/tweets" class="btn&#45;&#45;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--slim bg-primary">Favourites</a>

src/components/SettingsInput.svelte

@@ -60,7 +60,7 @@
   @import "../css/global/dropdown.scss";
 
   input {
-    background-color: deeppink;
+    // background-color: deeppink;
     padding-bottom: 6px !important;
     padding-top: 6px !important;
 
@@ -76,7 +76,7 @@
         {#each searchResults as item, index}
             <!--<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>
+            <li><a on:click={selectItem} data-content="{item}" >{item[1]} ({item[0]})</a></li>
         {/each}
     </ul>
     {/if}

src/components/SettingsListItem.svelte

@@ -22,6 +22,11 @@
 
     }
 
+    function flipItem() {
+        console.log(`flipItem: ${id}`);
+        state.flipRoute(id);
+    }
+
 </script>
 
 <style>
@@ -30,6 +35,13 @@
         grid-template-columns: repeat(3, 1fr);
         grid-gap: 1rem;
     }
+
+
+    .grid-4 {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        grid-gap: 1rem;
+    }
 </style>
 
 <div out:slide|local>
@@ -43,14 +55,16 @@
     </div>
 
     {#if buttonsVisible}
-        <div class="my grid-3" transition:slide>
+        <div class="my grid-4" transition:slide>
             <button class="btn btn-danger btn-sm" id="delete" type="button" on:click={deleteItem}>
                 Delete
             </button>
             <button class="btn btn-primary btn-sm" id="save" type="button" on:click={saveEditor}>
                 Edit
             </button>
-
+            <button class="btn btn-primary btn-sm" id="flip" type="button" on:click={flipItem}>
+                Flip
+            </button>
             <button class="btn btn-sm" type="button" on:click={closeEditor}>
                 Close
             </button>

src/components/TrainRoute.svelte

@@ -87,7 +87,7 @@
 
         // trainData = {...JSON.parse(d.data)};
         trainData = {...d.data};
-        console.log(trainData);
+        console.dir(trainData);
       }).catch((err) => {
         console.error('TrainRoute:getTrain', err);
     })

src/css/global/fixes.scss

@@ -7,7 +7,7 @@
 
 
 .betterInput {
-background-color: deeppink;
+ // background-color: lime;
   padding-bottom: 6px !important;
   padding-top: 6px !important;
 

src/css/traintimes.scss

@@ -1,4 +1,6 @@
-@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
+// @import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');
+@import url('./fonts/roboto-condensed.css');
+@import url('./fonts/fujicons.css');
 @import './nord.scss';
 
 $navbar-height: 56px;

src/pages/Settings.svelte

@@ -14,6 +14,6 @@
 
     <SettingsEditor/>
     <SettingsList/>
-    <hr/>
+   <!-- <hr/>
-    <TwitterSettings/>
+    <TwitterSettings/>-->
 </div>

src/store/store.js

@@ -10,7 +10,12 @@ import axios from 'redaxios';
 
 import { writable, get, derived } from 'svelte/store';
 import localforage from 'localforage';
-const baseUrl = (__ENV__ === 'production') ? (`${location.protocol }//${ location.hostname}`) : 'http://localhost:8100';
+
+// const baseUrl = (__ENV__ === 'production') ? (`${location.protocol }//${ location.hostname}`) : 'http://localhost:8100';
+
+let portPart = (location.port) ? `:${location.port}` : '';
+let baseUrl = `${location.protocol }//${ location.hostname}${portPart}`
+
 
 import Websocket from '../libs/websocket';
 
@@ -161,6 +166,32 @@ const state = {
     const post = get(this.routes).slice(id + 1);
 
     this.routes.set([...pre, ...post]);
+  },
+  flipRoute(id) {
+    console.log('State:flipRoute:', id);
+    console.log('Route', get(this.routes)[id]);
+
+    let origRoute = {...get(this.routes)[id]};
+
+    console.log('Origroute', origRoute);
+
+    let newRoute = {
+      id: origRoute.id,
+      destStation: {...origRoute.startStation},
+      startStation: {...origRoute.destStation},
+    };
+
+    console.log({...origRoute.startStation});
+
+    let routes = get(this.routes);
+
+    console.log("flipped route:", newRoute);
+
+    routes[id] = {...newRoute};
+
+    this.routes.set(routes);
+
+
   },
   async getTweets() {
     // console.log('>> getTweets');
@@ -240,7 +271,10 @@ const state = {
     
 };
 
-const webSocket = new Websocket(state);
+
+// const webSocket = new Websocket(state);
+// disabled for the moment
+
 
 localforage.getItem('twitterFollowing').then((value) => {
   console.log('localForage::twitterFollowing', value);
@@ -320,6 +354,8 @@ state.twitterFollowing.subscribe((v) => {
   state.twitterFollowingList.set(list);
 });
 
+/*
+No more twitter, disabled
 state.twitterFollowingList.subscribe((v) => {
   if (v.length === 0) return;
   console.log('twitterFollowingList', v.length);
@@ -329,6 +365,7 @@ state.twitterFollowingList.subscribe((v) => {
   });
 });
 
+*/
 state.newTweets.subscribe((data) => {
   if (data.length === 0) return;
   console.log('>> newTweets', data.length);