130 lines
3.8 KiB
Vue
130 lines
3.8 KiB
Vue
<script setup>
|
|
|
|
// import { defineComponent, h } from 'vue';
|
|
import { getCurrentInstance, ref, onMounted, onUnmounted, nextTick } from 'vue';
|
|
import Swal from 'sweetalert2';
|
|
import LogoIkea from '@/assets/Ikea_logo.svg';
|
|
import Multiselect from 'vue-multiselect';
|
|
import { GChart } from 'vue-google-charts';
|
|
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue';
|
|
import EasyTable from "vue3-easy-data-table";
|
|
|
|
|
|
import {
|
|
FwbNavbar,
|
|
FwbNavbarCollapse,
|
|
FwbNavbarLink,
|
|
FwbNavbarLogo,
|
|
} from 'flowbite-vue';
|
|
import axios from 'axios';
|
|
import IkeaLogo from './Ikea/IkeaLogo.vue';
|
|
const type = 'GeoChart';
|
|
|
|
const ccountry = ref([]);
|
|
const ccountry_filter = ref([['Country'],]);
|
|
const ccountry_list = ref(['TEST']);
|
|
const selected = ref(null);
|
|
|
|
const options = {
|
|
region: 150,
|
|
|
|
width: 700,
|
|
height: 500,
|
|
};
|
|
|
|
const chart_settings = {
|
|
packages: ['geochart', 'map'],
|
|
mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
|
|
};
|
|
|
|
const fetch = async () => {
|
|
try {
|
|
const response = await axios.get(route('ccountry.active'))
|
|
ccountry.value = response.data
|
|
let aCntry = ccountry.value.map((country) => [country.country_name]);
|
|
ccountry_filter.value.push(...aCntry);
|
|
|
|
ccountry_list.value = ccountry.value.map((country) => country.country_name);
|
|
var i=1;
|
|
items.value = ccountry.value.map((country) => { return {"country": country.country_name, "currency": country.currency_code, "id": i++ } });
|
|
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()
|
|
}
|
|
}
|
|
|
|
const headers = ref([
|
|
{ text: "Id", value: "id", sortable: true },
|
|
{ text: "Country", value: "country",sortable: true},
|
|
{ text: "Currency", value: "currency"},
|
|
]);
|
|
const items = ref([]);
|
|
|
|
function selectCountry(item,id) {
|
|
let cCntry = [ ['Country'], ];
|
|
let aCntry = selected.value.map((country) => [country]);
|
|
|
|
ccountry_filter.value = cCntry;
|
|
ccountry_filter.value.push(...aCntry);
|
|
}
|
|
onMounted(fetch);
|
|
</script>
|
|
|
|
<template>
|
|
<fwb-navbar>
|
|
<template #logo>
|
|
<fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" link="#">
|
|
IKEA Price Crawler
|
|
</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>
|
|
<div class="m-3">
|
|
<div class="flex flex-wrap gap-2 justify-center align-middle ">
|
|
<div class="justify-center rounded-md border-black border-8 max-h-[518px]" >
|
|
<GChart :type="type" :data="ccountry_filter" :options="options" :settings="chart_settings" />
|
|
</div>
|
|
<div class="mr-auto">
|
|
<div class="flex flex-col start-0">
|
|
<span class="font-extrabold font-mono">Zadaj krajiny v ktorych chces vyhadavat</span>
|
|
</div>
|
|
<div>
|
|
<multiselect :close-on-select="false" :multiple="true" v-model="selected" :options="ccountry_list" @select="selectCountry" @remove="selectCountry">
|
|
</multiselect>
|
|
</div>
|
|
<div class="mt-5">
|
|
<EasyTable rows-per-page=10 :headers="headers" :items="items"></EasyTable>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<style>
|
|
@import 'vue3-easy-data-table/dist/style.css';
|
|
</style>
|
|
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
|