add cart and login page

src/api_config.ts

@@ -1,4 +1,4 @@
-//export const API_URL = "http://192.168.100.180:8000/api/"
-export const API_URL = "http://192.168.116.166:8000/api/"
+export const API_URL = "http://192.168.1.56:8000/api/"
+//export const API_URL = "http://192.168.116.166:8000/api/"
 //export const API_URL = "https://kacee.simplico.net/api/"
 

src/components/ProductDetail.vue

@@ -1,22 +1,20 @@
 <template>
   <ion-header>
     <ion-toolbar>
-			<ion-buttons slot="start">
+			<ion-buttons>
       	<ion-button @click="cancel">
 					<ion-icon :icon="arrowBack"></ion-icon>
 				</ion-button>
-    	</ion-buttons>
       <ion-title>รายละเอียด</ion-title>
+      <ion-button slot="end" id='cartBtn' @click="cancel" router-link="/cart">
+        <ion-icon  :icon="cart" slot='start'></ion-icon>
+        <ion-badge slot="end" id='bd'>22</ion-badge>
+      </ion-button>
+    	</ion-buttons>
     </ion-toolbar>
   </ion-header>
   <ion-content class="ion-padding">
-    <!--<ion-item>-->
-      <!--<ion-label position="stacked">Your name</ion-label>-->
-      <!--{{ name }}-->
 
-      <!--<strong>{{ pid }}</strong>-->
-      <!--<ion-input v-model="name" placeholder="Your name" label='xx'></ion-input>-->
-    <!--</ion-item>-->
     <template v-if="product">
       <swiper>
       <swiper-slide v-for="p in product.product_photos">
@@ -40,27 +38,33 @@
 					<p><b>SKU</b> {{product.sku}} <b>Qty</b> {{product.qty}}  </p>
 				</ion-label>
 			</ion-item>
-
-			<ion-grid class="ion-padding">
-				<ion-row id="open-vars" expand="block" @click="">
+			<ion-grid class="ion-padding" id="open-vars" expand="block" @click="">
+				<ion-row >
 					<ion-col>
 						<ion-label><b>ตัวเลือกสินค้า</b></ion-label>
 					</ion-col>
 					<ion-col>
-						<ion-label>{{varsTxt}}</ion-label>
+						<ion-label v-if="myOrder"><p v-for="(m, i) in myOrder.values">{{myOrder.keys[i]}}: {{m}}</p></ion-label>
+						<ion-label v-else>{{varsTxt}}</ion-label>
 					</ion-col>
 				</ion-row>
 						<div v-for="pv in product.product_variance_options" :key='pv.id'>
 							<ion-row>
 								<div v-for="(var_value, idx) in pv.var_values">
-									<ion-col>
-										<ion-img v-if="var_value.image" :src="var_value.image" style="height:40px" class="ion-padding-end" @click="vSelect(var_value, product.prod_vars)"></ion-img>
+									<ion-col size="6">
+										<ion-img v-if="var_value.image" :src="var_value.image" style="height:40px;" 
+														class="ion-padding-end" 
+														:class="isSelect(var_value) ? 'img-active' : ''"
+														@click=""
+										></ion-img>
 									</ion-col>
 								</div>
 							</ion-row>
 						</div>
 			</ion-grid>
 
+
+
 			<ion-modal ref="modal" trigger="open-vars" :initial-breakpoint="0.80" :breakpoints="[0, 0.80, 0.5, 0.75]">
 				<ion-content class="ion-padding">
 							
@@ -75,22 +79,42 @@
 
 							<ion-col>
 										<h1>{{product.price}}  <s>{{product.list_price}}</s></h1>
-										<p><b>Qty</b> {{product.qty}}  </p>
+										<p v-if="product.qty"><b>Qty</b> {{product.qty}}  </p>
 							</ion-col>
 
 						</ion-row>
 
 						<div v-for="pv in product.product_variance_options" :key='pv.id'>
-							<ion-label>{{pv.name}}: {{pv.id}}</ion-label>
+							<ion-label>{{pv.name}}</ion-label>
 							<ion-row>
 								<div v-for="(var_value, idx) in pv.var_values">
