forked from M-Labs/web2019
9 lines
33 KiB
JavaScript
9 lines
33 KiB
JavaScript
'use strict';function _extends(){return _extends=Object.assign||function(a){for(var b,c=1;c<arguments.length;c++)for(var d in b=arguments[c],b)Object.prototype.hasOwnProperty.call(b,d)&&(a[d]=b[d]);return a},_extends.apply(this,arguments)}function _typeof(a){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(a){return typeof a}:function(a){return a&&"function"==typeof Symbol&&a.constructor===Symbol&&a!==Symbol.prototype?"symbol":typeof a},_typeof(a)}function _classCallCheck(a,b){if(!(a instanceof b))throw new TypeError("Cannot call a class as a function")}function _defineProperties(a,b){for(var c,d=0;d<b.length;d++)c=b[d],c.enumerable=c.enumerable||!1,c.configurable=!0// hack: remove weird animation after a drop
|
|
,"value"in c&&(c.writable=!0),Object.defineProperty(a,c.key,c)}function _createClass(a,b,c){return b&&_defineProperties(a.prototype,b),c&&_defineProperties(a,c),a}function _possibleConstructorReturn(a,b){return b&&("object"===_typeof(b)||"function"==typeof b)?b:_assertThisInitialized(a)}function _assertThisInitialized(a){if(void 0===a)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return a}function _getPrototypeOf(a){return _getPrototypeOf=Object.setPrototypeOf?Object.getPrototypeOf:function(a){return a.__proto__||Object.getPrototypeOf(a)},_getPrototypeOf(a)}function _inherits(a,b){if("function"!=typeof b&&null!==b)throw new TypeError("Super expression must either be null or a function");a.prototype=Object.create(b&&b.prototype,{constructor:{value:a,writable:!0,configurable:!0}}),b&&_setPrototypeOf(a,b)}function _setPrototypeOf(a,b){return _setPrototypeOf=Object.setPrototypeOf||function(a,b){return a.__proto__=b,a},_setPrototypeOf(a,b)}function _slicedToArray(a,b){return _arrayWithHoles(a)||_iterableToArrayLimit(a,b)||_nonIterableRest()}function _nonIterableRest(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}function _iterableToArrayLimit(a,b){if(Symbol.iterator in Object(a)||"[object Arguments]"===Object.prototype.toString.call(a)){var c=[],d=!0,e=!1,f=void 0;try{for(var g,h=a[Symbol.iterator]();!(d=(g=h.next()).done)&&(c.push(g.value),!(b&&c.length===b));d=!0);}catch(a){e=!0,f=a}finally{try{d||null==h["return"]||h["return"]()}finally{if(e)throw f}}return c}}function _arrayWithHoles(a){if(Array.isArray(a))return a}function ownKeys(a,b){var c=Object.keys(a);if(Object.getOwnPropertySymbols){var d=Object.getOwnPropertySymbols(a);b&&(d=d.filter(function(b){return Object.getOwnPropertyDescriptor(a,b).enumerable})),c.push.apply(c,d)}return c}function _objectSpread(a){for(var b,c=1;c<arguments.length;c++)b=null==arguments[c]?{}:arguments[c],c%2?ownKeys(b,!0).forEach(function(c){_defineProperty(a,c,b[c])}):Object.getOwnPropertyDescriptors?Object.defineProperties(a,Object.getOwnPropertyDescriptors(b)):ownKeys(b).forEach(function(c){Object.defineProperty(a,c,Object.getOwnPropertyDescriptor(b,c))});return a}function _defineProperty(a,b,c){return b in a?Object.defineProperty(a,b,{value:c,enumerable:!0,configurable:!0,writable:!0}):a[b]=c,a}var _window$ReactBeautifu=window.ReactBeautifulDnd,DragDropContext=_window$ReactBeautifu.DragDropContext,Draggable=_window$ReactBeautifu.Draggable,Droppable=_window$ReactBeautifu.Droppable,data=window.shop_data,productStyle=function(a,b,c,d,e){var f={opacity:b.isDragging?.7:1,backgroundColor:d||e?"#eae7f7":"initial"};return b.isDropAnimating?(c&&(f.transitionDuration="0.001s"),_objectSpread({},a,{},f)):_objectSpread({},a,{},f)},cartStyle=function(a,b){var c=b.isDraggingOver;return _objectSpread({},a,{},{backgroundColor:c?"#f2f2f2":"#f9f9f9",border:c?"1px dashed #ccc":"0"})},nbrConnectorsStyle=function(a){if(!a||!a.nbrCurrentSlot)return{};var b=100*a.nbrCurrentSlot/a.nbrSlotMax;return 100<b&&(b=100),{width:"".concat(b,"%")}},nbrClocksStyle=function(a){if(!a||!a.nbrCurrentClock)return{};var b=100*a.nbrCurrentClock/a.nbrClockMax;return 100<b&&(b=100),{width:"".concat(b,"%")}},copy=function(a,b,c,d,e){var f=Array.from(b.itemIds),g=Array.from(c.items),h=f[d.index];return g.splice(e.index,0,_objectSpread({},a[h],{id:uuidv4()})),g},reorder=function(a,b,c){var d=Array.from(a),e=d.splice(b,1),f=_slicedToArray(e,1),g=f[0];return d.splice(c,0,g),d},remove=function(a,b){var c=Array.from(a);return c.splice(b,1),c},nbrOccupiedSlotsInCrate=function(a){return a.reduce(function(a,b){return a+(8===b.hp?2:1)},0)},Layout=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.aside,c=a.main;return React.createElement("div",{className:"layout"},React.createElement("aside",{className:"aside"},b),React.createElement("section",{className:"main"},c))}}],[{key:"propTypes",get:function get(){return{aside:PropTypes.any,main:PropTypes.any}}}]),b}(React.PureComponent),ProductItem=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnClickAddItem=c.handleOnClickAddItem.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{id:PropTypes.string.isRequired,index:PropTypes.number.isRequired,name:PropTypes.string.isRequired,price:PropTypes.number.isRequired,currency:PropTypes.string.isRequired,image:PropTypes.string.isRequired,specs:PropTypes.array,onClickAddItem:PropTypes.func}}}]),_createClass(b,[{key:"handleOnClickAddItem",value:function handleOnClickAddItem(a,b){this.props.onClickAddItem&&this.props.onClickAddItem(a),b.preventDefault()}},{key:"render",value:function render(){var a=this.props,b=a.id,c=a.index,d=a.name,e=a.price,f=a.currency,g=a.image,h=a.specs,i=h&&0<h.length&&React.createElement("ul",null,h.map(function(a,b){return React.createElement("li",{key:b},a)}));return React.createElement("section",{className:"productItem"},React.createElement("div",{className:"content"},React.createElement("h3",null,d),React.createElement("div",{className:"price"},"".concat(f," ").concat(e)),i),React.createElement("div",{className:"content"},React.createElement("button",{onClick:this.handleOnClickAddItem.bind(this,c)},React.createElement("img",{src:"/images/shop/icon-add.svg",alt:"add"})),React.createElement(Draggable,{draggableId:b,index:c},function(a,b){return React.createElement(React.Fragment,null,React.createElement("img",_extends({ref:a.innerRef},a.draggableProps,a.dragHandleProps,{style:productStyle(a.draggableProps.style,b,!0),src:g})),b.isDragging&&React.createElement("img",{className:"",src:g}))})))}}]),b}(React.PureComponent),ProductCartItem=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnMouseEnterItem=c.handleOnMouseEnterItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveItem=c.handleOnMouseLeaveItem.bind(_assertThisInitialized(c)),c.handleOnMouseEnterWarningItem=c.handleOnMouseEnterWarningItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveWarningItem=c.handleOnMouseLeaveWarningItem.bind(_assertThisInitialized(c)),c.handleOnMouseEnterRemoveItem=c.handleOnMouseEnterRemoveItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveRemoveItem=c.handleOnMouseLeaveRemoveItem.bind(_assertThisInitialized(c)),c.handleOnClickRemoveItem=c.handleOnClickRemoveItem.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{hovered:PropTypes.bool,index:PropTypes.number.isRequired,model:PropTypes.object.isRequired,data:PropTypes.object,onToggleProgress:PropTypes.func,onToggleWarning:PropTypes.func,onToggleOverlayRemove:PropTypes.func,onClickRemoveItem:PropTypes.func}}},{key:"defaultProps",get:function get(){return{hovered:!1}}}]),_createClass(b,[{key:"handleOnMouseEnterItem",value:function handleOnMouseEnterItem(a,b){this.props.onToggleProgress&&this.props.onToggleProgress(a,!0),b.preventDefault()}},{key:"handleOnMouseLeaveItem",value:function handleOnMouseLeaveItem(a,b){this.props.onToggleProgress&&this.props.onToggleProgress(a,!1),b.preventDefault()}},{key:"handleOnMouseEnterWarningItem",value:function handleOnMouseEnterWarningItem(a,b,c){b&&(this.props.onToggleWarning&&this.props.onToggleWarning(a,!0),c.preventDefault())}},{key:"handleOnMouseLeaveWarningItem",value:function handleOnMouseLeaveWarningItem(a,b,c){b&&(this.props.onToggleWarning&&this.props.onToggleWarning(a,!1),c.preventDefault())}},{key:"handleOnMouseEnterRemoveItem",value:function handleOnMouseEnterRemoveItem(a,b){this.props.onToggleOverlayRemove&&this.props.onToggleOverlayRemove(a,!0),b.preventDefault()}},{key:"handleOnMouseLeaveRemoveItem",value:function handleOnMouseLeaveRemoveItem(a,b){this.props.onToggleOverlayRemove&&this.props.onToggleOverlayRemove(a,!1),b.preventDefault()}},{key:"handleOnClickRemoveItem",value:function handleOnClickRemoveItem(a){this.props.onClickRemoveItem&&this.props.onClickRemoveItem(a)}},{key:"render",value:function render(){var a,b=this,c=this.props,d=c.hovered,e=c.model,f=c.data,g=c.index;if(f&&f.warnings){var i=Object.keys(f.warnings);i&&0<i.length&&(a=f.warnings[i[0]])}var h;if(e.showProgress&&f)switch(e.type){case"kasli":case"kasli-backplane":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentSlot,"/").concat(e.nbrSlotMax," EEM connectors available")),React.createElement("p",null,"".concat(f.nbrCurrentClock,"/").concat(e.nbrClockMax," Clock connectors available")));break;case"zotino":case"hd68":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentSlot,"/").concat(e.nbrSlotMax," connectors available")));break;case"clocker":h=React.createElement("div",{className:"k-popup-connectors"},React.createElement("p",null,"".concat(f.nbrCurrentClock,"/").concat(e.nbrClockMax," Clock connectors available")));break;default:}return React.createElement(Draggable,{draggableId:e.id,index:g},function(c,i){return React.createElement("div",_extends({ref:c.innerRef},c.draggableProps,c.dragHandleProps,{style:_objectSpread({},productStyle(c.draggableProps.style,i,!0,!!d,!!e.selected)),onMouseEnter:b.handleOnMouseEnterRemoveItem.bind(b,g),onMouseLeave:b.handleOnMouseLeaveRemoveItem.bind(b,g)}),React.createElement("div",{style:{height:"24px"},className:"progress-container warning",onMouseEnter:b.handleOnMouseEnterWarningItem.bind(b,g,a),onMouseLeave:b.handleOnMouseLeaveWarningItem.bind(b,g,a)},a&&React.createElement("img",{className:"alert-warning",src:a?"/images".concat(a.icon):null}),a&&e.showWarning&&React.createElement("div",{className:"k-popup-warning"},React.createElement("p",{className:"rule warning"},React.createElement("i",null,a.message)))),React.createElement("h6",null,e.name),React.createElement("div",{style:{height:"250px"},onMouseEnter:b.handleOnMouseEnterRemoveItem.bind(b,g)},React.createElement("img",{className:"item-cart",src:"/images".concat(e.image)})),React.createElement("div",{style:{display:e.showOverlayRemove?"flex":"none"},className:"overlayRemove",onClick:b.handleOnClickRemoveItem.bind(b,g)},React.createElement("img",{src:"/images/shop/icon-remove.svg",alt:"rm"}),React.createElement("p",null,"remove")),React.createElement("div",{style:{height:"22px"},className:"progress-container",onMouseEnter:b.handleOnMouseEnterItem.bind(b,g),onMouseLeave:b.handleOnMouseLeaveItem.bind(b,g)},0<e.nbrSlotMax&&React.createElement("div",{className:"nbr-connectors"},React.createElement("div",{style:_objectSpread({},nbrConnectorsStyle(f))})),0<e.nbrClockMax&&React.createElement("div",{className:"nbr-clocks"},React.createElement("div",{style:_objectSpread({},nbrClocksStyle(f))})),h))})}}]),b}(React.PureComponent),FakePlaceholder=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){for(var a=this.props,b=a.isDraggingOver,c=a.nbrSlots,d=a.items,e=[],f=nbrOccupiedSlotsInCrate(d),g=c-f;0<g;g--)e.push(React.createElement("div",{key:g,style:{display:b?"none":"block",border:"1px dashed #ccc",width:"45px",marginBottom:"5px"}}));return React.createElement(React.Fragment,null,e)}}],[{key:"propTypes",get:function get(){return{isDraggingOver:PropTypes.bool,nbrSlots:PropTypes.number.isRequired,items:PropTypes.array.isRequired}}}]),b}(React.PureComponent),Cart=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.nbrSlots,c=a.itemHovered,d=a.data,e=a.onToggleProgress,f=a.onToggleWarning,g=a.onToggleOverlayRemove,h=a.onClickRemoveItem,i=d.items.map(function(a,b){var i;return d.itemsData&&b in d.itemsData&&(i=d.itemsData[b]),React.createElement(ProductCartItem,{hovered:a.id===c,key:a.id,index:b,data:i,onToggleProgress:e,onToggleWarning:f,onToggleOverlayRemove:g,onClickRemoveItem:h,model:a})});return React.createElement(Droppable,{droppableId:d.id,direction:"horizontal"},function(a,c){return React.createElement("div",_extends({ref:a.innerRef},a.droppableProps,{style:cartStyle(a.droppableProps.style,c),className:"items-cart-list"}),i,a.placeholder&&React.createElement("div",{style:{display:"none"}},a.placeholder),React.createElement(FakePlaceholder,{nbrSlots:b,items:d.items,isDraggingOver:c.isDraggingOver}))})}}],[{key:"propTypes",get:function get(){return{nbrSlots:PropTypes.number,itemHovered:PropTypes.string,data:PropTypes.object.isRequired,onToggleProgress:PropTypes.func,onToggleWarning:PropTypes.func,onToggleOverlayRemove:PropTypes.func,onClickRemoveItem:PropTypes.func}}}]),b}(React.PureComponent),CrateMode=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnClickMode=c.handleOnClickMode.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{items:PropTypes.array.isRequired,mode:PropTypes.string.isRequired,onClickMode:PropTypes.func}}}]),_createClass(b,[{key:"handleOnClickMode",value:function handleOnClickMode(a,b){this.props.onClickMode&&this.props.onClickMode(a),b.preventDefault()}},{key:"render",value:function render(){var a=this,b=this.props,c=b.mode,d=b.items;return React.createElement("div",{className:"crate-mode"},d.map(function(b){return React.createElement("a",{key:b.id,className:c==b.id?"active":"",onClick:a.handleOnClickMode.bind(a,b.id),href:"#",role:"button"},b.name)}))}}]),b}(React.PureComponent),Crate=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.rules,c=a.cart;return React.createElement("div",{className:"crate"},React.createElement("div",{className:"crate-products"},c,b&&0<b.length&&React.createElement("div",{className:"crate-info"},b.map(function(a,b){return React.createElement("p",{key:b,className:"rule"},React.createElement("img",{src:"/images".concat(a.icon)})," ",React.createElement("i",null,React.createElement("strong",null,a.name,":")," ",a.message))}))))}}],[{key:"propTypes",get:function get(){return{rules:PropTypes.array,cart:PropTypes.element}}}]),b}(React.PureComponent),OrderPanel=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.title,c=a.description,d=a.crateMode,e=a.crate,f=a.summaryPrice,g=a.form;return React.createElement("section",{className:"panel"},React.createElement("h2",null,b),React.createElement("div",{className:"control"},React.createElement("p",{className:"description"},c),d),e,React.createElement("section",{className:"summary"},f,g))}}],[{key:"propTypes",get:function get(){return{title:PropTypes.string,description:PropTypes.string,crateMode:PropTypes.element,crate:PropTypes.element,summaryPrice:PropTypes.element,form:PropTypes.element}}}]),b}(React.PureComponent),OrderForm=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.state={note:""},c.handleNoteChange=c.handleNoteChange.bind(_assertThisInitialized(c)),c.handleSubmit=c.handleSubmit.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{onClickSubmit:PropTypes.func}}}]),_createClass(b,[{key:"handleNoteChange",value:function handleNoteChange(a){this.setState({note:a.target.value})}},{key:"handleSubmit",value:function handleSubmit(a){this.props.onClickSubmit&&this.props.onClickSubmit(this.state.note),a.preventDefault()}},{key:"render",value:function render(){return React.createElement("div",{className:"summary-form"},React.createElement("form",{onSubmit:this.handleSubmit},React.createElement("textarea",{value:this.state.note,onChange:this.handleNoteChange,rows:"5",placeholder:"Additional notes"}),React.createElement("input",{type:"submit",value:"Request quote"})))}}]),b}(React.PureComponent),OrderSumary=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.handleOnDeleteItem=c.handleOnDeleteItem.bind(_assertThisInitialized(c)),c.handleOnDeleteAllItems=c.handleOnDeleteAllItems.bind(_assertThisInitialized(c)),c.handleOnMouseEnterItem=c.handleOnMouseEnterItem.bind(_assertThisInitialized(c)),c.handleOnMouseLeaveItem=c.handleOnMouseLeaveItem.bind(_assertThisInitialized(c)),c.handleOnClickSelectItem=c.handleOnClickSelectItem.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{modes:PropTypes.array,currentMode:PropTypes.string,summary:PropTypes.array,itemsData:PropTypes.array,onDeleteItem:PropTypes.func,onDeleteAllItems:PropTypes.func,onMouseEnterItem:PropTypes.func,onMouseLeaveItem:PropTypes.func,onClickSelectItem:PropTypes.func}}}]),_createClass(b,[{key:"handleOnDeleteItem",value:function handleOnDeleteItem(a,b){this.props.onDeleteItem&&this.props.onDeleteItem(a),b.preventDefault()}},{key:"handleOnDeleteAllItems",value:function handleOnDeleteAllItems(a){this.props.onDeleteAllItems&&this.props.onDeleteAllItems(),a.preventDefault()}},{key:"handleOnMouseEnterItem",value:function handleOnMouseEnterItem(a,b){this.props.onMouseEnterItem&&this.props.onMouseEnterItem(a),b.preventDefault()}},{key:"handleOnMouseLeaveItem",value:function handleOnMouseLeaveItem(a){this.props.onMouseLeaveItem&&this.props.onMouseLeaveItem(),a.preventDefault()}},{key:"handleOnClickSelectItem",value:function handleOnClickSelectItem(a,b){return"IMG"!==b.target.tagName&&this.props.onClickSelectItem&&this.props.onClickSelectItem(a),b.preventDefault()}},{key:"render",value:function render(){var a=this,b=this.props,c=b.modes,d=b.currentMode,e=b.summary,f=b.itemsData,g=c.find(function(a){return a.id===d});return React.createElement("div",{className:"summary-price"},React.createElement("table",null,React.createElement("thead",null,React.createElement("tr",null,React.createElement("td",{colSpan:"2",className:"summary-remove-all"},React.createElement("span",{className:"item-card-name"},"Remove all cards"),React.createElement("button",{onClick:this.handleOnDeleteAllItems},React.createElement("img",{src:"/images/shop/icon-remove.svg"})))),g&&React.createElement("tr",null,React.createElement("td",{className:"item-card-name"},g.name),React.createElement("td",{className:"price"},"".concat(g.currency," ").concat(g.price),React.createElement("button",{style:{opacity:"0",cursor:"initial"}},React.createElement("img",{src:"/images/shop/icon-remove.svg"}))))),React.createElement("tbody",null,e.map(function(b,c){var d,e;if(f[c]){d=f[c];var g=Object.keys(d.warnings);g&&0<g.length&&(e=d.warnings[g[0]])}return React.createElement("tr",{key:b.id,className:"hoverable ".concat(b.selected?"selected":""),onClick:a.handleOnClickSelectItem.bind(a,c),onMouseEnter:a.handleOnMouseEnterItem.bind(a,b.id),onMouseLeave:a.handleOnMouseLeaveItem},React.createElement("td",{className:"item-card-name"},React.createElement("div",null,b.name)),React.createElement("td",{className:"price"},React.createElement("div",null,"".concat(b.currency," ").concat(b.price),React.createElement("button",{onClick:a.handleOnDeleteItem.bind(a,c)},React.createElement("img",{src:"/images/shop/icon-remove.svg"}))),e&&React.createElement("img",{style:{marginLeft:"10px"},className:"alert-warning",src:"/images/".concat(e.icon)})))})),React.createElement("tfoot",null,React.createElement("tr",null,React.createElement("td",{className:"item-card-name"},"Price estimate"),React.createElement("td",{className:"price"},e.length?"".concat(e[0].currency," ").concat(e.reduce(function(a,b){return a+b.price},0)+g.price):"".concat(g.currency," ").concat(g.price),React.createElement("button",{style:{opacity:"0",cursor:"initial"}},React.createElement("img",{src:"/images/shop/icon-remove.svg",alt:"icon remove"})))))))}}]),b}(React.PureComponent),Backlog=/*#__PURE__*/function(a){function b(){return _classCallCheck(this,b),_possibleConstructorReturn(this,_getPrototypeOf(b).apply(this,arguments))}return _inherits(b,a),_createClass(b,[{key:"render",value:function render(){var a=this.props,b=a.data,c=a.items,d=a.onClickAddItem,e=b.itemIds.map(function(a){return c[a]}),f=e.map(function(a,b){return React.createElement(ProductItem,{key:a.id,id:a.id,index:b,name:a.name,price:a.price,currency:a.currency,image:"/images/".concat(a.image),specs:a.specs,onClickAddItem:d})});return React.createElement(Droppable,{droppableId:b.id,isDropDisabled:!0},function(a){return React.createElement("div",_extends({className:"backlog-container",ref:a.innerRef},a.droppableProps),f,a.placeholder&&React.createElement("div",{style:{display:"none"}},a.placeholder))})}}],[{key:"propTypes",get:function get(){return{data:PropTypes.object.isRequired,items:PropTypes.object,onClickAddItem:PropTypes.func}}},{key:"defaultProps",get:function get(){return{items:{}}}}]),b}(React.PureComponent),Shop=/*#__PURE__*/function(a){function b(a){var c;return _classCallCheck(this,b),c=_possibleConstructorReturn(this,_getPrototypeOf(b).call(this,a)),c.state=c.props.data,c.handleCrateModeChange=c.handleCrateModeChange.bind(_assertThisInitialized(c)),c.handleOnDragEnd=c.handleOnDragEnd.bind(_assertThisInitialized(c)),c.handleDeleteItem=c.handleDeleteItem.bind(_assertThisInitialized(c)),c.handleDeleteAllItems=c.handleDeleteAllItems.bind(_assertThisInitialized(c)),c.handleMouseEnterItem=c.handleMouseEnterItem.bind(_assertThisInitialized(c)),c.handleMouseLeaveItem=c.handleMouseLeaveItem.bind(_assertThisInitialized(c)),c.handleClickAddItem=c.handleClickAddItem.bind(_assertThisInitialized(c)),c.checkAlerts=c.checkAlerts.bind(_assertThisInitialized(c)),c.handleToggleItemProgress=c.handleToggleItemProgress.bind(_assertThisInitialized(c)),c.handleToggleItemWarning=c.handleToggleItemWarning.bind(_assertThisInitialized(c)),c.handleClickSelectItem=c.handleClickSelectItem.bind(_assertThisInitialized(c)),c.handleClickSubmit=c.handleClickSubmit.bind(_assertThisInitialized(c)),c.handleToggleOverlayRemove=c.handleToggleOverlayRemove.bind(_assertThisInitialized(c)),c}return _inherits(b,a),_createClass(b,null,[{key:"propTypes",get:function get(){return{data:PropTypes.object.isRequired}}}]),_createClass(b,[{key:"componentDidMount",value:function componentDidMount(){// index 0 is a Kasli, we place it as a default conf on the crate.
|
|
this.handleOnDragEnd({source:{droppableId:"backlog",index:0},destination:{droppableId:"cart",index:0},draggableId:null})}},{key:"componentDidUpdate",value:function componentDidUpdate(a,b){(b.columns.cart.items!==this.state.columns.cart.items||b.currentMode!==this.state.currentMode)&&this.checkAlerts(b.columns.cart.items,this.state.columns.cart.items)}},{key:"handleCrateModeChange",value:function handleCrateModeChange(a){this.setState({currentMode:a})}},{key:"handleDeleteItem",value:function handleDeleteItem(a){var b=Array.from(this.state.columns.cart.items);b.splice(a,1),this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:b})})}))}},{key:"handleDeleteAllItems",value:function handleDeleteAllItems(){this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:[]})})}))}},{key:"handleMouseEnterItem",value:function handleMouseEnterItem(a){this.setState(_objectSpread({},this.state,{currentItemHovered:a}))}},{key:"handleMouseLeaveItem",value:function handleMouseLeaveItem(){this.setState(_objectSpread({},this.state,{currentItemHovered:null}))}},{key:"handleClickAddItem",value:function handleClickAddItem(a){var b={droppableId:"cart",index:this.state.columns.cart.items.length};this.handleOnDragEnd({source:{droppableId:"backlog",index:a},destination:b,draggableId:null})}},{key:"handleToggleItemProgress",value:function handleToggleItemProgress(a,b){var c=Array.from(this.state.columns.cart.items);this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:c.map(function(c,d){return _objectSpread({},c,{showProgress:d===a&&b,showOverlayRemove:!1,showWarning:!1})})})})}))}},{key:"handleToggleItemWarning",value:function handleToggleItemWarning(a,b){var c=Array.from(this.state.columns.cart.items);this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:c.map(function(c,d){return _objectSpread({},c,{showWarning:d===a&&b,showProgress:!1,showOverlayRemove:!1})})})})}))}},{key:"handleClickSelectItem",value:function handleClickSelectItem(a){var b=Array.from(this.state.columns.cart.items);this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:b.map(function(b,c){return _objectSpread({},b,{selected:c===a})})})})}))}},{key:"handleToggleOverlayRemove",value:function handleToggleOverlayRemove(a,b){var c=Array.from(this.state.columns.cart.items);this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{items:c.map(function(c,d){return _objectSpread({},c,{showOverlayRemove:d===a&&b,showProgress:!1,showWarning:!1})})})})}))}},{key:"handleClickSubmit",value:function handleClickSubmit(b){var c={items:[],type:this.state.currentMode},d=Array.from(this.state.columns.cart.items);for(var g in d){var h=d[g];c.items.push({name:h.name})}var e=document.createElement("a"),a=new Date().getTime(),f="Hello!\n\nI would like to request a quotation for my below configuration:\n\n".concat(JSON.stringify(c),"\n\n");b&&(f="".concat(f,"\n\nAdditional note:\n\n").concat(b?b.trim():"")),document.body.appendChild(e),e.style="display: none",e.href="mailto:sales@m-labs.hk?subject=".concat("[Order hardware] - Request Quote","&body=").concat(encodeURIComponent(f)),e.click()}},{key:"handleOnDragEnd",value:function handleOnDragEnd(a){var b=a.source,c=a.destination,d=a.draggableId;if(!c)return void("cart"===b.droppableId&&this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,_defineProperty({},b.droppableId,_objectSpread({},this.state.columns[b.droppableId],{items:remove(this.state.columns[b.droppableId].items,b.index)})))})));switch(b.droppableId){case"backlog":this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,_defineProperty({},c.droppableId,_objectSpread({},this.state.columns[c.droppableId],{items:copy(this.state.items,this.state.columns[b.droppableId],this.state.columns[c.droppableId],b,c)})))}));break;case c.droppableId:this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,_defineProperty({},c.droppableId,_objectSpread({},this.state.columns[c.droppableId],{items:reorder(this.state.columns[c.droppableId].items,b.index,c.index)})))}));break;default:}}},{key:"checkAlerts",value:function checkAlerts(a,b){var c=this;console.log("--- START CHECKING CRATE WARNING ---");var d=this.state,e=d.currentMode,f=d.crateModeSlots,g=d.crateRules,h=Array.from(b),j={},k={},l=nbrOccupiedSlotsInCrate(b);l>f[e]&&(k[g.maxSlot.type]=_objectSpread({},g.maxSlot));for(var m=h.reduce(function(a,b,c){return("kasli"===b.type||"kasli-backplane"===b.type)&&a.push(c),a},[]),n=0;n<=m.length-1;n++){var o=void 0,p=0,q=0,r=m[n];if(o=n==m.length-1?h.slice(r+1):h.slice(r+1,m[n+1]),0==n){var s=h.slice(0,r),t=s.findIndex(function(a){return a.rules&&a.rules.resources});-1!=t&&(t in j?"warnings"in j[t]?j[t].warnings.resources=_objectSpread({},h[t].rules.resources):(j[t].warnings={},j[t].warnings.resources=_objectSpread({},h[t].rules.resources)):(j[t]=_objectSpread({},h[t]),j[t].warnings={},j[t].warnings.resources=_objectSpread({},h[t].rules.resources)))}if(p=o.filter(function(a){return"idc-bnc"!==a.type}).reduce(function(a,b){return a+b.slotOccupied},0),q=o.reduce(function(a,b){return"clocker"===b.type?a+b.clockOccupied:a},0),r in j?(j[r].nbrCurrentSlot=p,j[r].nbrCurrentClock=q,!("warnings"in j[r])&&(j[r].warnings={})):(j[r]=_objectSpread({},h[r]),j[r].nbrCurrentSlot=p,j[r].nbrCurrentClock=q,j[r].warnings={}),p>h[r].nbrSlotMax&&(k[h[r].rules.maxSlot.type]=_objectSpread({},h[r].rules.maxSlot),j[r].warnings.maxSlotWarning=_objectSpread({},h[r].rules.maxSlotWarning)),q>h[r].nbrClockMax&&(k[h[r].rules.maxClock.type]=_objectSpread({},h[r].rules.maxClock),j[r].warnings.maxClockWarning=_objectSpread({},h[r].rules.maxClockWarning)),h.length>r+1){var G=h[r+1];("kasli"===G.type||"kasli-backplane"===G.type)&&(k[G.rules.follow.type]=_objectSpread({},G.rules.follow))}}// check number of clock connector available
|
|
for(var u=h.reduce(function(a,b,c){return("kasli"===b.type||"kasli-backplane"===b.type||"clocker"===b.type)&&a.push(c),a},[]),v=0;v<=u.length-1;v++){var w=void 0,x=0,y=u[v];w=v==u.length-1?h.slice(y+1):h.slice(y+1,u[v+1]),x=w.reduce(function(a,b){return a+b.clockOccupied},0),y in j?j[y].nbrCurrentClock?j[y].nbrCurrentClock+=x:j[y].nbrCurrentClock=x:(j[y]=_objectSpread({},h[y]),j[y].nbrCurrentClock=x,j[y].warnings={}),x>h[y].nbrClockMax&&(k[h[y].rules.maxClock.type]=_objectSpread({},h[y].rules.maxClock),j[y].warnings.maxClockWarning=_objectSpread({},h[y].rules.maxClockWarning))}// check for number of recommanded EEM connectors
|
|
["novo","urukul","koster"].map(function(a){return h.find(function(b){return b.type===a})&&(k[c.state.items[a].rules.connectors.type]=_objectSpread({},c.state.items[a].rules.connectors)),a});for(var z=h.reduce(function(a,b,c){return"idc-bnc"===b.type&&a.push(c),a},[]),A=z.length-1;0<=A;A--){var B=z[A],C=!1;if(0==B)C=!0;else if(1<=B){var H=z[A]-1;"zotino"!==h[H].type&&"hd68"!==h[H].type&&"idc-bnc"!==h[H].type&&(C=!0)}C&&(j[B]=_objectSpread({},h[B]),j[B].warnings={},j[B].warnings.wrong=_objectSpread({},h[B].rules.wrong))}// check number of IDC-BNC adapters for a Zotino and HD68-IDC
|
|
for(var D=h.reduce(function(a,b,c){return("zotino"===b.type||"hd68"===b.type)&&a.push(c),a},[]),E=function(a){var b=void 0,c=0,d=D[a];b=a===D.length-1?h.slice(d+1):h.slice(d+1,D[a+1]);var e=!1;// check if HD68-IDC has at least 1 IDC-BNC adapter
|
|
if(c=b.reduce(function(a,b,c,d){return 0===c&&"idc-bnc"===b.type?a+1:"idc-bnc"===d[0].type&&0<c&&"idc-bnc"===d[c-1].type?("idc-bnc"!==b.type&&(e=!0),a+("idc-bnc"!==b.type||e?0:1)):a},0),(d in j)?(j[d].nbrCurrentSlot=c,!("warnings"in j[d])&&(j[d].warnings={})):(j[d]=_objectSpread({},h[d]),j[d].nbrCurrentSlot=c,j[d].warnings={}),0<c&&(k[h[d].rules.maxSlot.type]=_objectSpread({},h[d].rules.maxSlot)),c>h[d].nbrSlotMax&&(j[d].warnings.maxSlotWarning=_objectSpread({},h[d].rules.maxSlotWarning)),"hd68"===h[d].type){var f=!1;d<h.length-1?"idc-bnc"!==h[d+1].type&&(f=!0):d===h.length-1&&(f=!0),f&&((d in j)?j[d].warnings.minAdapter=_objectSpread({},h[d].rules.minAdapter):(j[d]=_objectSpread({},h[d]),j[d].warnings={},j[d].warnings.minAdapter=_objectSpread({},h[d].rules.minAdapter)))}},F=0;F<=D.length-1;F++)E(F);// update state with rules
|
|
this.setState(_objectSpread({},this.state,{columns:_objectSpread({},this.state.columns,{cart:_objectSpread({},this.state.columns.cart,{itemsData:_objectSpread({},j)})}),rules:_objectSpread({},k)}))}},{key:"render",value:function render(){var a=this.state,b=a.currentItemHovered,c=a.currentMode,d=a.crateModeSlots,e=a.crateModeItems,f=a.items,g=a.columns,h=a.rules;return React.createElement(DragDropContext,{onDragEnd:this.handleOnDragEnd},React.createElement(Layout,{className:"shop",aside:React.createElement(Backlog,{items:f,data:g.backlog,onClickAddItem:this.handleClickAddItem}),main:React.createElement(OrderPanel,{title:"Order hardware",description:" Choose your crate and drag/add the cards you want to the crate below to see how the combination would look like.",crateMode:React.createElement(CrateMode,{items:e,mode:c,onClickMode:this.handleCrateModeChange}),crate:React.createElement(Crate,{cart:React.createElement(Cart,{nbrSlots:d[c],data:g.cart,itemHovered:b,onToggleProgress:this.handleToggleItemProgress,onToggleWarning:this.handleToggleItemWarning,onToggleOverlayRemove:this.handleToggleOverlayRemove,onClickRemoveItem:this.handleDeleteItem}),rules:Object.values(h).filter(function(a){return a})}),summaryPrice:React.createElement(OrderSumary,{currentMode:c,modes:e,summary:g.cart.items,itemsData:g.cart.itemsData,onMouseEnterItem:this.handleMouseEnterItem,onMouseLeaveItem:this.handleMouseLeaveItem,onDeleteItem:this.handleDeleteItem,onDeleteAllItems:this.handleDeleteAllItems,onClickSelectItem:this.handleClickSelectItem}),form:React.createElement(OrderForm,{onClickSubmit:this.handleClickSubmit})})}))}}]),b}(React.PureComponent);ReactDOM.render(React.createElement(Shop,{data:data}),document.querySelector("#root-shop"));
|