Add /market/:id route

server/router/handler/market.go

@@ -48,7 +48,7 @@ func HandleMarket(sc context.ServerContext) echo.HandlerFunc {
 			"NoShare":  shares[1],
 			"Orders":   orders,
 		}
-		return sc.Render(c, http.StatusOK, "market.html", data)
+		return c.JSON(http.StatusOK, data)
 	}
 }
 

server/router/router.go

@@ -41,6 +41,7 @@ func addFrontendRoutes(e *echo.Echo, sc ServerContext) {
 
 func addBackendRoutes(e *echo.Echo, sc ServerContext) {
 	GET(e, sc, "/api/markets", handler.HandleMarkets)
+	GET(e, sc, "/api/market/:id", handler.HandleMarket)
 	GET(e, sc, "/api/login", handler.HandleLogin)
 	GET(e, sc, "/api/login/callback", handler.HandleLoginCallback)
 	POST(e, sc, "/api/logout", handler.HandleLogout)

vue/src/components/Market.vue

@@ -0,0 +1,32 @@
+<template>
+  <!-- eslint-disable -->
+  <div class="my-3">
+    <pre>
+                      _        _   
+ _ __ ___   __ _ _ __| | _____| |_ 
+| '_ ` _ \ / _` | '__| |/ / _ \ __|
+| | | | | | (_| | |  |   ( __/ |_  
+|_| |_| |_|\__,_|_|  |_|\_\___|\__|</pre>
+  </div>
+  <div class="font-mono">{{ market.Description }}</div>
+  <!-- eslint-enable -->
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+const marketId = route.params.id
+
+const market = ref(null)
+
+const url = '/api/market/' + marketId
+await fetch(url)
+  .then(r => r.json())
+  .then(body => {
+    market.value = body
+  })
+  .catch(console.error)
+
+</script>

vue/src/main.js

@@ -5,19 +5,23 @@ import App from './App.vue'
 import './registerServiceWorker'
 import './index.css'
 
-import MarketView from '@/views/MarketView'
+import MarketsView from '@/views/MarketsView'
 import LoginView from '@/views/LoginView'
 import UserView from '@/views/UserView'
+import MarketView from '@/views/MarketView'
 
 const routes = [
   {
-    path: '/', component: MarketView
+    path: '/', component: MarketsView
   },
   {
     path: '/login', component: LoginView
   },
   {
     path: '/user', component: UserView
+  },
+  {
+    path: '/market/:id', component: MarketView
   }
 ]
 const router = VueRouter.createRouter({

vue/src/views/MarketView.vue

@@ -1,21 +1,9 @@
 <template>
-  <!-- eslint-disable -->
-  <div class="my-3">
-    <pre>
-     _      _       _     _ 
-  __| | ___| |_ __ | |__ (_)
- / _` |/ _ \ | '_ \| '_ \| |
-| (_| |  __/ | |_) | | | | |
- \__,_|\___|_| .__/|_| |_|_|
-             |_|.market     </pre>
-
-  </div>
-  <!-- eslint-enable -->
   <Suspense>
-    <MarketList />
+    <Market />
   </Suspense>
 </template>
 
 <script setup>
-import MarketList from '@/components/MarketList'
+import Market from '@/components/Market'
 </script>

vue/src/views/MarketsView.vue

@@ -0,0 +1,21 @@
+<template>
+  <!-- eslint-disable -->
+  <div class="my-3">
+    <pre>
+     _      _       _     _ 
+  __| | ___| |_ __ | |__ (_)
+ / _` |/ _ \ | '_ \| '_ \| |
+| (_| |  __/ | |_) | | | | |
+ \__,_|\___|_| .__/|_| |_|_|
+             |_|.market     </pre>
+
+  </div>
+  <!-- eslint-enable -->
+  <Suspense>
+    <MarketList />
+  </Suspense>
+</template>
+
+<script setup>
+import MarketList from '@/components/MarketList'
+</script>