I have a sidebar with b-list-group-item(bootstrap4). I want to get the position from top of each item what I clicked.
I tried to get the position by document.getElementbyID but it doesn't helped.
MainPage.vue
scripts:
toShow(e){
if(this.isShown){
this.isShown = false;
}
else{
this.isShown = true;
// this.top = document.getElementsByClassName('subCategory').style.top;
// let heightSubcat = document.getElementsByTagName('b-list-group-item').height;
// alert(heightSubcat);
// this.top = heightSubcat - e.clientY + 'px';
alert(window.scrollY + document.querySelector('div').getBoundingClientRect().top);
}
}
}
template:
<div id="sidebar" class="mobileMenu" :class="[isOpen ? 'open' : 'closed']">
<b-list-group>
<b-list-group-item><span>ФИЗ.ЛИЦАМ</span></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>НАЛОГИ</a></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>ШТРАФЫ</a></b-list-group-item>
<b-list-group-item><span>ЮР.ЛИЦАМ</span></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>НАЛОГИ</a></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>ШТРАФЫ</a></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>СОЦИАЛЬНЫЕ ОТЧИСЛЕНИЯ</a></b-list-group-item>
<b-list-group-item><span>ИП.КХ</span></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>НАЛОГИ</a></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>ШТРАФЫ</a></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>СОЦИАЛЬНЫЕ ОТЧИСЛЕНИЯ</a></b-list-group-item>
<b-list-group-item><span>ЕД.СОВОКУПНЫЙ ПЛАТЕЖ</span></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>ЕСП (1 МРП)</a></b-list-group-item>
<b-list-group-item #click="toShow" class="subCategory"><a>ЕСП (0.5 МРП)</a></b-list-group-item>
</b-list-group>
</div>
Simply use the target of the click event:
toShow(e){
if(this.isShown){
this.isShown = false;
}
else{
this.isShown = true;
alert(window.scrollY + e.target.getBoundingClientRect().top);
}
}
}
Related
Why won't the pagination work here? https://codepen.io/parca0007/pen/xxppaGP
I can't seem to work out how to do it. Any help would be great!!
Here is the html:
<nav aria-label="Page navigation example">
<ul class="pagination">
<li class="page-item">
<button type="button" class="page-link" v-if="page != 1" #click="page--"> Previous </button>
</li>
<li class="page-item">
<button type="button" class="page-link" v-for="pageNumber in filteredSongs.slice(page-1, page+5)" #click="page = pageNumber"> {{pageNumber}} </button>
</li>
<li class="page-item">
<button type="button" #click="page++" v-if="page < pages.length" class="page-link"> Next </button>
</li>
</ul>
</nav>
Here is the javascript:
methods: {
getfilteredSongs () {
let data = [];
for(let i = 0; i < 50; i++){
this.filteredSongs.push({id: '1'});
}
},
setPages () {
let numberOfPages = Math.ceil(this.filteredSongs.length / this.perPage);
for (let index = 1; index <= numberOfPages; index++) {
this.pages.push(index);
}
},
paginate (filteredSongs) {
let page = this.page;
let perPage = this.perPage;
let from = (page * perPage) - perPage;
let to = (page * perPage);
return this.filteredSongs.slice(from, to);
}
},
And this:
computed: {
displayedfilteredSongs () {
return this.paginate(this.filteredSongs);
}
Whenever I save the first item in my store it won't show up in frontend, only my buttons do.
After the first row has been added and I refresh I can add more rows, which do show up.
I tried making a clientIndex because I thought it maybe it didn't update because of "field.id", but that changed nothing.
Can anyone tell what I can do to fix it?
My index.js
state: {
clientfields: [],
clients: [],
},
mutations: {
setClientFields(state, fields) {
state.clientfields = fields;
},
setClients(state, clients) {
state.clients = clients;
},
deleteClient(state, client) {
state.clients.splice(state.clients.indexOf(client), 1);
},
addClient(state, client) {
state.clients.unshift(client);
},
actions: {
fetchClients({ state, commit }) {
axios.get('http://localhost:8000/api/clients')
.then(response => {
console.log(response.data.data);
commit("setClients", response.data.data)
commit("setClientFields", Object.keys(state.clients[0]))
console.log(Object.keys(state.clients));
})
},
deleteClient({ commit }, clientdata) {
axios.delete("http://localhost:8000/api/clients/" + clientdata.id)
commit("deleteClient", clientdata)
},
saveClient({ commit }, clientdata) {
let promise;
if (clientdata.id != null) {
promise = axios.put("http://localhost:8000/api/clients/" + clientdata.id, clientdata)
console.log(clientdata)
} else {
console.log(clientdata)
promise = axios.post("http://localhost:8000/api/clients/", clientdata)
}
promise.then(function (response) {
if (clientdata.id != null) {
commit("saveClient", clientdata)
} else {
commit("addClient", response.data.data)
}
})
.catch(function (error) {
console.log(error.response);
commit('error', error.response)
})
},
}
My Component
<template>
<div class="app" >
<v-btn tile elevation="4" style="margin-left: 20px margin-top: 20px;" v-if="! showEdit" class="btn btn-blue left" v-on:click="saveClient">Nieuwe Client</v-btn>
<table class="table-auto">
<thead>
<tr class="md:border-t-2 border-collapse border border-gray-600 ...">
<th class="px-4 py-2 ">Edit</th>
<th class="px-4 py-2 ">Delete</th>
<th class="px-4 py-2 allow-overflow" v-for="field in fields" :key="field.id">{{ field.replace("_"," ") }}</th>
</tr>
</thead>
<tr class="md:border-t-2 border-collapse border border-gray-600 ..." v-for='(clientdata, clientIndex) in clients' :key="clientIndex">
<td class="px-4 py-2 font-medium">
<v-btn class="ocz" v-on:click="updClient(clientdata)">
Edit
</v-btn>
</td>
<td class="px-4 py-2 font-medium">
<template>
<v-dialog
v-model="confirm"
width="350"
>
<template v-slot:activator="{ on, attrs }">
<v-btn
color="red"
v-bind="attrs"
v-on="on"
>
Delete
</v-btn>
</template>
<v-card>
<v-card-title class="text-h5">
ARE YOU SURE YOU <br> WANT TO DELETE THIS?
</v-card-title>
<v-card-actions>
<v-btn
color="grey"
text
#click="confirm = false"
>
Cancel
</v-btn>
<v-btn
color="red"
text
#click="delClient(clientdata); confirm = false;"
>
Delete
</v-btn>
</v-card-actions>
</v-card>
</v-dialog>
</template>
</td>
<td class="px-4 py-2 font-medium" v-for="field in fields" :key="field.id">{{ clientdata[field] }}</td>
</tr>
<tr v-if="!clients.length" >
<td class="px-4 py-2 font-medium" style="opacity: 0.6;">No data to be shown.</td>
</tr>
</table>
<transition name="fade">
<div class="modal" v-if="dialog">
<div class="modal-content">
<EditModal :client="selClient" v-show="showEdit" #close="closeEdit"/>
</div>
</div>
</transition>
</div>
</template>
<script>
import EditModal from '#/components/Clients/EditClients.vue'
export default{
dialog: false,
overlay: true,
components: {
EditModal,
},
data () {
return {
selClient: {},
showEdit: false,
confirm: false,
clientIndex: 100,
}
},
created () {
this.$store.dispatch('fetchClients')
},
computed: {
clients() {
return this.$store.state.clients;
},
fields() {
return this.$store.state.clientfields;
}
},
methods: {
closeEdit: function() {
this.showEdit = false;
this.dialog = false;
},
delClient: function(clientdata) {
this.clientIndex--;
this.$store.dispatch('deleteClient', clientdata)
},
updClient: function(clientdata) {
this.selClient = clientdata;
this.showEdit = true;
this.dialog = true;
this.clientIndex++;
this.$store.dispatch('saveClient', clientdata)
},
saveClient: function(clientdata) {
this.showEdit = true;
this.dialog = true
this.clientIndex++;
this.$store.dispatch('saveClient', clientdata);
},
createClient(){
this.selClient = {};
}
}
}
</script>
I Fixed it, in my index I just committed my field data on save so my table gets filled and shows data.
promise.then(function (response) {
if (clientdata.id != null) {
commit("saveClient", clientdata)
} else {
commit("addClient", response.data.data)
}
! added my commit here to fill fields :) !
})
I'm starting with VueJs.
I would like to combine animation in and out in a modal.
I think I should do a function but can't find how to.
Here my code:
<template>
<div class="backgroundImage" :style="{'background-image': 'url(' + require('../../assets/bkg.jpg') + ')'}">
<div v-if="showModal" #click="showModal = false"></div>
<div class="modal" v-if="showModal">
<div class="animate__animated animate__bounceIn animate__slow">
<img id="synthesisFt" src="../../assets/popup-ftt.jpg" alt="Logo FunkTheTown" title="FunkTheTown" #click="showModal = false"/>
</div>
</div>
<div>
<img class="logo-img" src="../../assets/logo.png" alt="Logo FunkTheTown" title="FunkTheTown" />
</div>
</div>
</template>
<script>
export default {
data () {
return {
showModal: false
}
},
mounted:function(){
this.popup()
},
methods: {
popup : function () {
setTimeout(() => {
this.showModal = true;
}, 3000);
},
// classChange : function () {
// showmodal = false;
// }
}
}
for the off I would like to use animate__animated animate__bounceOut when I click on the modal.
I've resolved the issue, here the code :
<template>
<div class="backgroundImage" :style="{'background-image': 'url(' + require('../../assets/bkg.jpg') + ')'}">
<div v-if="showModal" #click="showModal = false"></div>
<div class="modal" v-if="showModal">
<div class="animate__animated animate__bounceIn animate__slow">
<img id="synthesisFt" src="../../assets/popup-ftt.jpg" alt="Logo FunkTheTown" title="FunkTheTown" #click="anim2()"/>
</div>
</div>
<div class="animate__animated animate__backInDown animate__slow" v-if="showModalLogin">
<div class="modalLogin">
<label>Login</label>
<input class="loginInput" type="text" placeholder="email...">
<label>Password</label>
<input class="loginPassword" type="password" placeholder="password...">
<button class="connexion">Connexion</button>
<button class="join">Join</button>
</div>
</div>
<div>
<img class="logo-img" src="../../assets/logo.png" alt="Logo FunkTheTown" title="FunkTheTown" />
</div>
<div class="animate__animated animate__rotateIn" v-if="showModalLogo" >
<img class="full_logo" src="../../assets/F2T_logo_color.png" >
</div>
<div class="animate__animated animate__rotateIn" v-if="showModalLogo">
<img class="full_logo_right" src="../../assets/F2T_logo_coloreverse.png" >
</div>
</div>
</template>
<script>
export default {
data () {
return {
showModal: false,
showModalLogin: false,
showModalLogo:false,
}
},
mounted:function(){
this.popup()
},
methods: {
popup : function () {
setTimeout(() => {
this.showModal = true;
}, 3000);
},
anim2 : function () {
this.showModal= false;
this.showModalLogin= true;
this.showModalLogo =true;
const element = document.querySelector('.logo-img');
element.classList.add('animate__animated','animate__bounceOut');
}
// classChange : function () {
// showmodal = false;
// }
}
}
I am using vuex , and with getters Iam filtering a array of data in the store.
In a parent component I am fetching the array and send it to a child with props.
The child component resieve filtered array with getters and save it in computed property.
But when I make changes by calling actions, store is updated but filtered array stayed the same.
When I send to the child component original unfiltered array it's okey.
It the vue dev tool I see correct updated getters.
Some of the code is below.
STORE
const getDefaultState = () => {
return {
activities: [],
error: null,
isActivitiesLoading: false,
isActivityUpdating: false,
}
}
const mutations = {
[FETCHING_ACTIVITIES](state) {
state.isActivitiesLoading = true;
state.error = null;
},
[FETCHING_ACTIVITIES_SUCCESS](state, activities) {
state.error = null;
state.isActivitiesLoading = false;
state.activities = activities
},
[FETCHING_ACTIVITIES_ERROR](state, error) {
state.error = error;
state.isActivitiesLoading = false
},
[UPDATING_ACTIVITY](state) {
state.isActivityUpdating = true;
state.error = null;
},
[UPDATING_ACTIVITY_SUCCESS](state, activity) {
state.error = null;
state.isActivityUpdating = false;
const index = state.activities.findIndex(a => a.id === activity.id)
state.activities[index] = activity;
},
[UPDATING_ACTIVITY_ERROR](state, error) {
state.error = error;
state.isActivityUpdating = false
},
}
const actions = {
async fetchActivities({ commit }) {
commit(FETCHING_ACTIVITIES);
try {
const response = await ActivitiesApi.fetchActivities();
const activities = response.data.data;
commit(FETCHING_ACTIVITIES_SUCCESS, activities);
return response.data.data;
} catch (error) {
commit(FETCHING_ACTIVITIES_ERROR, error);
return null;
}
},
async updateActivity({ commit }, payload) {
commit(UPDATING_ACTIVITY);
try {
const response = await ActivitiesApi.updateActivity(payload);
const activity = response.data.data;
commit(UPDATING_ACTIVITY_SUCCESS, activity);
return response.data.data;
} catch (error) {
commit(UPDATING_ACTIVITY_ERROR, error);
return null;
}
},
};
const getters = {
getActivities(state) {
return state.activities;
},
getRunningActivities(state) {
let today = new Date();
const activities = state.activities;
const filteredActivities = activities.filter(function(activity) {
let activityDate = new Date(activity.start_date)
return activityDate <= today
});
return filteredActivities;
},
};
export default {
namespaced: true,
state: getDefaultState(),
getters,
actions,
mutations,
}
PARENT COMPONENT
<template>
<div class="container">
<h3>Running Activities</h3>
<ActivitiesComponent
:initialActivitiesFromStore="runningActivities"
/>
</div>
</template>
import ActivitiesComponent from "../components/Activities";
export default {
components: {
ActivitiesComponent
},
mounted() {
this.$store.dispatch('activities/fetchActivities').then(
() => {
if (this.hasError) {
console.log(this.error)
} else {
}
}
);
},
computed: {
activitiesFromStore() {
return this.$store.getters['activities/getActivities'];
},
runningActivities() {
return this.$store.getters['activities/getRunningActivities']
},
},
}
</script>
CHILD COMPONENT
<template>
<div class="container">
<div v-if="isActivitiesLoading" class="spinner-border spinner"></div>
<div class="row">
<div class="col">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Activities</th>
<th scope="col">Period</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
<tr v-for="(activity, activityId) in $v.activities.$each.$iter" :key="activityId">
<th scope="row">{{ parseInt(activityId) + 1 }}</th>
<td>
<input type="text" class="form-control" v-model="activity.name.$model">
<div class="alert alert-danger" v-if="!activity.name.required">Print Name</div>
<div v-if="activitiesFromStore[activityId].is_paused" class="alert alert-warning">
Activity is paused
</div>
</td>
<td>
<input type="text" class="form-control" v-model="activity.activity_period.$model">
<div class="alert alert-danger" v-if="!activity.activity_period.required">Print period</div>
<div class="alert alert-danger" v-if="!activity.activity_period.integer || !activity.activity_period.minValue">Period > 0</div>
</td>
<td class="d-flex border-0">
<button #click="activity.$model.is_paused = ! activity.$model.is_paused" class="btn btn-light mr-1" v-bind:class="{ active: !activity.$model.is_paused }">
<span v-if="activity.$model.is_paused">Убрать с паузы</span>
<span v-else>Make pause</span>
</button>
<button #click="updateActivity(activity.$model)" :disabled="
isActivityUpdating || !activitiesChanged(activityId) || !activity.name.required || !activity.activity_period.required || !activity.activity_period.integer || !activity.activity_period.minValue
" type="button" class="btn btn-success mr-1">
<span v-if="isActivityUpdating && activityActed.id == activity.$model.id" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Change
</button>
<button #click="deleteActivity(activity.$model)" type="button" class="btn btn-danger">
<span v-if="isActivityDeleting && activityActed.id == activity.$model.id" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Delete
</button>
</td>
</tr>
</tbody>
</table>
<div class="collapse" id="collapseExample">
<div class="form-group row">
<div class="col-4">
<label for="newPassword-input">Name</label>
<input v-model="activityToAdd.name" class="form-control">
<div v-if="$v.activityToAdd.period.$dirty && !$v.activityToAdd.name.required" class="alert alert-danger">Print name</div>
</div>
<div class="col-4">
<label for="newPassword-input">Period</label>
<input v-model="activityToAdd.period" class="form-control">
<div class="alert alert-danger" v-if="$v.activityToAdd.period.$dirty && !$v.activityToAdd.period.required">Print period</div>
<div class="alert alert-danger" v-if="(!$v.activityToAdd.period.integer || !$v.activityToAdd.period.minValue)">period > 0</div>
</div>
</div>
<button #click="addActivity" :disabled="!$v.activityToAdd.name.required || !$v.activityToAdd.period.required || !$v.activityToAdd.period.integer || !$v.activityToAdd.period.minValue" type="button" class="btn btn-primary">
<span v-if="isActivityAdding" class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
add
</button>
</div>
</div>
</div>
</div>
</template>
<script>
import {required, minValue, integer} from "vuelidate/lib/validators"
export default {
props: ['initialActivitiesFromStore'],
data() {
return {
activityActed: null,
justEdited: false,
justAdded: false,
justDeleted: false,
activityToAdd:{
name: '',
period: '',
isPaused: ''
}
}
},
computed: {
activitiesFromStore() {
return this.initialActivitiesFromStore
},
activities() {
return JSON.parse(JSON.stringify(this.initialActivitiesFromStore));
},
},
methods: {
activitiesChanged(id) {
if(this.activitiesFromStore[id] && this.activities[id].name == this.activitiesFromStore[id].name && this.activities[id].activity_period == this.activitiesFromStore[id].activity_period && this.activities[id].is_paused == this.activitiesFromStore[id].is_paused)
return false;
else
return true
},
updateActivity(activity){
this.activityActed = activity;
this.$store.dispatch('activities/updateActivity', activity).then(
() => {
if (this.hasError) {
console.log(this.error)
} else {
this.justEdited = true;
// still the same
console.log(this.$store.getters['activities/getRunningActivities']);
}
}
);
},
},
validations: {
activities: {
$each: {
name: {
required,
},
activity_period: {
required,
integer,
minValue: minValue(0)
},
is_paused: {
required,
},
}
},
}
}
</script>
The problem was that I did not follow the vue specification about modification of an array. I used vm.items[indexOfItem] = newValue which is not reactive.
I render html with some data received from server. It's almost fine but I see errors to console while I didn't receive data from server yet.
Here is the code:
<div class="wiget__eventDetails">
<p class="wiget__eventName">{{ show[0] == 'undefined' ? '' : show[0].title }}</p>
<div class="wiget__place">
<span class="wiget__venue">{{ building[0] == 'undefined' ? '' : building[0].title }}, </span>
<span class="wiget__venueHall">{{ hall[0] == 'undefined' ? '' : hall[0].title }}</span>
</div>
<div class="wiget__dateOfEvent">
<span class="wiget__time">{{this.getTime(this.event[0].date)}}</span>
<span class="wiget__date">{{this.getDate(this.event[0].date)}}</span>
</div>
</div>
So while show[0] === 'undefined' I receive an error to console (Error in render: "TypeError: Cannot read property 'title' of undefined") but the page renders and the statement above do not help
Here is full code of the template
<template>
<div class="allPlaces" id="allPlaces">
<div class="wiget__row wiget__row--top wiget__row--top--allPlaces" id="topRow">
<div class="wiget__details wiget__details--allPlaces">
<div class="wiget__logo">
<img class="wiget__img wiget__img--logo" width="28" height="30" src="../../img/kassy_logo_img.png" alt="">
<img class="wiget__img wiget__img--logoTXT" width="59" height="28" src="../../img/kassy_logo_text.png" alt="">
</div>
<div class="wiget__eventDetails">
<p class="wiget__eventName">{{ show[0] == 'undefined' ? '' : show[0].title }}</p>
<div class="wiget__place">
<span class="wiget__venue">{{ building[0] == 'undefined' ? '' : building[0].title }}, </span>
<span class="wiget__venueHall">{{ hall[0] == 'undefined' ? '' : hall[0].title }}</span>
</div>
<div class="wiget__dateOfEvent">
<span class="wiget__time">{{this.getTime(this.event[0].date)}}</span>
<span class="wiget__date">{{this.getDate(this.event[0].date)}}</span>
</div>
</div>
</div>
</div>
<div class="allPlaces__wrapper">
<h1 class="allPlaces__title">Оформление заказа</h1>
<p class="allPlaces__description">Для оформления заказа выберите нужное количество мест</p>
<div class="allPlaces__content">
<div class="allPlaces__entrance" v-for="(entrance, index) in places.entrance">
<div class="allPlaces__infoBlock">
<div>
<div class="allPlaces__available">
<span class="allPlaces__label allPlaces__label--places">Доступно мест:</span>
<span class="allPlaces__data"> {{entrance.vacant_places}}</span>
</div>
<div class="allPlaces__title allPlaces__title--entrance">{{getEntranceName(entrance)}}</div>
</div>
<div class="allPlaces__price">
<span class="allPlaces__label">Цена: </span>
<span class="allPlaces__data">{{entrance.price}}</span>
</div>
</div>
<div class="allPlaces__orderBlock">
<div class="allPlaces__inputBlock">
<input class="allPlaces__input" type="number" name="amount"
v-model="entrance.value" #blur="showLabel($event, index)">
<label class="allPlaces__label allPlaces__label--input"
#click="hideLabel($event, index)">Количество мест
</label>
</div>
<div class="allPlaces__btnBlock">
<button class="allPlaces__btn allPlaces__btn--minus" type="button" name="button"
#click="removeTicket(entrance, index)"></button>
<button class="allPlaces__btn allPlaces__btn--plus" type="button" name="button"
#click="addTicket(entrance, index)">
</button>
</div>
<button class="allPlaces__btn allPlaces__btn--confirm" type="button" name="button"
#click="addEntrancePlaceToCart(entrance, index)">
<img class="allPlaces__img allPlaces__img--cart" src="../../img/cartWhite.png" alt="Корзина">
<span class="allPlaces__text allPlaces__text--cart">В корзину</span>
</button>
</div>
</div>
</div>
</div>
<div class="wiget__row wiget__row--bottom" id="bottomRow">
<div class="wiget__row">
<div class="wiget__amountBlock">
<span class="wiget__tickets">
<span>Билеты:</span>
<span class="wiget__amount wiget__amount--tickets">{{this.ticketsInCart.count}}</span>
<span>шт.</span>
</span>
<div class="wiget__money">
<span class="wiget__money wiget__money--label">Итого:</span>
<p>
<span class="wiget__amount wiget__amount--money">{{this.ticketsInCart.total}} </span>
<span class="wiget__amount wiget__amount--money">руб.</span>
</p>
</div>
</div>
<div class="wiget__btnBlock">
<button class="wiget__btn wiget__btn--goToHall" type="button" name="button"
#click="goToHall()">
Выбрать на схеме
</button>
<button class="wiget__btn wiget__btn--confirm" type="button" name="button"
#click="goToCartPage($event)">Оформить заказ</button>
</div>
</div>
<div class="wiget__row wiget__row--service">
<span class="wiget__service">Сервис предоставлен:</span>
Kassy.ru
</div>
</div>
</div>
</template>
<script>
import vueMethods from '../../mixins/methods'
import { mapState } from 'vuex'
export default {
name: 'allPlaces',
mixins: [vueMethods],
data () {
return {
showTitle: ''
}
},
mounted () {
this.$nextTick(function () {
window.addEventListener('resize', this.updateAllPlacesOnResize)
this.setupAllPlaces()
})
},
methods: {
setupAllPlaces () {
let allPlaces = document.getElementById('allPlaces')
let topRow = document.querySelector('.wiget__row--top')
let wrapper = document.querySelector('.allPlaces__wrapper')
let bottomRow = document.querySelector('.wiget__row--bottom')
let allPlacesHeight = allPlaces.clientHeight
let topRowHeight = topRow.clientHeight
let bottomRowHeight = bottomRow.clientHeight
let wrapperHeight = allPlacesHeight - topRowHeight - bottomRowHeight
console.log('topRowHeight ', topRowHeight)
console.log('allPlacesHeight ', allPlacesHeight)
console.log('bottomRowHeight ', bottomRowHeight)
console.log('wrapperHeight ', wrapperHeight)
wrapper.style.minHeight = wrapperHeight + 'px'
},
updateAllPlacesOnResize (event) {
this.setupAllPlaces()
},
getEntranceName (entrance) {
let sectionId = entrance.section_id
let section = this.section
let sectionName = section.filter(function (e) {
return e.id === sectionId
})
return sectionName[0].title
},
updateEntranceTicketsAmount (index, value) {
console.log(index)
console.log(this.$store.state.onload.eventData.places.entrance)
let label = document.getElementsByClassName('allPlaces__label allPlaces__label--input')
let input = document.getElementsByClassName('allPlaces__input')
input[index].focus()
console.log(label)
// label[index].style.display = 'none'
this.$store.state.onload.eventData.places.entrance[index].value = value
},
addTicket (tickets, index) {
let value = tickets.value
if (value === '') {
value = 1
} else if (value <= 100) {
value = parseInt(value) + 1
} else {
value = parseInt(value)
}
console.log('tickets ', tickets)
console.log('index ', index)
this.updateEntranceTicketsAmount(index, value)
},
removeTicket (tickets, index) {
let value = tickets.value
console.log('value ', value)
if (value === '') {
value = 0
} else if (value <= 100 && value > 0) {
value = parseInt(value) - 1
} else {
value = parseInt(value)
}
this.updateEntranceTicketsAmount(index, value)
},
addEntrancePlaceToCart (entrance) {
console.log('entrance.id to add to cart ', entrance.id)
let db = this.db
let places = parseInt(entrance.value)
console.log('places ', places)
let sessionId = this.sessionId
let entranceId = parseInt(entrance.id)
let params = {db, places, sessionId, entranceId}
this.$store.dispatch('addEntrancePlaceToCart', params) // Добавили место в корзину
},
goToHall () {
this.$store.dispatch('closeAllPlaces')
this.$store.dispatch('openHallPlan')
},
hideLabel (e, index) {
console.log('CLICKED')
console.log('index click', index)
let input = document.getElementsByClassName('allPlaces__input')
input[index].focus()
},
showLabel (e, index) {
console.log(e)
let target = e.target
console.log('BLUR')
console.log('target', target)
let label = document.getElementsByClassName('allPlaces__label allPlaces__label--input')
console.log('target.value ', target.value)
if (target.value === '' || target.value === undefined) {
label[index].style.display = 'block'
} else {
label[index].style.display = 'none'
}
}
},
destroyed () {
window.removeEventListener('resize', this.setupAllPlaces)
},
computed: {
...mapState({
db: state => state.onload.currentDb,
currentEvent: state => state.onload.currentEvent,
modals: state => state.modals,
metric: state => state.onload.eventData.metric,
section: state => state.onload.eventData.section,
show: state => state.onload.eventData.show,
event: state => state.onload.eventData.event,
building: state => state.onload.eventData.building,
hall: state => state.onload.eventData.hall,
places: state => state.onload.eventData.places,
placesSeated: state => state.onload.eventData.places.place,
sessionId: state => state.cart.sessionId,
ticketsInCart: state => state.cart.ticketsInCart
})
}
}
</script>
<style scoped lang="stylus">
#import '../../styles/Root/allPlaces'
#import '../../styles/Root/wiget'
</style>