diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index cfc8a83..8e008d3 100644 --- a/sass/css/_shop.scss +++ b/sass/css/_shop.scss @@ -255,7 +255,7 @@ button { .item-card-name, .price { - > .alert-warning, > .alert-info { + > .alert-warning, .alert-info { background-color: inherit; height: inherit; width: 20px; @@ -432,7 +432,7 @@ button { height: 24px; } - > .alert-warning, > .alert-info { + > .alert-warning, .alert-info { background-color: inherit; height: inherit; width: 20px; @@ -465,15 +465,15 @@ button { } .overlayVariant { - top: 0; - width: 100%; + top: 24px; + width: 132px; min-height: 70px; max-height: 320px; overflow-y: scroll; position: absolute; display: flex; align-items: start; - justify-content: left; + justify-content: center; text-align: left; background-color: white; color: black; @@ -504,7 +504,13 @@ button { min-height: 1rem; } } + } + .overlay-smallcard { + right: -34.5px; + } + .overlay-bigcard { + right: -3px; } .hovered { diff --git a/static/images/shop/icon-customize.svg b/static/images/shop/icon-customize.svg new file mode 100644 index 0000000..cee836b --- /dev/null +++ b/static/images/shop/icon-customize.svg @@ -0,0 +1,47 @@ + + diff --git a/static/js/shop.jsx b/static/js/shop.jsx index 4a193a8..d0dcff0 100644 --- a/static/js/shop.jsx +++ b/static/js/shop.jsx @@ -6,7 +6,7 @@ import { createRoot } from "react-dom/client"; import PropTypes from "prop-types"; import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; import { v4 as uuidv4 } from 'uuid'; -import ProcessOptions from "./shop_components.jsx"; +import { CustomizeButton } from "./shop_components.jsx"; import { OverlayTrigger } from "react-bootstrap"; @@ -699,37 +699,31 @@ class ProductCartItem extends React.PureComponent { {warning ? ( - ) : (options ? : null) } + ) : (options ? ( { + //console.log("construct", outvar, value, options_data); + options_data[outvar] = value; + this.setState(options_data); + }), + update: ((outvar, value) => { + //console.log("update", outvar, value, options_data); + if (outvar in options_data) options_data[outvar] = value; + this.setState(options_data); + }), + unmount: ((outvar) => { + //console.log("delete", outvar); + delete options_data[outvar]; + }) + }} + />) : null) } - {options ? ( -
- { - //console.log("construct", outvar, value, options_data); - options_data[outvar] = value; - this.setState(options_data); - }), - update: ((outvar, value) => { - //console.log("update", outvar, value, options_data); - if (outvar in options_data) options_data[outvar] = value; - this.setState(options_data); - }), - unmount: ((outvar) => { - //console.log("delete", outvar); - delete options_data[outvar]; - }) - }} - /> -
- ) : null } {warning && model.showWarning && (
@@ -1428,8 +1422,7 @@ class OrderSumary extends React.PureComponent { {summary.map((item, index) => { - let alert; - let warning; + let alert, warning, options; if (itemsData[index] && itemsData[index].warnings) { alert = itemsData[index]; @@ -1438,6 +1431,7 @@ class OrderSumary extends React.PureComponent { warning = alert.warnings[warningsKeys[0]]; } } + options = itemsData[index] && itemsData[index].options; return ( - ) : ( - + />) : null )} - {!warning && ( + {(!warning && !options) && ( { - if (!(idx in itemsData)) itemsData[idx] = {}; + itemsCloned.forEach((elem, idx) => { + if (!(idx in itemsData)) itemsData[idx] = elem; if (idx in this.state.columns.cart.itemsData && this.state.columns.cart.itemsData[idx].options_data) { itemsData[idx].options_data = this.state.columns.cart.itemsData[idx].options_data; } }); - // update state with rules this.setState({ ...this.state, diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx index d1aeeb8..bee55cb 100644 --- a/static/js/shop_components.jsx +++ b/static/js/shop_components.jsx @@ -2,6 +2,7 @@ import React, {Component} from "react"; import jsonLogic from 'json-logic-js'; +import { useState } from 'react'; // https://stackoverflow.com/a/70511311 const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase(); @@ -263,4 +264,28 @@ export default function ProcessOptions({options, data, target, id}) { return ProcessOptions({options: jsonLogic.apply(options, data), data: data, target: target, id: id}); } } -} \ No newline at end of file +} + +export function CustomizeButton({options, data, target, id, big}) { + const [show, setShow] = useState(false); + + let div_classes = "overlayVariant border rounded " + (big ? "overlay-bigcard" : "overlay-smallcard") + const handleClick = (event) => { + setShow(!show); + }; + + return ( +
+ +
+ +
+
+ ); +} diff --git a/static/js/shop_data.js b/static/js/shop_data.js index cef0628..6dcfbeb 100644 --- a/static/js/shop_data.js +++ b/static/js/shop_data.js @@ -147,6 +147,28 @@ const shop_data = { nbrCurrentClock: 0, slotOccupied: 1, clockOccupied: 0, + options: [ + {type: "Radio", args: {title: "Variant", outvar: "variant", variants: ["standalone", "master", "satellite"]}}, + { + "if": [ + { + "in": [ + {"var": "variant"}, [ + "master", "standalone" + ] + ] + }, + [ + {type: "Line", args: {title: "IPv4", outvar: "ipv4", fallback: "192.168.1.75/24"}}, + {type: "SwitchLine", args: {title: "IPv6", outvar: "ipv6"}}, + {type: "SwitchLine", args: {title: "MAC", outvar: "mac"}}, + {type: "SwitchLine", args: {title: "Ext CLK", outvar: "ext_clk", fallback: {text: "125 MHz", checked: false}}}, + ], + null + ] + }, + null + ], rules: { maxSlot: { type: 'kaslisoc-max-slot', @@ -262,6 +284,10 @@ const shop_data = { nbrClockMax: 0, slotOccupied: 1, clockOccupied: 0, + options: [ + {type: "Switch", args: {title: "Output upper bank", outvar: "upper_bank"}}, + {type: "Switch", args: {title: "Output lower bank", outvar: "lower_bank", fallback: true}} + ], rules: { resources: { type: 'bnc-dio', @@ -283,6 +309,10 @@ const shop_data = { ], datasheet_file: '/docs/sinara-datasheets/2118-2128.pdf', datasheet_name: '2118/2128 BNC/SMA-TTL datasheet', + options: [ + {type: "Switch", args: {title: "Output upper bank", outvar: "upper_bank"}}, + {type: "Switch", args: {title: "Output lower bank", outvar: "lower_bank", fallback: true}} + ], size: 'small', type: null, hp: 4,