WIP MMCM

package-lock.json

@@ -8,7 +8,8 @@
       "name": "mmcm",
       "version": "0.0.0",
       "dependencies": {
-        "vue": "^3.2.37"
+        "vue": "^3.2.37",
+        "vue-router": "^4.1.5"
       },
       "devDependencies": {
         "@vitejs/plugin-vue": "^3.1.0",
@@ -158,6 +159,11 @@
         "@vue/shared": "3.2.39"
       }
     },
+    "node_modules/@vue/devtools-api": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+    },
     "node_modules/@vue/reactivity": {
       "version": "3.2.39",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.39.tgz",
@@ -1557,6 +1563,20 @@
         "@vue/shared": "3.2.39"
       }
     },
+    "node_modules/vue-router": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
+      "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.1.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "vue": "^3.2.0"
+      }
+    },
     "node_modules/xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",
@@ -1678,6 +1698,11 @@
         "@vue/shared": "3.2.39"
       }
     },
+    "@vue/devtools-api": {
+      "version": "6.2.1",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.2.1.tgz",
+      "integrity": "sha512-OEgAMeQXvCoJ+1x8WyQuVZzFo0wcyCmUR3baRVLmKBo1LmYZWMlRiXlux5jd0fqVJu6PfDbOrZItVqUEzLobeQ=="
+    },
     "@vue/reactivity": {
       "version": "3.2.39",
       "resolved": "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.2.39.tgz",
@@ -2530,6 +2555,14 @@
         "@vue/shared": "3.2.39"
       }
     },
+    "vue-router": {
+      "version": "4.1.5",
+      "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.1.5.tgz",
+      "integrity": "sha512-IsvoF5D2GQ/EGTs/Th4NQms9gd2NSqV+yylxIyp/OYp8xOwxmU8Kj/74E9DTSYAyH5LX7idVUngN3JSj1X4xcQ==",
+      "requires": {
+        "@vue/devtools-api": "^6.1.4"
+      }
+    },
     "xtend": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz",

package.json

@@ -9,7 +9,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-router": "^4.1.5"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^3.1.0",

src/App.vue

@@ -5,19 +5,13 @@ import Home from './components/Home.vue'
 </script>
 
 <template>
-  <Home />
+  <div class="PARA">
+    <main id="product">
+      <router-view></router-view>
+    </main>
+  </div>
 </template>
 
 <style scoped>
