134 lines
3.4 KiB
Vue
134 lines
3.4 KiB
Vue
<template>
|
|
<loader :active="isLoading"/>
|
|
<!-- 1-{{ $store.state.settings.divBgColor }}-1 -->
|
|
<div v-if="lngLoaded" :style="bckgrColor('divBgColor')">
|
|
<details-page v-if="detailsPage"
|
|
:url="url"
|
|
@backTolist="detailsPage=false"
|
|
@gotoPrev="gotoPrev"
|
|
@gotoNext="gotoNext"
|
|
/>
|
|
<search-page v-else
|
|
@detailClick="detailClick"
|
|
@brandChanged="brandChanged"
|
|
@reloadData="reloadData"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
|
|
import PageSearch from './components/PageSearch.vue'
|
|
import PageDetail from './components/PageDetail.vue'
|
|
import {i18n, loadLanguage} from './modules/i18n'
|
|
|
|
export default {
|
|
components: {
|
|
'search-page': PageSearch,
|
|
'details-page': PageDetail,
|
|
},
|
|
data() {
|
|
return {
|
|
configParams: {
|
|
clientID: 0,
|
|
rowID: 0,
|
|
},
|
|
url: 'https://motorradhandel.ch',
|
|
// url: 'https://staging.motorradhandel.ch',
|
|
// url: 'http://mh3.com',
|
|
isLoading: false,
|
|
lngLoaded: false,
|
|
detailsPage: false,
|
|
}
|
|
},
|
|
mounted() {
|
|
var t = document.getElementsByClassName('wrapperJSON');
|
|
if(t.length) {
|
|
this.configParams.clientID = t[0].dataset.ui;
|
|
this.configParams.rowID = t[0].dataset.fzl;
|
|
this.getSettings();
|
|
}
|
|
},
|
|
methods: {
|
|
brandChanged() {
|
|
this.isLoading = true;
|
|
axios
|
|
.get(this.url + "/api/ext/getModels?id=" + this.$store.state.settings.id, {params: this.$store.state.selected})
|
|
.then(response => {
|
|
this.$store.commit('updateModels', response);
|
|
this.reloadData();
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
})
|
|
},
|
|
reloadData() {
|
|
this.isLoading = true;
|
|
axios
|
|
.get(this.url + "/api/ext/loadResults?id=" + this.$store.state.settings.id, {params: this.$store.state.selected})
|
|
.then(response => {
|
|
this.$store.commit('updateResults', response);
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
})
|
|
},
|
|
detailClick(id) {
|
|
this.isLoading = true;
|
|
// this.details = {};
|
|
axios
|
|
.get(this.url + "/api/ext/getDetails?id=" + id)
|
|
.then(response => {
|
|
this.$store.commit('updateDetails', response);
|
|
this.detailsPage = true;
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
})
|
|
},
|
|
getSettings() {
|
|
this.isLoading = true;
|
|
var configParams = this.configParams;
|
|
axios
|
|
.get(this.url + "/api/ext/getSettings?clientID=" + configParams.clientID + '&rowID=' + configParams.rowID)
|
|
.then(response => {
|
|
this.$store.commit('updateSettings', response);
|
|
loadLanguage(i18n, this.$store.state.settings.lang, response.data.trans);
|
|
this.lngLoaded = true;
|
|
})
|
|
.catch(error => {
|
|
console.log(error)
|
|
})
|
|
.finally(() => {
|
|
this.isLoading = false;
|
|
})
|
|
},
|
|
gotoPrev(id) {
|
|
this.detailClick(id);
|
|
},
|
|
gotoNext(id) {
|
|
this.detailClick(id);
|
|
}
|
|
},
|
|
// computed: {
|
|
// bgColor: function() {
|
|
// return this.$store.state.settings.divBGColor ? 'background: #' + this.$store.state.settings.divBGColor : '';
|
|
// },
|
|
// },
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import "https://motorradhandel.ch/extern/css/custom.css";
|
|
</style>
|