-									<ion-col>
-										<ion-img v-if="var_value.image" :src="var_value.image" style="height:40px" class="ion-padding-end" @click="vSelect(var_value, product.prod_vars)"></ion-img>
-										<ion-button v-else :color="isSelect(var_value)" @click="vSelect(var_value, product.prod_vars)">{{var_value.value}}</ion-button>
+									<ion-col size="6">
+										<ion-img v-if="var_value.image" :src="var_value.image" style="height:40px;" :class="isSelect(var_value) ? 'img-active' : ''" class="ion-padding-end" @click="vSelect(var_value, product.prod_vars)"></ion-img>
+										<ion-button v-else :color=" isSelect(var_value) ? 'primary' : 'light' " @click="vSelect(var_value, product.prod_vars)">{{var_value.value}}</ion-button>
 									</ion-col>
 								</div>
 							</ion-row>
 						</div>
+						<hr/>
+							<ion-item lines="none">
+								<ion-label>จำนวน</ion-label>
+								<ion-button  slot="end" @click="stepQty(false)">
+									<ion-icon slot="icon-only" :icon="removeOutline"></ion-icon>
+								</ion-button>
+							 <ion-input
+									slot="end"
+									aria-label="" 
+									class="custom"
+									:maxlength="3"
+									v-model="qty"
+								></ion-input>
+								<ion-button slot="end" @click="stepQty(true)">
+									<ion-icon slot="icon-only" :icon="addOutline"></ion-icon>
+								</ion-button>
+							</ion-item>
+							<ion-item lines="none">
+								<ion-button  color="danger">Add to cart</ion-button>
+							</ion-item>
 					</ion-grid>
 				</ion-content>
 			</ion-modal>
@@ -130,9 +154,10 @@ import {
 	IonListHeader,
   IonModal,
   IonAvatar,
+	IonBadge
 } from '@ionic/vue';
 
-import { arrowBack } from 'ionicons/icons';
+import { arrowBack, removeOutline, addOutline, cart } from 'ionicons/icons';
 import { VueShowdown } from 'vue-showdown';
 import { ReadMore } from 'vue-read-more';
 import { ref, onMounted } from 'vue'
@@ -159,6 +184,8 @@ let myItem = ref([]);
 let myOrder	= ref(null);
 let varsTxt = ref("");
 
+const qty = ref(0)
+
 //console.log(pid)
 
 let name = ref("xxx")
@@ -200,17 +227,37 @@ function vSelect(var_value, prod_vars){
 }
 
 function isSelect(v){
-	console.log('SSSSSS',myItem.value);
-	console.log(v);
-	let rs = myItem.value.findIndex(({var_value}) => var_value === v.value);
+	//console.log('SSSSSS',myItem.value);
+	//console.log('vvvv',v);
+	let rs = myItem.value.findIndex((el) => el.var_value === v.value && el.product_variance === v.product_variance);
 	if(rs >= 0) {
 		console.log('my found')
-		return 'primary';
+		return true;
 	} else {
-		return 'light'
+		return false;
 	}
 }
 
