From 0d5f8d2b3d33b808db1302c078b004fc15416765 Mon Sep 17 00:00:00 2001
From: Arno Cellarier <git@arno.cl>
Date: Sun, 30 Jun 2024 16:53:50 +0200
Subject: [PATCH 1/2] style: disrutpions grid transition

---
 src/components/Screen.vue | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/components/Screen.vue b/src/components/Screen.vue
index b2a9a4f..3174818 100644
--- a/src/components/Screen.vue
+++ b/src/components/Screen.vue
@@ -134,7 +134,7 @@ onMounted(async () => {
     ></Header>
     <SuspendedService v-if="serviceIsSuspended"></SuspendedService>
     <EmptyState v-else-if="departures.length === 0"></EmptyState>
-    <div class="withDisruptions" v-else>
+    <div class="withDisruptions" :empty-panel="disruptions.length === 0" v-else>
       <TransitionGroup
         tag="section"
         name="horizontal"
@@ -229,6 +229,13 @@ article time {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
+  transition-property: grid-template-columns, grid-template-rows;
+  transition-duration: 2s;
+  transition-timing-function: cubic-bezier(0.28, 0.16, 0.03, 0.94);
+}
+
+.withDisruptions[empty-panel="true"] {
+  grid-template-rows: 1fr 0fr;
 }
 
 @media (max-height: 40vw) {
@@ -245,5 +252,9 @@ article time {
   .withDisruptions {
     grid-template-columns: 1fr 1fr;
   }
+
+  .withDisruptions[empty-panel="true"] {
+    grid-template-columns: 1fr 0fr;
+  }
 }
 </style>

From 55b08a7000ea0e0665da737ee1d0d3d985948dce Mon Sep 17 00:00:00 2001
From: Arno Cellarier <git@arno.cl>
Date: Tue, 17 Sep 2024 23:42:54 +0200
Subject: [PATCH 2/2] refactor: use SVG instead of CSS shapes

---
 src/components/Header.vue                    |  4 +-
 src/components/LineIndicator.vue             | 97 +-------------------
 src/components/Stop.vue                      |  8 +-
 src/components/disruptions/LineIndicator.vue |  4 +-
 src/services/Wagon.ts                        | 16 +++-
 5 files changed, 21 insertions(+), 108 deletions(-)

diff --git a/src/components/Header.vue b/src/components/Header.vue
index 9c4e7f7..4e2b50a 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -12,7 +12,7 @@ defineProps<{
 <template>
   <header :style="{ '--line-color': toCSSColor(line.backgroundColor) }">
     <div role="group">
-      <img :src="line.pictoPng" alt="" />
+      <div v-html="line.pictoSvg" class="picto"></div>
       <LineIndicator :line="line" height="8vw"></LineIndicator>
     </div>
     <h1>{{ direction }}</h1>
@@ -40,7 +40,7 @@ h1 {
   margin: 0;
 }
 
-img {
+.picto {
   height: 8vw;
   width: auto;
 }
diff --git a/src/components/LineIndicator.vue b/src/components/LineIndicator.vue
index 1bdd87c..25f396c 100644
--- a/src/components/LineIndicator.vue
+++ b/src/components/LineIndicator.vue
@@ -10,100 +10,5 @@ defineProps<{
 </script>
 
 <template>
-  <div
-    :style="{
-      '--background-color': toCSSColor(line.backgroundColor),
-      '--text-color': toCSSColor(line.textColor),
-      '--height': height,
-    }"
-  >
-    <div
-      v-if="
-        ['circle-filled', 'square-filled', 'rectangle-filled'].includes(
-          line.backgroundShape
-        )
-      "
-      :class="toCamelCase(line.backgroundShape, '-')"
-    >
-      <span>{{ line.number }}</span>
-    </div>
-    <div
-      v-if="line.backgroundShape === 'horizontal-lines'"
-      class="horizontalLines"
-    >
-      <span>{{ line.number }}</span>
-    </div>
-  </div>
+  <div :style="{ height }" v-html="line.numberShapeSvg"></div>
 </template>
-
-<style scoped>
-.circleFilled,
-.squareFilled,
-.rectangleFilled,
-.horizontalLines {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: var(--height);
-}
-
-.circleFilled,
-.squareFilled,
-.rectangleFilled {
-  background-color: var(--background-color);
-  color: var(--text-color);
-}
-
-.circleFilled,
-.squareFilled {
-  width: var(--height);
-}
-
-.rectangleFilled {
-  box-sizing: border-box;
-  min-width: var(--height);
-  padding: calc(var(--height) * 0.14) calc(var(--height) * 0.2);
-}
-
-.circleFilled {
-  border-radius: 50%;
-}
-
-.squareFilled {
-  border-radius: calc(var(--height) * 0.2);
-}
-
-.rectangleFilled span {
-  font-size: calc(var(--height) * 0.85);
-}
-span {
-  font-size: calc(var(--height) * 0.7);
-  font-weight: bold;
-}
-
-.horizontalLines {
-  position: relative;
-  min-width: var(--height);
-}
-
-.horizontalLines::before,
-.horizontalLines::after {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: calc(var(--height) * 0.1);
-  border-radius: 9999px;
-  background-color: var(--background-color);
-}
-
-.horizontalLines::before {
-  top: unset;
-  bottom: 0;
-}
-
-.horizontalLines span {
-  font-size: calc(var(--height) * 0.6);
-}
-</style>
diff --git a/src/components/Stop.vue b/src/components/Stop.vue
index cef7815..0e0313c 100644
--- a/src/components/Stop.vue
+++ b/src/components/Stop.vue
@@ -19,10 +19,10 @@ const lines = computed<SimpleLine[]>(() => stop.lines)
 const groupedLines = computed(() => {
   const groups: { [key: string]: SimpleLine[] } = {}
   lines.value.forEach((line) => {
-    if (!groups[line.pictoPng]) {
-      groups[line.pictoPng] = []
+    if (!groups[line.pictoSvg]) {
+      groups[line.pictoSvg] = []
     }
-    groups[line.pictoPng].push(line)
+    groups[line.pictoSvg].push(line)
   })
 
   Object.keys(groups).forEach((mode) => {
@@ -55,7 +55,7 @@ watch(
     <div class="stop-lines">
       <div v-for="(lines, mode) in groupedLines" :key="mode" class="mode-group">
         <div class="lines">
-          <img :src="String(mode)" alt="Mode icon" class="mode-icon" />
+          <div v-html="lines.at(0)?.pictoSvg" class="mode-icon"></div>
           <button
             class="line"
             v-for="line in expandedGroups[mode]
diff --git a/src/components/disruptions/LineIndicator.vue b/src/components/disruptions/LineIndicator.vue
index 8a387b8..7a614fd 100644
--- a/src/components/disruptions/LineIndicator.vue
+++ b/src/components/disruptions/LineIndicator.vue
@@ -13,7 +13,7 @@ const sizeVw = computed(() => (props.size === "default" ? "5vw" : "2vw"))
 
 <template>
   <div role="group" :style="{ '--size-vw': sizeVw }">
-    <img :size="size" :src="disruption.line.pictoPng" />
+    <div class="picto" :size="size" v-html="disruption.line.pictoSvg"></div>
     <LineIndicator :height="sizeVw" :line="disruption.line" />
     <div class="icon" :blink="size === 'default'">
       <template v-if="size === 'small'">
@@ -162,7 +162,7 @@ const sizeVw = computed(() => (props.size === "default" ? "5vw" : "2vw"))
 </template>
 
 <style scoped>
-img {
+.picto {
   height: 100%;
 }
 
diff --git a/src/services/Wagon.ts b/src/services/Wagon.ts
index 6bbf18b..d919bf3 100644
--- a/src/services/Wagon.ts
+++ b/src/services/Wagon.ts
@@ -5,8 +5,9 @@ export interface SimpleLine {
   number: string
   backgroundColor: string
   textColor: string
-  backgroundShape: string
-  pictoPng: string
+  pictoSvg?: string
+  numberShapeSvg?: string
+  importance: number
 }
 
 export interface SimpleStop {
@@ -36,6 +37,12 @@ export interface SimpleDisruption {
 
 const hostname = window.location.hostname
 
+function processSVG(svg: string): string {
+  return svg
+    .replace(/width="[^"]+"/, "")
+    .replace(/height="[^"]+"/, `height="100%"`)
+}
+
 export class Wagon {
   private static BASE_URL = "https://api-wagon.arno.cl/gantry/"
 
@@ -80,8 +87,9 @@ export class Wagon {
       number: lineDto.number,
       backgroundColor: lineDto.backgroundColor,
       textColor: lineDto.textColor,
-      backgroundShape: lineDto.shape,
-      pictoPng: lineDto.picto,
+      pictoSvg: processSVG(lineDto.modeSvg ?? ""),
+      numberShapeSvg: processSVG(lineDto.numberShapeSvg ?? ""),
+      importance: lineDto.importance,
     }
   }