changes ui

pranjalkar99 · Nov 23, 2023 · fa6fbbb · fa6fbbb
1 parent 0a76ecf
commit fa6fbbb
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 2 deletions.
diff --git a/dev-dist/sw.js b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.166rqcosncg"
+    "revision": "0.3f70amjkti8"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

diff --git a/src/components/Example.vue b/src/components/Example.vue
@@ -7,6 +7,10 @@
             <ion-icon :icon="camera" />
             <ion-label>Use Camera for Patta.AI</ion-label>
           </ion-tab-button>
+          <ion-tab-button tab="PlantDetails" href="/plant">
+            <ion-icon :icon="leaf" />
+            <ion-label>Plant Details</ion-label>
+          </ion-tab-button>
           <ion-tab-button tab="Dataset" href="/dataset">
             <ion-icon :icon="leaf" />
             <ion-label>Dataset Details</ion-label>

diff --git a/src/router/index.ts b/src/router/index.ts
@@ -26,6 +26,10 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: 'dataset',
         component: () => import('../views/DetailsPage.vue'),
+      },
+      {
+        path: 'plant',
+        component: () => import('../views/PlantDetailsPage.vue'),
       }
     ],
   },

diff --git a/src/views/PlantDetailsPage.vue b/src/views/PlantDetailsPage.vue
@@ -0,0 +1,134 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-title>Plant Details</ion-title>
+      </ion-toolbar>
+    </ion-header>
+    <ion-content class="ion-padding">
+      <div v-if="showDetails">
+
+        <!-- Plant name -->
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Details</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            <ion-list>
+              <ion-item>
+                <ion-label>Scientific Name : </ion-label>
+                ABCD
+                <!-- <ion-badge>ABCD</ion-badge> -->
+              </ion-item>
+              <ion-item>
+                <ion-label>Common Names : </ion-label>
+                <ion-badge slot="end">xyz</ion-badge>
+              </ion-item>
+            </ion-list>
+          </ion-card-content>
+        </ion-card>
+
+        <!-- Details -->
+
+        <!-- Medical Uses -->
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Medical Uses</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            <p>Contrary to popular belief,</p>
+          </ion-card-content>
+        </ion-card>
+
+        <!-- Diseases Treated -->
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Diseases Treated</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            <p>Contrary to popular belief.</p>
+          </ion-card-content>
+        </ion-card>
+
+        <!-- Health Benefits -->
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Health Benefits</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            <p>Contrary to popular belief.</p>
+          </ion-card-content>
+        </ion-card>
+
+        <!-- Important Facts -->
+        <ion-card>
+          <ion-card-header>
+            <ion-card-title>Important Facts</ion-card-title>
+          </ion-card-header>
+          <ion-card-content>
+            Lorem Ipsum is simply dummy text of the printing and typesetting industry.
+            <p>Contrary to popular belief.</p>
+          </ion-card-content>
+        </ion-card>
+
+      </div>
+
+      <div v-else>
+        <p>Upload image to get details</p>
+      </div>
+
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { leaf, call, person } from 'ionicons/icons';
+
+import {
+  IonHeader,
+  IonToolbar,
+  IonTitle,
+  IonContent,
+  IonPage,
+  IonList,
+  IonItem,
+  IonLabel,
+  IonIcon,
+  IonItemGroup,
+  IonItemDivider
+} from '@ionic/vue';
+
+export default {
+  components: {
+    IonHeader,
+    IonToolbar,
+    IonTitle,
+    IonContent,
+    IonPage,
+    IonList,
+    IonItem,
+    IonLabel,
+    IonIcon,
+    IonItemGroup,
+    IonItemDivider
+  },
+  data() {
+    return {
+      leaf, call, person
+    }
+  }
+};
+</script>
+
+<style scoped>
+.example-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+</style>
+
diff --git a/src/views/RadioPage.vue b/src/views/RadioPage.vue
@@ -22,11 +22,23 @@
             <ion-icon slot="start" name="mail" color="primary"></ion-icon>
             <ion-label>[email protected]</ion-label>
           </ion-item>
+          <ion-item>
+            <ion-icon slot="start" name="mail" color="primary"></ion-icon>
+            <ion-label>[email protected]</ion-label>
+          </ion-item>
 
           <!-- Name -->
           <ion-item>
             <ion-icon :icon="person" slot="start" name="person" color="primary" />
-            <ion-label>rohandeep</ion-label>
+            <ion-label>Pranjal Kar</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon :icon="person" slot="start" name="person" color="primary" />
+            <ion-label>Samunder Singh</ion-label>
+          </ion-item>
+          <ion-item>
+            <ion-icon :icon="person" slot="start" name="person" color="primary" />
+            <ion-label>Rohandeep Goyal</ion-label>
           </ion-item>
 
           <!-- WhatsApp -->