+function stepQty(isUp) {
+
+	if(isUp && product.value['qty'] && qty.value < product.value['qty']) {
+		qty.value++
+		console.log('step up')
+	}
+
+	if(!isUp && qty.value > 0 ) {
+		qty.value--
+	}
+		console.log('step down')
+}
+
+function addCart() {
+}
+
+function goCartPage() {
+}
+
+
 onMounted(async () => {
 //onIonViewWillEnter(() => {
   console.log("on mounted")
@@ -227,12 +274,48 @@ onMounted(async () => {
   let sd  = truncateMarkdown(res.data.description, { limit: 300, ellipsis: true })
   short_desc.value = marked(sd)
 
-	for(let pv of product.value.product_variance_options){
-			varsTxt.value = varsTxt.value + ' ' + pv.var_values.length + ' ' + pv.name;
-			console.log(pv.name.toString());
+	let i = 0
+	for( let pv of product.value.product_variance_options ){
+		if(i == 0){
+			myItem.value.push({ 'product_variance': pv.var_values[0].product_variance, 'var_value' : pv.var_values[0].value});
+			product.value['cover'] = pv.var_values[0].image;
+			console.log('img = ',pv.var_values[0].image)
+			console.log(pv);
+		}
+		i++
+		varsTxt.value = varsTxt.value + ' ' + pv.var_values.length + ' ' + pv.name;
+		console.log(pv.name.toString());
 	}
+
 	console.log(varsTxt)
   //console.log(description.value)
 })
 
 </script>
+
+
+<style>
+	.img-active {
+		 border: 2px solid red;
+	}
+
+	hr {
+		margin-top: 1rem;
+		margin-bottom: 1rem;
+		border: 0;
+		border-top: 1px solid rgba(0, 0, 0, 0.1);
+	}
+
+  ion-input.custom {
+
+    background: #d9d9d9;
+    color: #000;
+		width: 50px;
+		height: 50px;
+		text-align: center;
+    padding-bottom: 1px;
+    padding-end: 1px;
+    padding-start: 1px;
+    padding-top: 1px;
+  }
+</style>

src/router/index.ts

@@ -3,6 +3,7 @@ import { RouteRecordRaw } from 'vue-router';
 import TabsPage from '../views/TabsPage.vue';
 import Tab2Page from '../views/TabsPage.vue';
 import HelloPage from '../views/HelloPage.vue';
+import CartPage from '../views/CartPage.vue';
 
 const routes: Array<RouteRecordRaw> = [
   {
@@ -14,6 +15,10 @@ const routes: Array<RouteRecordRaw> = [
     component: HelloPage
   },
   {
+    path: '/cart', 
+    component: CartPage
+  },
+  {
     path: '/tabs/',
     component: TabsPage,
     children: [
@@ -48,7 +53,11 @@ const routes: Array<RouteRecordRaw> = [
       {
         path: 'tab2/prod_list/:cat',
         component: () => import('@/views/ProductListPage.vue')
-      }
+      },
+      {
+        path: '/login',
+        component: () => import('@/views/LoginPage.vue')
+      },
     ]
   }
 ]

src/views/CartPage.vue

@@ -0,0 +1,50 @@
+<template>
+<ion-page>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-back-button></ion-back-button>
+      </ion-buttons>
+      <ion-title>รถเข็น</ion-title>
+    </ion-toolbar>
+  </ion-header>
+	<ion-content class='ion-padding'>
+		<ion-item>
+			<ion-thumbnail slot="start">
+				<img alt="Silhouette of mountains" src="https://ionicframework.com/docs/img/demos/thumbnail.svg" />
+			</ion-thumbnail>
+			<ion-label>Item Thumbnail</ion-label>
+		</ion-item>
+	</ion-content>
+</ion-page>
+</template>
+
+<script setup lang="ts">
+import { 
+	IonItem,
+	IonLabel,
+	IonThumbnail,
+	IonButtons,
+	IonButton,
+	IonHeader,
+	IonToolbar,
+	IonPage,
+	IonTitle,
+	IonContent,
+	IonBackButton,
+	onIonViewWillEnter,
+
+} from '@ionic/vue';
+
+import axios from 'axios';
+import { API_URL } from '../api_config';
+import { useRoute } from 'vue-router';
+import { ref, onMounted } from 'vue'
+
+const route = useRoute();
+
+onIonViewWillEnter( async() => {
+})
+	
+</script>
+

src/views/LoginPage.vue

@@ -0,0 +1,70 @@
+<template>
+  <ion-page>
+    <form @submit.prevent="handleLogin">
+      <ion-card>
+        <ion-item>
+          <h3>Please Sign In!</h3>
+        </ion-item>
+				<ion-item>
+					<ion-input
+						ref="input"
+						type="text"
+						v-model="user"
+						label="Username"
+						label-placement="floating"
+					></ion-input>
+				</ion-item>
+
+				<ion-item>
+					<ion-input
+						ref="input"
+						v-model="pass"
+						type="password"
+						label="Password"
+						label-placement="floating"
+					></ion-input>
+				</ion-item>
+
+        <ion-item>
+          <ion-button type="submit" shape="round">
+            Sign In
+            <ion-icon slot="end" :icon="logIn"></ion-icon>
+          </ion-button>
+        </ion-item>
+        <ion-item>
+          <p>Or</p>
+        </ion-item>
+        <ion-item>
+          <ion-button type="button" shape="round" router-link="/signup">
+            Sign Up
+            <ion-icon slot="end" :icon="personAdd"></ion-icon>
+          </ion-button>
+        </ion-item>
+      </ion-card>
+    </form>
+  </ion-page>
+</template>
+
+<script setup lang="ts">
+import { IonPage, IonCard, IonItem, IonLabel, IonButton, IonInput, alertController, IonIcon } from '@ionic/vue'
+import { logIn, personAdd } from 'ionicons/icons';
+import { ref, onMounted } from 'vue'
+
+
+import { API_URL } from '../api_config';
+import axios from 'axios';
+
+
+
+const user =  ref()
+const pass =  ref()
+
+function handleLogin() {
+	let login = {"username": user.value, "password": pass.value}
+  // POST request using axios with async/await
+//  const res = axios.post(API_URL+`mylogin`, login);
+  const res = axios.get(`http://192.168.1.56:8000/cart/fn/`);
+	console.log(res)
+}
+
+</script>