diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss
index 2eb8e22..d1e6a08 100644
--- a/sass/css/_shop.scss
+++ b/sass/css/_shop.scss
@@ -261,6 +261,29 @@ button {
width: 20px;
padding-bottom: 3px;
}
+ .alert-info {
+ padding-bottom: 0;
+ }
+ }
+
+ .overlayVariant {
+ min-width: 100px;
+ height: 150px;
+ overflow-y: scroll;
+ position: absolute;
+ display: flex;
+ align-items: start;
+ justify-content: center;
+ text-align: left;
+ background-color: white;
+ color: black;
+ flex-direction: column;
+ cursor: pointer;
+
+ p {
+ font-size: .875rem;
+ margin: 0;
+ }
}
thead, tbody, tfoot {
diff --git a/static/js/shop.jsx b/static/js/shop.jsx
index be0aa0f..ae5e17e 100644
--- a/static/js/shop.jsx
+++ b/static/js/shop.jsx
@@ -6,8 +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 { CustomizeButton } from "./shop_components.jsx";
-
+import { CustomizeButton, CustomizeData } from "./shop_components.jsx";
const data = window.shop_data;
const itemsUnfoldedList = Array.from(data.columns.backlog.categories.map(groupId => groupId.itemIds).flat());
@@ -1434,7 +1433,7 @@ class OrderSumary extends React.PureComponent {
{summary.map((item, index) => {
- let alert, warning, options;
+ let alert, warning, options, options_data;
if (itemsData[index] && itemsData[index].warnings) {
alert = itemsData[index];
@@ -1444,6 +1443,7 @@ class OrderSumary extends React.PureComponent {
}
}
options = itemsData[index] && itemsData[index].options;
+ options_data = itemsData[index] && itemsData[index].options_data;
return (
- ) : ( options ?
- () : null
+ ) : ( (options && options_data) ?
+ ( ) : null
)}
{(!warning && !options) && (
@@ -1876,7 +1872,6 @@ class Shop extends React.PureComponent {
};
const clonedCart = Array.from(this.state.columns.cart.items);
const clonedCartData = Array.from(this.state.columns.cart.itemsData);
- console.log(clonedCartData);
for (const i in clonedCart) {
const item = clonedCart[i];
const item_data = clonedCartData[i];
diff --git a/static/js/shop_components.jsx b/static/js/shop_components.jsx
index bee55cb..4e6c154 100644
--- a/static/js/shop_components.jsx
+++ b/static/js/shop_components.jsx
@@ -2,11 +2,12 @@
import React, {Component} from "react";
import jsonLogic from 'json-logic-js';
-import { useState } from 'react';
+import {useState} from 'react';
// https://stackoverflow.com/a/70511311
const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();
+
class Radio extends Component {
constructor(props) {
super(props);
@@ -276,7 +277,8 @@ export function CustomizeButton({options, data, target, id, big}) {
return (
-
+
);
}
+
+export function CustomizeData({id, data}) {
+ const [show, setShow] = useState(false);
+ const [position, setPosition] = useState({x: 0, y: 0});
+
+ const handleClick = (event) => {
+ setPosition({x: event.clientX, y: event.clientY});
+ setShow(!show);
+ };
+
+ const stringify = (value) => {
+ let value_type = trueTypeOf(value);
+ if (value_type === "string") {
+ return value;
+ } else if (value_type === "object") {
+ if (value.checked === false) {
+ return "off";
+ } else if (value.checked === true && value.text) {
+ return value.text;
+ }
+ }
+ return JSON.stringify(value);
+ }
+
+ return (
+
+
+
+
+ {Array.from(Object.entries(data).map(([key, value], _) => {
+ return (
{key}: {stringify(value)}
);
+ }))}
+
+
+
+ );
+}
+