Fix css for menu, fix prod api url

src/main/scala/db/DBConnection.scala

@@ -14,7 +14,7 @@ object DBConnection {
   private def getDbPassword = sys.env.getOrElse("POSTGRES_PASSWORD", "")
 
   private def getDatabaseUrl: String =
-    sys.env.getOrElse("DATABASE_URL", s"postgres://${getDbUser}:${getDbPassword}@0.0.0.0:5432/${getDbName}") // host - postgres for docker, 0.0.0.0 outside docker
+    sys.env.getOrElse("DATABASE_URL", s"postgres://${getDbUser}:${getDbPassword}@postgres:5432/${getDbName}") // host - postgres for docker, 0.0.0.0 outside docker
 
   private def parseUrl(url: String): Either[String, PostgresConfig] = {
     Try {

web/src/App.tsx

@@ -1,36 +1,48 @@
-import { Component, createSignal } from 'solid-js';
+import { Component, JSXElement, createSignal } from 'solid-js';
 
 import styles from './css/App.module.css';
 import { Country } from './country/Country';
 import { Cities } from './cities/Cities';
 import { Database } from './database/Database';
+import { Station } from './station/Station';
+import { apiHost } from './consts';
 
 console.log("env:", import.meta.env.MODE);
-console.log("api host:", import.meta.env.VITE_API_HOST);
+console.log("api host:", apiHost);
 
-type Section = "cities" | "country" | "database";
+// type Section = "station" | "cities" | "country" | "database";
 
 const App: Component = () => {
-    const [getSection, setSection] = createSignal<Section>("cities");
+    const pages: [string, () => JSXElement][] = [
+        ["station", () => <Station />],
+        ["cities", () => <Cities />],
+        ["latvia", () => <Country />],
+        ["database", () => <Database />],
+    ];
+    const [getPageTitle, setPageTitle] = createSignal("cities");
 
-    const section = () => {
-        switch(getSection()) {
-            case "database": return <Database />;
-            case "country": return <Country />;
-            case "cities": return <Cities />
-            default: 
-                return <Cities />;
-        }
+    const getPageContent = () => {
+        const page = pages.find(p => p[0] === getPageTitle());
+        return page ? page[1]() : <div>Page not found!</div>;
+    }
+
+    const getActiveCSS = (pageTitle: string) => {
+        return getPageTitle() === pageTitle ? styles.active : "";
     }
 
     return (
         <div class={styles.App}>
-            <div class={styles.sections}>
-                <span onClick={() => setSection("cities")}>cities</span> | 
-                <span onClick={() => setSection("country")}>latvia</span> | 
-                <span onClick={() => setSection("database")}>database</span>
-            </div>
-            { section() }
+            <ul class={styles.menu}>
+                { pages.map(([pageTitle]) =>
+                    <li
+                        class={getActiveCSS(pageTitle)}
+                        onClick={() => setPageTitle(pageTitle)}
+                    >
+                        {pageTitle}
+                    </li>
+                )}
+            </ul>
+            { getPageContent() }
         </div>
     );
 };

web/src/consts.ts

@@ -1,4 +1,10 @@
-export const apiHost = import.meta.env.VITE_API_HOST;
+
+const protocol = window.location.protocol;
+const host = window.location.hostname;
+const port = window.location.port;
+export const apiHost = import.meta.env.MODE === "development"
+    ? import.meta.env.VITE_API_HOST : `${protocol}//${host}:${port}`;
+// export const apiHost = import.meta.env.VITE_API_HOST;
 
 export const cityList = ["Ainaži", "Alūksne", "Bauska", "Dagda", "Daugavgrīva", "Daugavpils", "Dobele", "Gulbene", "Jelgava", "Kalnciems", "Kolka", "Kuldīga", "Lielpēči", "Liepāja", "Madona", "Mērsrags", "Pāvilosta", "Piedruja", "Priekuļi", "Rēzekne", "Rīga", "Rucava", "Rūjiena", "Saldus", "Sigulda", "Sīļi", "Skrīveri", "Skulte", "Stende", "Ventspils", "Vičaki", "Zīlāni", "Zosēni"];
 

web/src/css/App.module.css

@@ -23,15 +23,30 @@
   color: #b318f0;
 }
 
-.sections {
+.menu {
     position: absolute;
     top: 0px;
     left: 0px;
     padding-left: 20px;
-    line-height: 70px;
     text-align: left;
 }
 
+.menu li{
+  display: inline;
+  padding: 10px 0 10px 10px;
+  cursor: pointer;
+  line-height: 40px;
+}
+
+.menu li:not(:first-child)::before {
+  content: '•';
+  margin-right: 1ch;
+}
+
+.active {
+  font-weight: bold;
+}
+
 @keyframes logo-spin {
   from {
     transform: rotate(0deg);

web/src/station/Station.tsx

@@ -0,0 +1,20 @@
+import { Component } from "solid-js";
+
+export const Station: Component<{}> = (props) => {
+    return (
+        <div class="fileManager">
+            <h2>Station</h2>
+            <div class="container">
+                <div class="column">
+                    1st
+                </div>
+                <div class="column">
+                    2nd
+                </div>
+                <div class="column">
+                    3rd
+                </div>
+            </div>
+        </div>
+    );
+}