This commit is contained in:
2023-11-21 19:32:12 +01:00
parent 9c37d49668
commit f76f277cd3
2 changed files with 53 additions and 56 deletions

View File

@@ -94,5 +94,6 @@
"mac 10.15": "Mac 10.15", "mac 10.15": "Mac 10.15",
"are you want to try again": "are you want to try again", "are you want to try again": "are you want to try again",
"referenceerror: ccount is not defined": "ReferenceError: ccount is not defined", "referenceerror: ccount is not defined": "ReferenceError: ccount is not defined",
"referenceerror: currency_code is not defined": "ReferenceError: currency_code is not defined" "referenceerror: currency_code is not defined": "ReferenceError: currency_code is not defined",
"referenceerror: assignment to undeclared variable acntry": "ReferenceError: assignment to undeclared variable aCntry"
} }

View File

@@ -17,19 +17,11 @@ import axios from 'axios';
import IkeaLogo from './Ikea/IkeaLogo.vue'; import IkeaLogo from './Ikea/IkeaLogo.vue';
const type = 'GeoChart'; const type = 'GeoChart';
const ccountry = ref([]); const ccountry = ref([]);
const ccountry_filter = ref([ [ 'Country' ], ]); const ccountry_filter = ref([['Country'],]);
const ccountry_list = ref(['TEST']); const ccountry_list = ref(['TEST']);
const selected = ref(null); const selected = ref(null);
const data = [
['Country', 'Popularity'],
['Germany', 200],
['France', 600],
['RU', 700],
];
const options = { const options = {
region: 150, region: 150,
@@ -37,19 +29,21 @@ const options = {
height: 500, height: 500,
}; };
const chart_settings={ const chart_settings = {
packages: ['geochart', 'map'], packages: ['geochart', 'map'],
mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU", mapsApiKey: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
}; };
const fetch = async () => { const fetch = async () => {
try { try {
const response = await axios.get(route('ccountry.active')) const response = await axios.get(route('ccountry.active'))
ccountry.value = response.data ccountry.value = response.data
ccountry_filter.value = ccountry.value.map((country) => [ country.country_name ]); let aCntry = ccountry.value.map((country) => [country.country_name]);
ccountry_list.value = ccountry.value.map((country) => country.country_name ); ccountry_filter.value.push(...aCntry);
console.log("TEST=",ccountry_filter.value, ccountry_list.value); ccountry_list.value = ccountry.value.map((country) => country.country_name);
console.log("TEST=", ccountry_filter.value, ccountry_list.value);
} catch (e) { } catch (e) {
const response = await Swal.fire({ const response = await Swal.fire({
title: __('are you want to try again') + '?', title: __('are you want to try again') + '?',
@@ -62,48 +56,50 @@ const fetch = async () => {
response.isConfirmed && fetch() response.isConfirmed && fetch()
} }
} }
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); onMounted(fetch);
</script> </script>
<template> <template>
<fwb-navbar>
<fwb-navbar> <template #logo>
<template #logo> <fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" link="#">
<fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" link="#"> IKEA Price Craweler
IKEA Price Craweler </fwb-navbar-logo>
</fwb-navbar-logo> </template>
</template> <template #default="{ isShowMenu }">
<template #default="{isShowMenu}"> <fwb-navbar-collapse :is-show-menu="isShowMenu">
<fwb-navbar-collapse :is-show-menu="isShowMenu"> <fwb-navbar-link is-active link="#">
<fwb-navbar-link is-active link="#"> Home
Home </fwb-navbar-link>
</fwb-navbar-link> <fwb-navbar-link link="#">
<fwb-navbar-link link="#"> Services
Services </fwb-navbar-link>
</fwb-navbar-link> <fwb-navbar-link link="#">
<fwb-navbar-link link="#"> Pricing
Pricing </fwb-navbar-link>
</fwb-navbar-link> <fwb-navbar-link link="#">
<fwb-navbar-link link="#"> Contact
Contact </fwb-navbar-link>
</fwb-navbar-link> </fwb-navbar-collapse>
</fwb-navbar-collapse> </template>
</template> </fwb-navbar>
</fwb-navbar> <div class="m-3">
<div class="grid gap-2">
<GChart <div class="justify-center rounded-md border-black border-8 max-w-fit">
:type="type" <GChart :type="type" :data="ccountry_filter" :options="options" :settings="chart_settings" />
:data="ccountry_filter" </div>
:options="options" <div class="max-">
:settings="chart_settings" <multiselect :multiple="true" v-model="selected" :options="ccountry_list" @select="selectCountry">
/> </multiselect>
</div>
<multiselect </div>
:multiple="true" </div>
v-model="selected"
:options="ccountry_list">
</multiselect>
</template> </template>
<style src="vue-multiselect/dist/vue-multiselect.css"></style> <style src="vue-multiselect/dist/vue-multiselect.css"></style>