-.logo {
+
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.vue:hover {
-  filter: drop-shadow(0 0 2em #42b883aa);
-}
 </style>

src/components/AutocompleteTest.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="bg-gray-50 min-w-screen min-h-screen flex justify-center items-center">
+    <div class="max-w-xs relative space-y-3">
+      <label
+          for="search"
+          class="text-gray-900"
+      >
+        Type the name of a country to search
+      </label>
+Lenght : {{searchCountries.length}}
+      <input
+          type="text"
+          id="search"
+          v-model="searchTerm"
+          placeholder="Type here..."
+          class="p-3 mb-0.5 w-full border border-gray-300 rounded"
+      >
+
+      <ul
+          v-if="searchCountries.length"
+          class="w-full rounded bg-white border border-gray-300 px-4 py-2 space-y-1 absolute z-10"
+      >
+        <li class="px-1 pt-1 pb-2 font-bold border-b border-gray-200">
+          Showing {{ searchCountries.length }}
+        </li>
+        <li
+            v-for="country in searchCountries"
+            :key="country.properties.label"
+            @click="selectCountry(country.properties.label)"
+            class="cursor-pointer hover:bg-gray-100 p-1"
+        >
+          {{ country.properties.label }}
+        </li>
+      </ul>
+
+      <p
+          v-if="selectedCountry"
+          class="text-lg pt-2 absolute"
+      >
+        You have selected: <span class="font-semibold">{{ selectedCountry }}</span>
+      </p>
+    </div>
+  </div>
+</template>
+
+<script>
+import {ref, computed, watch} from 'vue'
+export default {
+  setup() {
+    let searchTerm = ref('')
+    let searchCountries = ref('')
+
+    async function addressSearch (query) {
+     return await fetch('https://api-adresse.data.gouv.fr/search/?q='+query)
+          .then(function (response) {
+            return response.json();
+          }).then(function (jsonObj) {
+            return jsonObj.features;
+          });
+    }
+
+    watch(searchTerm, (selection, prevSelection) => {
+      console.log(selection)
+      searchCountries= addressSearch(searchCountries)
+    })
+
+
+    const selectCountry = (country) => {
+      selectedCountry.value = country
+      searchTerm.value = ''
+    }
+    let selectedCountry = ref('')
+    return {
+      searchTerm,
+      searchCountries,
+      selectCountry,
+      selectedCountry
+    }
+  }
+}
+</script>

src/components/Home.vue

@@ -1,81 +1,28 @@
 <template>
-  <div class="bg-gray-50 min-w-screen min-h-screen flex justify-center items-center">
+<div class="container-fluid">
-    <div class="max-w-xs relative space-y-3">
+<h1>
-      <label
+  Vous ne pouvez pas vous déplacer à votre pharmacie habituelle ?
-          for="search"
+  Faites livrer vos médicaments à votre domicile !
-          class="text-gray-900"
+</h1>
-      >
-        Type the name of a country to search
-      </label>
-Lenght : {{searchCountries.length}}
-      <input
-          type="text"
-          id="search"
-          v-model="searchTerm"
-          placeholder="Type here..."
-          class="p-3 mb-0.5 w-full border border-gray-300 rounded"
-      >
 
-      <ul
+  <div class="description">
-          v-if="searchCountries.length"
+    Livraison par La Poste en express en moins de 2 heures par coursier <br />
-          class="w-full rounded bg-white border border-gray-300 px-4 py-2 space-y-1 absolute z-10"
+    ou le surlendemain par facteur dans les zones éligibles.
-      >
+  </div>
-        <li class="px-1 pt-1 pb-2 font-bold border-b border-gray-200">
+  <router-link to="address-check" class="btn btn-primary" >
-          Showing {{ searchCountries.length }}
+               Je me fais livrer
-        </li>
+  </router-link>
-        <li
-            v-for="country in searchCountries"
-            :key="country.properties.label"
-            @click="selectCountry(country.properties.label)"
-            class="cursor-pointer hover:bg-gray-100 p-1"
-        >
-          {{ country.properties.label }}
-        </li>
-      </ul>
 
-      <p
+
-          v-if="selectedCountry"
+</div>
-          class="text-lg pt-2 absolute"
-      >
-        You have selected: <span class="font-semibold">{{ selectedCountry }}</span>
-      </p>
-    </div>
-  </div>
 </template>
 
 <script>
-import {ref, computed, watch} from 'vue'
 export default {
-  setup() {
+  name: "Home"
-    let searchTerm = ref('')
-    let searchCountries = ref('')
-
-    async function addressSearch (query) {
-     return await fetch('https://api-adresse.data.gouv.fr/search/?q='+query)
-          .then(function (response) {
-            return response.json();
-          }).then(function (jsonObj) {
-            return jsonObj.features;
-          });
-    }
-
-    watch(searchTerm, (selection, prevSelection) => {
-      console.log(selection)
-      searchCountries= addressSearch(searchCountries)
-    })
-
-
-    const selectCountry = (country) => {
-      selectedCountry.value = country
-      searchTerm.value = ''
-    }
-    let selectedCountry = ref('')
-    return {
-      searchTerm,
-      searchCountries,
-      selectCountry,
-      selectedCountry
-    }
-  }
 }
 </script>
+
+<style scoped>
+
+</style>

src/main.js

@@ -1,5 +1,11 @@
 import { createApp } from 'vue'
 import './style.css'
+import './assets/common_css.css'
+import './assets/bootstrap-para.css'
 import App from './App.vue'
+import router from "./router/index"
 
-createApp(App).mount('#app')
+
+const app = createApp(App)
+app.use(router);
+app.mount("#app");

src/router/index.js

@@ -0,0 +1,21 @@
+import {createRouter, createWebHistory} from 'vue-router'
+
+const routes = [
+    {
+        path: '/',
+        name: 'home',
+        component: () => import('/src/views/index.vue'),
+    },
+    {
+        path: '/address-check',
+        name: 'address-check',
+        component: () => import('/src/views/address-check.vue'),
+    },
+
+]
+const router = createRouter({
+    history: createWebHistory('/Mon-ordonnance-livree-a-domicile/p/4/11046/103652/'),
+    routes,
+})
+
+export default router

src/style.css

@@ -1,6 +1,7 @@
-@tailwind base;
+/*@tailwind base;*/
-@tailwind components;
+/*@tailwind components;*/
-@tailwind utilities;
+/*@tailwind utilities;*/
+
 
 #app {
   max-width: 1280px;

src/views/address-check.vue

@@ -0,0 +1,70 @@
+<template>
+  <h1 class="product_name_area primary_color">Indiquez votre adresse de livraison (domicile, travail...) :</h1>
+
+  <div class="input-group mb-3">
+    <input type="text" placeholder="Exemple : 2 rue de la Libération 78120 Rambouillet" class="form-control"
+           v-model="query"
+           @input="updateSearchResult" aria-describedby="button-addon">
+    <button class="btn btn-outline-secondary" type="button" id="button-addon" @click="checkIdAddressIsEligible">
+      Valider
+    </button>
+  </div>
+  <ul class="list-group">
+    <li class="list-group-item text-start" v-for="(item, index) in searchResults" :key="index"
+        @click="selectChoice(item)">
+      {{ item.properties.label }}
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "address-check",
+  data() {
+    return {
+      query: "",
+      selectedChoice: {},
+      searchResults: []
+    }
+  },
+  methods: {
+    updateSearchResult: async function () {
+      this.searchResults = await fetch('https://api-adresse.data.gouv.fr/search/?q=' + this.query)
+          .then(function (response) {
+            return response.json();
+          }).then(function (jsonObj) {
+            return jsonObj.features;
+          });
+    },
+    selectChoice(item) {
+      this.searchResults = []
+      this.query = item.properties.label
+      this.selectedChoice = item;
+    },
+    checkIdAddressIsEligible: async function () {
+
+
+      await fetch('/php/api/v3/?NUMC=ZIWR5659&controller=MMCMController&street=' + encodeURI(this.selectedChoice.properties.name)
+          + '&zip_code=' + encodeURI(this.selectedChoice.properties.postcode)
+          + '&city=' + encodeURI(this.selectedChoice.properties.city)
+      )
+          .then(function (response) {
+            return response.json();
+          }).then(function (jsonObj) {
+            console.log(jsonObj)
+            return jsonObj;
+          });
+
+    }
+  }
+
+}
+</script>
+
+<style scoped>
+.list-group li:hover {
+  background-color: #d7fdc0;
+  cursor: pointer;
+}
+
+</style>

src/views/index.vue

@@ -0,0 +1,27 @@
+<template>
+
+<h1 class="product_name_area primary_color">
+  Vous ne pouvez pas vous déplacer à votre pharmacie habituelle ?
+  Faites livrer vos médicaments à votre domicile !
+</h1>
+
+  <div class="mb-3">
+    Livraison par La Poste en express en moins de 2 heures par coursier <br />
+    ou le surlendemain par facteur dans les zones éligibles.
+  </div>
+
+  <router-link to="/address-check" class="btn btn-primary">
+    Je me fais livrer
+  </router-link>
+
+</template>
+
+<script>
+export default {
+  name: "Index"
+}
+</script>
+
+<style scoped>
+
+</style>

vite.config.js

@@ -3,5 +3,13 @@ import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()]
+  plugins: [vue()],
+  server: {
+    proxy: {
+      '/php': {
+        target: 'https://www.parapharmacie-et-medicament.com/',
+        changeOrigin: true,
+      }
+    }
+  }
 })