From d07936d314a23008cc0fabae60086de1957f6eab Mon Sep 17 00:00:00 2001
From: Kacper Donat <kadet1090@gmail.com>
Date: Tue, 14 Jan 2020 22:04:29 +0100
Subject: [PATCH] Fix order of scheduled and actual departure time

---
 resources/components/departures.html          | 25 +----------
 .../components/departures/departure.html      | 29 +++++++++++++
 resources/styles/_common.scss                 |  4 +-
 resources/styles/_departure.scss              | 41 ++++++++-----------
 resources/styles/_line.scss                   |  6 ++-
 resources/styles/_stop.scss                   |  2 +
 resources/ts/components/departures.ts         | 21 +++++++++-
 7 files changed, 75 insertions(+), 53 deletions(-)
 create mode 100644 resources/components/departures/departure.html

diff --git a/resources/components/departures.html b/resources/components/departures.html
index 8a261b8..353b902 100644
--- a/resources/components/departures.html
+++ b/resources/components/departures.html
@@ -1,30 +1,7 @@
 <div class="departures" v-responsive>
     <ul class="departures__list list-underlined">
-        <li class="departure" v-for="departure in departures">
-            <div class="departure__line">
-                <line-symbol :line="departure.line"/>
-                <div class="line__display">{{ departure.display }}</div>
-            </div>
-
-            <div class="departure__time">
-                <fa :icon="['far', 'clock']" v-if="!departure.estimated" title="Czas rozkładowy, nieuwzględniający aktualnej sytuacji komunikacyjnej."/>
-                <span class="departure__estimated" v-if="departure.estimated && departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm')">{{ departure.estimated.format('HH:mm') }}</span>
-                <span class="badge" :class="[departure.delay < 0 ? 'badge-danger' : 'badge-warning']"
-                      v-if="departure.delay < 0 || departure.delay > 30">
-                    {{ departure.delay|signed }}s
-                </span>
-                <span :class="[ 'departure__scheduled', departure.estimated && departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm') && 'departure__scheduled--delayed']">
-                    {{ departure.scheduled.format('HH:mm') }}
-                </span>
-            </div>
-
-            <div class="departure__stop">
-                <fa :icon="['fal', 'sign']" fixed-width class="mr-1"/>
-                <stop :stop="departure.stop"/>
-            </div>
-        </li>
+        <departure :departure="departure" v-for="departure in departures"/>
     </ul>
-
     <div class="alert alert-info" v-if="stops.length === 0">
         <fa :icon="['fal', 'info-circle']"/>
         Wybierz przystanki korzystając z wyszukiwarki poniżej, aby zobaczyć listę odjazdów.
