Implemented: UI for brokering rules page, updated router by adding br…

…okering page and removed home page entry, updated tabs component and removed the home page from app(#4)
hotwax · Dec 29, 2023 · 85aa026 · 85aa026
1 parent 7838792
commit 85aa026
Show file tree

Hide file tree

Showing 5 changed files with 138 additions and 216 deletions.
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -1,8 +1,6 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
 import { RouteRecordRaw } from 'vue-router';
-import Home from '@/views/Home.vue'
 import Login from '@/views/Login.vue'
-import Settings from "@/views/Settings.vue"
 import store from '@/store'
 import Tabs from '@/views/Tabs.vue'
 
@@ -25,49 +23,33 @@ const loginGuard = (to: any, from: any, next: any) => {
 const routes: Array<RouteRecordRaw> = [
   {
     path: '/',
-    redirect: '/tabs/home'
+    redirect: '/tabs/brokering'
   },
   {
     path: '/tabs',
     component: Tabs,
     children: [
       {
         path: '',
-        redirect: '/home'
+        redirect: '/brokering'
       },
       {
-        path: 'home',
-        component: () => import('@/views/Home.vue')
+        path: 'brokering',
+        component: () => import('@/views/BrokeringRuns.vue')
       },
       {
         path: 'settings',
         component: () => import('@/views/Settings.vue')
-      },
+      }
     ],
     beforeEnter: authGuard
   },
-  {
-    path: '/',
-    redirect: '/settings'
-  },
-  {
-    path: '/home',
-    name: 'Home',
-    component: Home,
-    beforeEnter: authGuard
-  },
   {
     path: '/login',
     name: 'Login',
     component: Login,
     beforeEnter: loginGuard
   },
-  {
-    path: "/settings",
-    name: "Settings",
-    component: Settings,
-    beforeEnter: authGuard
-  }
 ]
 
 const router = createRouter({

diff --git a/src/views/BrokeringRuns.vue b/src/views/BrokeringRuns.vue
@@ -0,0 +1,125 @@
+<template>
+  <ion-page>
+    <ion-header :translucent="true">
+      <ion-toolbar>
+        <ion-title>{{ "Brokering Runs" }}</ion-title>
+
+        <ion-buttons slot="end">
+          <ion-button color="primary">
+            {{ "New Run" }}
+            <ion-icon :icon="addOutline" />
+          </ion-button>
+        </ion-buttons>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <main>
+        <section>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ "Brokering run name" }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              {{ "Description" }}
+            </ion-item>
+            <ion-item>
+              {{ "<Frequency>" }}
+              {{ "<Runtime>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Created at <time>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Updated at <time>" }}
+            </ion-item>
+          </ion-card>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ "Brokering run name" }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              {{ "Description" }}
+            </ion-item>
+            <ion-item>
+              {{ "<Frequency>" }}
+              {{ "<Runtime>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Created at <time>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Updated at <time>" }}
+            </ion-item>
+          </ion-card>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ "Brokering run name" }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              {{ "Description" }}
+            </ion-item>
+            <ion-item>
+              {{ "<Frequency>" }}
+              {{ "<Runtime>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Created at <time>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Updated at <time>" }}
+            </ion-item>
+          </ion-card>
+          <ion-card>
+            <ion-card-header>
+              <ion-card-title>
+                {{ "Brokering run name" }}
+              </ion-card-title>
+            </ion-card-header>
+            <ion-item>
+              {{ "Description" }}
+            </ion-item>
+            <ion-item>
+              {{ "<Frequency>" }}
+              {{ "<Runtime>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Created at <time>" }}
+            </ion-item>
+            <ion-item>
+              {{ "Updated at <time>" }}
+            </ion-item>
+          </ion-card>
+        </section>
+      </main>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonPage, IonTitle, IonToolbar } from "@ionic/vue";
+import { addOutline } from "ionicons/icons"
+</script>
+
+<style scoped>
+@media (min-width: 991px) {
+  main {
+    display: flex;
+    justify-content: center;
+    align-items: start;
+    gap: var(--spacer-2xl);
+    max-width: 990px;
+    margin: var(--spacer-base) auto 0;
+  }
+
+  main > section {
+    min-width: 50ch;
+  }
+}
+</style>
diff --git a/src/views/Home.vue b/src/views/Home.vue
diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -2,7 +2,7 @@
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-back-button slot="start" default-href="/home" />
+        <ion-back-button slot="start" default-href="/" />
         <ion-title>{{ $t("Settings") }}</ion-title>
       </ion-toolbar>
     </ion-header>