Init

2023-11-19 20:58:40 +01:00
parent b3fdd071a2
commit d70be43c5d
48 changed files with 2864 additions and 25 deletions
--- a/resources/js/Pages/IkeaRoot.vue
+++ b/resources/js/Pages/IkeaRoot.vue
@@ -0,0 +1,107 @@
+<script setup>
+
+// import { defineComponent, h } from 'vue';
+import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick } from 'vue';
+import Swal from 'sweetalert2';
+
+import Multiselect from 'vue-multiselect';
+import { GChart } from 'vue-google-charts';
+import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
+import {
+  FwbNavbar,
+  FwbNavbarCollapse,
+  FwbNavbarLink,
+  FwbNavbarLogo,
+} from 'flowbite-vue';
+import axios from 'axios';
+const type = 'GeoChart';
+
+
+const ccountry = ref([]);
+const ccountry_filter = ref([ [ 'Currency', 'Country'] ]);
+const ccountry_list = ref(['TEST']);
+const selected = ref(null);
+
+const data = [
+  ['Country', 'Popularity'],
+  ['Germany', 200],
+  ['France', 600],
+  ['RU', 700],
+];
+
+const options = {
+  region: 150,
+  
+  width: 700,
+  height: 500,
+};
+
+const chart_settings={
+          packages: ['geochart', 'map'],
+          mapsApiKey: "AIzaSyDnBGCOIEnYT03KNRm0bLJPMr6leyOpdtU",
+};
+
+const fetch = async () => {
+  try {
+    const response = await axios.get(route('ccountry.active'))
+    ccountry.value = response.data
+    ccountry_filter.value = ccountry.value.map((country) => [ country.currency_code, country.country_name  ]);
+    // ccountry_list.value = ccountry.value.map((country) => country.country_name );
+    
+    // console.log("TEST=",ccountry_filter.value, ccountry_list.value);
+  } catch (e) {
+    const response = await Swal.fire({
+      title: __('are you want to try again') + '?',
+      text: __(`${e}`),
+      icon: 'question',
+      showCancelButton: true,
+      showCloseButton: true,
+    })
+
+    response.isConfirmed && fetch()
+  }
+}
+
+onMounted(fetch);
+</script>
+
+<template>
+
+    <fwb-navbar>
+      <template #logo>
+        <fwb-navbar-logo alt="IKEA Price Craweler" image-url="/images/logo.svg" link="#">
+          IKEA Price Craweler
+        </fwb-navbar-logo>
+      </template>
+      <template #default="{isShowMenu}">
+        <fwb-navbar-collapse :is-show-menu="isShowMenu">
+          <fwb-navbar-link is-active link="#">
+            Home
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Services
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Pricing
+          </fwb-navbar-link>
+          <fwb-navbar-link link="#">
+            Contact
+          </fwb-navbar-link>
+        </fwb-navbar-collapse>
+      </template>
+    </fwb-navbar>
+  
+  <GChart
+    :type="type"
+    :data="ccountry_filter"
+    :options="options"
+    :settings="chart_settings"
+  />
+
+  <multiselect
+      v-model="selected"
+      :options="ccountry_list">
+  </multiselect>
+
+</template>
+<style src="vue-multiselect/dist/vue-multiselect.css"></style>