Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- // ==================== MEIDO ====================
- class MeidoCart{
- constructor(itemList, limit, cartElem, dateElemsCollection, fsMeidoField, reverseDate){
- console.log('constructing')
- this.itemList = itemList
- this.dailyLimit = limit
- //this.renderElementId = elemId
- this.renderTarget = cartElem
- this.reverseDate = reverseDate
- this.targetField = fsMeidoField
- this.dateElemsCollection = dateElemsCollection
- console.log(this.dateElemsCollection)
- this.dateCollection = null
- this.selectedRadio = null
- this.dateElemsCollection.forEach(dateElem => {
- dateElem.onchange = function(){
- this.calcDateCollection()
- this.render()
- }
- })
- }
- init(){
- this.calcDateCollection()
- }
- reverse(date){
- const vals = date.split("-")
- //return `${vals[2]}-${vals[1]}-${vals[0]}`
- return vals[2]+"-"+vals[1]+"-"+vals[0]
- }
- calcDateCollection(){
- if (!this.dateCollection) this.dateCollection = {}
- var flag = false
- var collection = []
- var dateObj = {}
- this.dateElemsCollection.forEach(dateElem => {
- if (dateElem.value) {
- flag = true
- collection.push(dateElem.value)
- }
- if (dateElem.value){
- if (!this.dateCollection[dateElem.value]){
- dateObj[dateElem.value] = {
- limit: this.dailyLimit,
- items: {}
- }
- } else {
- dateObj[dateElem.value] = this.dateCollection[dateElem.value]
- }
- }
- })
- if (!this.selectedRadio || !collection.includes(this.selectedRadio)) this.selectedRadio = this.dateElemsCollection[0].value
- if (!flag) dateObj = null
- this.dateCollection = dateObj
- this.render()
- }
- get cartState(){
- return JSON.stringify(this.dateCollection)
- }
- render(){
- const wrapper = document.createElement("div")
- if (!this.dateCollection) {
- wrapper.innerHTML = "Диапазон дат указан неверно!"
- } else {
- for(let date in this.dateCollection){
- const dateWrapper = document.createElement("div")
- dateWrapper.className += "meido-cart-date-wrapper"
- const header = document.createElement("div")
- header.className += "meido-cart-date-header"
- const radio = document.createElement("input")
- radio.type = "radio"
- radio.id = date
- radio.value = date
- radio.name = "date-radio"
- radio.addEventListener('change', function(e){
- this.selectedRadio = e.target.value
- }.bind(this))
- if (date === this.selectedRadio) radio.checked = true
- header.appendChild(radio)
- const label = document.createElement("label")
- label.htmlFor = date
- //label.innerHTML += `${date} (остаток: ${this.dateCollection[date].limit} грн.)`
- label.innerHTML += date+" (остаток: "+this.dateCollection[date].limit+" грн.)"
- header.appendChild(label)
- dateWrapper.appendChild(header)
- var flag = false
- for(let item in this.dateCollection[date].items){
- flag = true
- const itemElem = document.createElement("div")
- itemElem.className += "meido-cart-item"
- const itemText = document.createElement("span")
- //itemText.innerHTML = `${this.dateCollection[date].items[item]} x ${this.itemList[item].name}`
- itemText.innerHTML = this.dateCollection[date].items[item]+" x "+this.itemList[item].name
- itemElem.appendChild(itemText)
- const itemRemove = document.createElement("button")
- itemRemove.innerHTML = "X"
- itemRemove.className += "meido-cart-item-remove"
- itemRemove.onclick = function(){ this.removeMeidoItem(item, date) }.bind(this)
- itemElem.appendChild(itemRemove)
- dateWrapper.appendChild(itemElem)
- }
- if (!flag) {
- const itemEmpty = document.createElement("div")
- itemEmpty.className += "meido-cart-item"
- itemEmpty.style.color = "grey"
- itemEmpty.innerHTML = "<i>Ничего не добавлено</i>"
- dateWrapper.appendChild(itemEmpty)
- }
- wrapper.appendChild(dateWrapper)
- }
- }
- this.renderTarget.innerHTML = ""
- this.renderTarget.appendChild(wrapper)
- document.getElementById(this.targetField).innerHTML = this.cartState
- }
- addMeidoItem(itemId){
- if (this.dateCollection[this.selectedRadio].limit - this.itemList[itemId].price >= 0) {
- if (!this.dateCollection[this.selectedRadio].items[itemId]) {
- this.dateCollection[this.selectedRadio].items[itemId] = 1
- } else {
- this.dateCollection[this.selectedRadio].items[itemId] += 1
- }
- this.dateCollection[this.selectedRadio].limit -= this.itemList[itemId].price
- } else {
- console.error('Insufficient funds!')
- }
- this.render()
- }
- removeMeidoItem(itemId, date){
- this.dateCollection[date].items[itemId] -= 1
- if (this.dateCollection[date].items[itemId] === 0) delete this.dateCollection[date].items[itemId]
- this.dateCollection[date].limit += this.itemList[itemId].price
- this.render()
- }
- }
- function meidoInit(container, dateElemsCollection, fsMeidoField, limit, reverseDate = false){
- const innerContainer = document.createElement("div")
- return fetch("https://analytics.getmeido.com/api/fs/product-list?token=test")
- .then(res => {return res.json()})
- .then(data => {
- const title = document.createElement("h4")
- title.innerHTML = "Заказ еды Meido"
- innerContainer.appendChild(title)
- const mainWindow = buildMeidoWindow(data, dateElemsCollection, fsMeidoField, limit, reverseDate)
- innerContainer.appendChild(mainWindow)
- meidoCart.init()
- container.appendChild(innerContainer)
- return innerContainer
- })
- }
- function buildMeidoWindow(apiData, dateElemsCollection, fsMeidoField, limit, reverseDate){
- const wrapper = document.createElement("div")
- wrapper.className += "meido-main-window"
- const menuElem = document.createElement("div")
- menuElem.id = "meido-menu"
- const cartElem = document.createElement("div")
- cartElem.id = "meido-cart"
- var categorized = {}
- var flat = {}
- apiData.forEach(item => {
- if (!categorized[item.product_contractor_title]) categorized[item.product_contractor_title] = {}
- if (!categorized[item.product_contractor_title][item.category_title]) categorized[item.product_contractor_title][item.category_title] = {}
- categorized[item.product_contractor_title][item.category_title][item.id] = item
- flat[item.id] = {
- name: item.product_title,
- price: parseInt(item.product_price)
- }
- })
- menuElem.appendChild(buildMenu(categorized))
- console.log(limit, dateElemsCollection, reverseDate)
- window.meidoCart = new MeidoCart(flat, limit, cartElem, dateElemsCollection, fsMeidoField, reverseDate)
- cartElem.className += "meido-cart-wrapper"
- wrapper.appendChild(menuElem)
- wrapper.appendChild(cartElem)
- return wrapper
- }
- function buildMenu(data){
- const wrapper = document.createElement("div")
- wrapper.className += "meido-menu-wrapper"
- for(let category in data){
- const categoryWrapper = document.createElement("div")
- const categoryHeader = document.createElement("div")
- categoryHeader.className += "meido-category-title"
- const categoryArrow = document.createElement("span")
- categoryArrow.className += "arrow"
- categoryArrow.innerHTML = "►"
- const categoryTitle = document.createElement("span")
- categoryTitle.innerHTML = category
- categoryHeader.appendChild(categoryArrow)
- categoryHeader.appendChild(categoryTitle)
- const categoryContent = document.createElement("div")
- categoryContent.className += "meido-category-content"
- categoryHeader.onclick = function(){
- categoryContent.hidden = !categoryContent.hidden
- categoryArrow.innerHTML = (categoryArrow.innerHTML === "►" ? "▼" : "►")
- }
- categoryContent.hidden = true
- categoryWrapper.appendChild(categoryHeader)
- for(let contractor in data[category]){
- const contractorWrapper = document.createElement("div")
- const contractorHeader = document.createElement("div")
- contractorHeader.className += "meido-contractor-title"
- const contractorArrow = document.createElement("span")
- contractorArrow.className += "arrow"
- contractorArrow.innerHTML = "►"
- const contractorTitle = document.createElement("span")
- contractorTitle.innerHTML = contractor
- contractorHeader.appendChild(contractorArrow)
- contractorHeader.appendChild(contractorTitle)
- const contractorContent = document.createElement("div")
- contractorContent.className += "meido-contractor-content"
- contractorHeader.onclick = function(){
- contractorContent.hidden = !contractorContent.hidden
- contractorArrow.innerHTML = (contractorArrow.innerHTML === "►" ? "▼" : "►")
- }
- contractorContent.hidden = true
- contractorWrapper.appendChild(contractorHeader)
- for(let item in data[category][contractor]){
- contractorContent.appendChild(buildMenuItem(data[category][contractor][item]))
- }
- contractorWrapper.appendChild(contractorContent)
- categoryContent.appendChild(contractorWrapper)
- }
- categoryWrapper.appendChild(categoryContent)
- wrapper.appendChild(categoryWrapper)
- }
- return wrapper
- }
- function buildMenuItem(item){
- const wrapper = document.createElement("div")
- wrapper.className += "meido-item"
- const itemTitle = document.createElement("div")
- itemTitle.innerHTML = "<u>" + item.product_title + "</u>"
- itemTitle.className += "meido-item-title"
- const itemPic = document.createElement("img")
- itemPic.src = item.photo_url
- itemPic.className += "meido-pic"
- const itemDesc = document.createElement("div")
- itemDesc.innerHTML = item.product_description
- const price = document.createElement("span")
- //price.innerHTML = `<i>Цена: ${item.product_price} грн.</i>`
- price.innerHTML = "<i>Цена: "+item.product_price+" грн.</i>"
- price.className += "meido-price"
- const add = document.createElement("button")
- add.innerHTML = "Добавить"
- add.className += "meido-add-button"
- add.onclick = null
- add.onclick = function(e){
- e.preventDefault()
- meidoCart.addMeidoItem(item.id)
- }
- wrapper.appendChild(itemTitle)
- wrapper.appendChild(itemPic)
- wrapper.appendChild(itemDesc)
- wrapper.appendChild(add)
- wrapper.appendChild(price)
- return wrapper
- }
Add Comment
Please, Sign In to add comment