jaro/ikea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix3

Browse Source
This commit is contained in:
Jaroslav Drzik
2023-11-21 19:32:12 +01:00
parent 9c37d49668
commit f76f277cd3
2 changed files with 53 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
resources/js/Pages/IkeaRoot.vue
View File

@@ -17,39 +17,33 @@ import axios from 'axios';
import IkeaLogo from './Ikea/IkeaLogo.vue';
const type = 'GeoChart';
const ccountry = ref([]);
const ccountry_filter = ref([ [ 'Country' ], ]);
const ccountry_filter = ref([['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: "AIzaSyAJaLArHgTmQPMOSogitG-umhZilVIgdNU",
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
ccountry_filter.value = ccountry.value.map((country) => [ country.country_name ]);
ccountry_list.value = ccountry.value.map((country) => country.country_name );
let aCntry = 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) {
const response = await Swal.fire({
title: __('are you want to try again') + '?',
@@ -62,48 +56,50 @@ const fetch = async () => {
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);
</script>
<template>
<fwb-navbar>
<template #logo>
<fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" 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
:multiple="true"
v-model="selected"
:options="ccountry_list">
</multiselect>
<fwb-navbar>
<template #logo>
<fwb-navbar-logo alt="IKEA Price Craweler" :image-url="LogoIkea" 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>
<div class="m-3">
<div class="grid gap-2">
<div class="justify-center rounded-md border-black border-8 max-w-fit">
<GChart :type="type" :data="ccountry_filter" :options="options" :settings="chart_settings" />
</div>
<div class="max-">
<multiselect :multiple="true" v-model="selected" :options="ccountry_list" @select="selectCountry">
</multiselect>
</div>
</div>
</div>
</template>
<style src="vue-multiselect/dist/vue-multiselect.css"></style>