diff --git a/resources/components/departures/departure.html b/resources/components/departures/departure.html
new file mode 100644
index 0000000..a83199c
--- /dev/null
+++ b/resources/components/departures/departure.html
@@ -0,0 +1,29 @@
+<li class="departure">
+    <div class="departure__line">
+        <line-symbol :line="departure.line"/>
+        <div class="line__display">{{ departure.display }}</div>
+    </div>
+
+    <div class="departure__time">
+        <fa :icon="['far', 'clock']" v-if="!departure.estimated" title="Czas rozkładowy, nieuwzględniający aktualnej sytuacji komunikacyjnej."/>
+        <span :class="[ 'departure__time', 'departure__time--delayed']" v-if="timeDiffers">
+            {{ departure.scheduled.format('HH:mm') }}
+        </span>
+        <span class="badge" :class="[departure.delay < 0 ? 'badge-danger' : 'badge-warning']"
+              v-if="departure.delay < 0 || departure.delay > 30">
+                    {{ departure.delay|signed }}s
+        </span>
+        <span class="departure__time">{{ time.format('HH:mm') }}</span>
+    </div>
+
+    <div class="departure__stop">
+        <fa :icon="['fal', 'sign']" fixed-width class="mr-1 flex-shrink-0"/>
+        <stop :stop="departure.stop"/>
+
+        <div class="stop__actions flex-space-left">
+            <button class="btn btn-action">
+                <fa :icon="['far', 'code-commit']" rotation="90" />
+            </button>
+        </div>
+    </div>
+</li>
diff --git a/resources/styles/_common.scss b/resources/styles/_common.scss
index 29b9570..9e8c0ce 100644
--- a/resources/styles/_common.scss
+++ b/resources/styles/_common.scss
@@ -95,7 +95,7 @@
 }
 
 svg.svg-inline--fa {
-  transform: rotate(360deg)
+  //transform: rotate(360deg)
 }
 
 .btn-unstyled {
@@ -108,4 +108,4 @@ svg.svg-inline--fa {
 
 .icon {
   padding: .5rem 0.75rem;
-}
\ No newline at end of file
+}
diff --git a/resources/styles/_departure.scss b/resources/styles/_departure.scss
index 08be2ad..10d908a 100644
--- a/resources/styles/_departure.scss
+++ b/resources/styles/_departure.scss
@@ -1,36 +1,29 @@
 .departure {
   @extend .flex;
   flex-wrap: wrap;
+}
 
-  .departure__line {
-    @extend .flex;
-    flex: 3 0;
+.departure__line {
+  @extend .flex;
+  flex: 3 0;
 
-    .line__symbol {
-      min-width: 6rem;
-    }
-  }
-
-  .departure__stop {
-    @extend .flex;
-    width: 100%;
-
-    .stop {
-      flex: 1 1 auto;
-    }
-  }
-
-  .departure__time {
-    width: 9rem;
-    text-align: right;
-
-    .departure__scheduled--delayed {
-      text-decoration: line-through;
-    }
+  .line__symbol {
+    min-width: 6rem;
   }
+}
 
+.departure__stop {
+  @extend .flex;
+  width: 100%;
+}
 
+.departure__time {
+  width: 9rem;
+  text-align: right;
+}
 
+.departure__time--delayed {
+  text-decoration: line-through;
 }
 
 .departures {
diff --git a/resources/styles/_line.scss b/resources/styles/_line.scss
index 6a80024..52d476f 100644
--- a/resources/styles/_line.scss
+++ b/resources/styles/_line.scss
@@ -2,6 +2,10 @@
   @extend .flex;
 }
 
+.line__display {
+  line-height: 1.2;
+}
+
 .line__symbol {
   @each $type, $color in $line-types {
     .icon {
@@ -45,4 +49,4 @@
     flex: 1 1 auto;
     white-space: normal;
   }
-}
\ No newline at end of file
+}
diff --git a/resources/styles/_stop.scss b/resources/styles/_stop.scss
index 96fea65..5151334 100644
--- a/resources/styles/_stop.scss
+++ b/resources/styles/_stop.scss
@@ -5,6 +5,8 @@
 }
 
 .stop__name {
+  flex: 1 0;
+  line-height: 1.2;
 }
 
 .stop__variant {
diff --git a/resources/ts/components/departures.ts b/resources/ts/components/departures.ts
index a96968b..99114e4 100644
--- a/resources/ts/components/departures.ts
+++ b/resources/ts/components/departures.ts
@@ -7,7 +7,7 @@ import store from '../store'
 const { State } = namespace('departures');
 
 @Component({ template: require("../../components/departures.html"), store })
-export class Departures extends Vue {
+export class DeparturesComponent extends Vue {
     @State
     departures: Departure[];
 
@@ -15,4 +15,21 @@ export class Departures extends Vue {
     stops: Stop[];
 }
 
-Vue.component('Departures', Departures);
+@Component({ template: require("../../components/departures/departure.html"), store })
+export class DepartureComponent extends Vue {
+    @Prop(Object)
+    departure: Departure;
+
+    get timeDiffers() {
+        const departure = this.departure;
+
+        return departure.estimated && departure.scheduled.format('HH:mm') !== departure.estimated.format('HH:mm');
+    }
+
+    get time() {
+        return this.departure.estimated || this.departure.scheduled;
+    }
+}
+
+Vue.component('Departures', DeparturesComponent);
+Vue.component('Departure', DepartureComponent);