indes.js

import Vue from "vue";
import VueResource from "vue-resource";
import vueSlider from "vue-slider-component";

Vue.use(VueResource);

var app = new Vue({
	el: "#vue-app",
	data: {

		//product data 
		products,
		productsCount,
		per_pages,
		per_page,
		
		//pages
		page,
		pageCount,


		//seo
		seoText,


		// filters 
		types,
		typeSelect,

		brands,
		brandSelect,
		
		models,
		modelSelect,
		modelSearch:"",

		breadcrumbs_need_catalog:false,
		filters,


		//sort
		sorts,
		sortSelect,


		//locale (Clean in next time)
		locale,
		

		//Request
		hasRequestBefore: false,
		nowRequest: false,

		hasRequestBeforeStar:false,
		star_check:0 ,
		star_users,
		star_value,
		not_star_check:false,

		//Slider
		sliderActivateTimeout: null,
		sliderParams: {
			value: [min, max],
			width: "100%",
			height: 8,
			dotSize: 16,
			min: min,
			max: max,
			disabled: false,
			show: true,
			formatter: "{value} UAH",
			tooltip: "false",
			piecewise: false,
			piecewiseLabel: false,
			style: {},
			bgStyle: {
				backgroundColor: "#fff",
			},
			sliderStyle: [
				{
					backgroundColor: "#a4c83d",
					border: "4px solid #eaa926",
					borderRadius: "0",
					boxShadow: "none",
					zIndex:2
				},
				{
					backgroundColor: "#a4c83d",
					border: "4px solid #eaa926",
					borderRadius: "0",
					boxShadow: "none",
					zIndex:2
				}
			],

			processStyle: {
				backgroundColor: "#eaa926"
			}
		}
	},

	beforeCreate : function() {

		// loadStarCheck

		//keyStar
		let arr = [ [this.typeSelect , "type-"], [  this.brandSelect , "brand-" ], [ this.modelSelect , "model-"]]
		let res = []
		let str = ""
		for(let a in arr){
			if (arr[a][0].id) {
				res.push(arr[a][0].id)
			}else{
				res.push("X")
			}
		}

		res = res.join(" ")




		let r = JSON.parse(localStorage.getItem("rating-art-cat") || "{}")[res]||5
		
		if (r!= this.star_check){
			
			this.not_star_check=true
			this.star_check= r
			this.not_star_check=false
		}

	    
	},
	methods: {
		loadStarCheck(){
			let r = JSON.parse(localStorage.getItem("rating-art-cat") || "{}")[this.keyStar()]||5
			if (r!= this.star_check){
				
				this.not_star_check=true
				this.star_check= r
				this.not_star_check=false
			}
		},
		changePage(page) {
			$("html, body").animate(
				{
					scrollTop: 100
				},
				1000
			);
			this.sendRequest(page);
		},
		
		SliderActivate() {
			var thet = this;
			clearTimeout(this.sliderActivateTimeout);
			this.sliderActivateTimeout = setTimeout(function() {
				thet.sendRequest(1,false);
			}, 300);
		},

		getActiveFilters(){
			let filters=[]
	      	for(let filterGroup in this.filters){
	      		for(let filter in this.filters[filterGroup]){
	      			if (this.filters[filterGroup][filter].check){ 
	      				filters.push(this.filters[filterGroup][filter].id)
	      			}
	      		}
	      	}
	      	return filters
	    },
	    getActiveModels(){
			let models=[]
	      	for(let modelsGroup in this.models){
	      		for(let model in this.models[modelsGroup]){
	      			if (this.models[modelsGroup][model].check){ 
	      				models.push(this.models[modelsGroup][model].id)
	      			}
	      		}
	      	}
	      	return models
	    },
	    setActiveModels(){
			let models=[]
	      	for(let modelsGroup in this.models){
	      		for(let model in this.models[modelsGroup]){
	      			this.models[modelsGroup][model].check = false 
	      		}
	      	}
	      	return models
	    },
	    getActiveModelsName(){
			let models=[]
	      	for(let modelsGroup in this.models){
	      		for(let model in this.models[modelsGroup]){
	      			if (this.models[modelsGroup][model].check){ 
	      				models.push(this.models[modelsGroup][model].name)
	      			}
	      		}
	      	}
	      	return models
	    },
	    sortedArray(arr) {
	      function compare(a, b) {
	        if (a.name < b.name)
	          return -1;
	        if (a.name > b.name)
	          return 1;
	        return 0;
	      }

	      return arr.sort(compare);
	    },
		
		setShow(showIds, objects){
			if(Array.isArray(objects)){ 
				for (let obj  in  objects)
					objects[obj].show = showIds.includes(objects[obj].id)
			}else{
				for(let key in objects)
					for (let obj in objects[key]) 
						objects[key][obj].show = showIds.includes(objects[key][obj].id)
			}
		},
		
		setFilter(obj){
			for(let filterGroup in this.filters)
				for(let filter in this.filters[filterGroup])
					this.filters[filterGroup][filter].count=obj[this.filters[filterGroup][filter].id]
		},


	    callSendRequest(f){
	     	f();
	     	this.sendRequest();
	    },
	    reset(){
	    	this.brandSelect={}
			this.typeSelect={}
			this.modelSelect={}
			for(let modelsGroup in this.models){
	      		for(let model in this.models[modelsGroup]){
	      			this.models[modelsGroup][model].check = false 
	      		}
	      	}

			for(let filterGroup in this.filters)
				for(let filter in this.filters[filterGroup])
					this.filters[filterGroup][filter].check=false
	    	this.sendRequest();
	    },
		sendRequest(page = 1 , update_slider=true) {
			this.hasRequestBefore=true
			this.loadStarCheck()
			// формирование запроса
			let msg = {
			  brand: 	this.brandSelect.id,
			  type:  	this.typeSelect.id,
			  model: 	this.getActiveModels(),
			  filter: 	this.getActiveFilters(),
	          min:      this.sliderParams.value[0],
	          max:      this.sliderParams.value[1],
	          sort:     this.sortSelect.value || '',
	          page:     page,
	          per_page: this.per_page
	      	}
	      	debugger
	      	if (update_slider){
			    delete msg.min;
                delete msg.max;
            }
	      	this.page=page
	      	// console.log(msg)
	      	// console.log("-------------------------------------------------------")
			this.nowRequest = true;
			this.$http.get(`/${this.locale}/ajax/catalog`, { params: msg }).then(
				response => {
					this.nowRequest = false;
					this.hasRequestBefore = true;


                    this.processingRequest(response.body,update_slider);
                    this.UpdateHistory(msg);
                    // console.log(response);
					// console.log("===========================================================")
					// console.log("")
				},
				response => {
					this.nowRequest = false;
					// console.log("error");
					// console.log(response); 
				}
			);
		},
		UpdateHistory(msg) {
			let new_url = window.location.origin+"/" +locale+ "/catalogs";
			let not_other_items = true;
			
			if(msg.type){
				new_url=new_url+"/type-"+this.typeSelect.slug
				delete msg.type
			}
			if(msg.brand){
				new_url=new_url+"/brand-"+this.brandSelect.slug
				delete msg.brand
			}
			if(msg.model && this.modelSelect.slug){
				new_url=new_url+"/model-"+this.modelSelect.slug
				delete msg.model
			}
			if(msg.filter && msg.filter.length){
				msg.filter=JSON.stringify(msg.filter)
			}else{
				delete 	msg.filter
			}
			
			for (let item in msg) {
				if (msg[item] || msg[item]===0) {
					if (not_other_items) {
						new_url += "?";
						not_other_items = false;
					} else new_url += "&";
					new_url += item + "=" + msg[item];
				}
			}
			history.pushState(msg, "", new_url);
		},
		processingRequest(response , update_slider=true) {
			this.products = response.product;
			this.productsCount = response.product_count
			this.pageCount = response.page_count
			this.seoText = response.seo_text

			this.setShow(response.types , this.types)
			this.setShow(response.brands , this.brands)
			this.setShow(response.model , this.models)

			this.setFilter(response.filter)

			if (update_slider) {
				this.sliderParams.min = response.min_price
				this.sliderParams.max = response.max_price
				this.$set(this.sliderParams, 'value', [response.min_price,response.max_price])
			}
			this.star_value= response.star
			this.star_users= response.star_count
		},
		keyStar(){
			let arr = [ [this.typeSelect , "type-"], [  this.brandSelect , "brand-" ], [ this.modelSelect , "model-"]]
			let res = []
			let str = ""
			for(let a in arr){
				if (arr[a][0].id) {
					res.push(arr[a][0].id)
				}else{
					res.push("X")
				}
			}

			res = res.join(" ")
			return res
		},
		bread(){
			let arr = [ [this.typeSelect , "type-"], [  this.brandSelect , "brand-" ], [ this.modelSelect , "model-"]]
			let res = []
			let str = ""
			for(let a in arr){
				if (arr[a][0].name) {
					str+=arr[a][1]+arr[a][0].slug+"/"
					res.push({href: str , name:arr[a][0].name })
				}
			}
			return res
		}
	},
	computed: {
	  actualModels: function() {
	  	let actual = {}
		let search = this.modelSearch.toLowerCase()
	  	for(let modelGroupName in this.models){
	  		let group = []
	  		for(let model in this.models[modelGroupName]){
	  			if ( this.models[modelGroupName][model].show && this.models[modelGroupName][model].name.toLowerCase().indexOf(search) > -1 ){
	  				group.push(this.models[modelGroupName][model])
	  			}
	  		}
	  		if (group.length>0){
	  			actual[modelGroupName]=group
	  		}
	  	}
	    return actual;
	  },
	  breadcrumbs: function() {
		let arr = [ [this.typeSelect , "type-"], [  this.brandSelect , "brand-" ], [ this.modelSelect , "model-"]]
		let res = []
		let filt= []
		let str = ""
		
		for(let a in arr){
			if (arr[a][0].name) {
				res.push(arr[a][0].name)
			}
		}

     	for(let filterGroup in this.filters){
      		for(let filter in this.filters[filterGroup]){
      			if (this.filters[filterGroup][filter].check){
      				filt.push(this.filters[filterGroup][filter].name)
      			}
      		}
      	}

      	if (filt.length>2){
      		filt=[]
      	}
      	if (res.length>0 && filt.length>0){
      		res.push(": ")
      		this.breadcrumbs_need_catalog=false
      	}else{
      		this.breadcrumbs_need_catalog=true
      	}
      	res=res.concat(filt)
      	if (res.length>0) {
      		res = res.join(" ")
      	}else{
      		res=false
      	}

		return res
	  },
	  sortedFilters: function() {
	  	filters=this.filters
	  	for(let filterGroup in filters)
				filters[filterGroup]=this.sortedArray(filters[filterGroup])

		return filters
	  }
	},
	components: {
		vueSlider
	},
	watch: {
		star_check: function (va ) {
			
			// console.log("star_check")
			if(va==0) return
			if(this.not_star_check){
				this.not_star_check=false
				return
			}
			this.hasRequestBeforeStar=true;

			let val = +va
			
			let ratingArt = JSON.parse(localStorage.getItem("rating-art-cat") || "{}");
			let key = this.keyStar()
			let itNew=!ratingArt[key]
			let oldVa = +ratingArt[key]
			
			let data = {
			    star: val,
			    type: this.typeSelect.id,
			    brand: this.brandSelect.id,
			    model: this.modelSelect.id
			};
			
			let src=window.location.origin + (itNew ? "/ajax/catalog/star_create" : "/ajax/catalog/star_update"); 
			if (!itNew) {
				data.star_past=oldVa
			}
			this.$http.get( src , { params: data }).then(
				response => {
					if (itNew) {
						this.star_value = ((this.star_value*this.star_users+val)/(this.star_users+1)).toFixed(2)
							this.star_users=this.star_users+1
					}else{
				      	this.star_value = ((this.star_value*this.star_users - oldVa+val)/this.star_users).toFixed(2)
					}
				}
			);
			
			ratingArt[key] = val
			// console.log(ratingArt)
			localStorage.setItem("rating-art-cat", JSON.stringify(ratingArt));
						
		}
	}
});