Sliders for accepting

client/package-lock.json

@@ -22,6 +22,7 @@
             },
             "devDependencies": {
                 "@babel/plugin-transform-react-jsx-source": "^7.18.6",
+                "@types/lodash": "^4.17.10",
                 "@typescript-eslint/eslint-plugin": "^5.30.6",
                 "@typescript-eslint/parser": "^5.30.6",
                 "eslint": "^8.20.0",
@@ -3009,6 +3010,13 @@
             "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
             "dev": true
         },
+        "node_modules/@types/lodash": {
+            "version": "4.17.10",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.10.tgz",
+            "integrity": "sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==",
+            "dev": true,
+            "license": "MIT"
+        },
         "node_modules/@types/mime": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.0.tgz",
@@ -23437,6 +23445,12 @@
             "integrity": "sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==",
             "dev": true
         },
+        "@types/lodash": {
+            "version": "4.17.10",
+            "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.10.tgz",
+            "integrity": "sha512-YpS0zzoduEhuOWjAotS6A5AVCva7X4lVlYLF0FYHAY9sdraBfnatttHItlWeZdGhuEkf+OzMNg2ZYAx8t+52uQ==",
+            "dev": true
+        },
         "@types/mime": {
             "version": "3.0.0",
             "resolved": "https://registry.npmjs.org/@types/mime/-/mime-3.0.0.tgz",

client/package.json

@@ -22,6 +22,7 @@
     },
     "devDependencies": {
         "@babel/plugin-transform-react-jsx-source": "^7.18.6",
+        "@types/lodash": "^4.17.10",
         "@typescript-eslint/eslint-plugin": "^5.30.6",
         "@typescript-eslint/parser": "^5.30.6",
         "eslint": "^8.20.0",

client/src/app.tsx

@@ -16,7 +16,14 @@ import Search from './routes/search';
 import List from './routes/list';
 import Info from './routes/info';
 
-if (window.location.host === 'matescrates.au') LogRocket.init('yh0dy3/mcrates');
+if (window.location.host === 'crates.strix.systems') LogRocket.init('yh0dy3/mcrates');
+
+
+// ██     ██ ███████      █████  ██████  ███████     ███████  ██████      ██████   █████   ██████ ██   ██
+// ██     ██ ██          ██   ██ ██   ██ ██          ██      ██    ██     ██   ██ ██   ██ ██      ██  ██
+// ██  █  ██ █████       ███████ ██████  █████       ███████ ██    ██     ██████  ███████ ██      █████
+// ██ ███ ██ ██          ██   ██ ██   ██ ██               ██ ██    ██     ██   ██ ██   ██ ██      ██  ██
+//  ███ ███  ███████     ██   ██ ██   ██ ███████     ███████  ██████      ██████  ██   ██  ██████ ██   ██
 
 
 const Mcrates = () => {

client/src/components/offer.group.tsx

@@ -1,6 +1,7 @@
 import { h } from 'preact';
 import { ExternalLink, Check } from 'react-feather';
 import { useState } from 'preact/hooks';
+import _ from 'lodash'
 
 import { useSelector, useDispatch } from 'react-redux'
 import { State } from './../store';
@@ -58,6 +59,73 @@ function OfferPriceBtn(offer) {
     )
 }
 
+function OfferConditionSlider([condition, offers], i, groupId, rangeMin, rangeMax) {
+    // const ws = useSelector((state: State) => state.ws);
+    // const accepted = offer.status === 'Accepted';
+    // const confirmed = offer.status === 'Confirmed';
+
+    // function setStatus() {
+    //     if (accepted) return ws.sendOfferStatusSet(offer.id, 'Pending')
+    //     ws.sendOfferStatusSet(offer.id, 'Accepted');
+    // }
+
+    // const classes = `${accepted ? 'accepted' : ''} ${confirmed ? 'confirmed' : ''}`;
+    // const btnText = accepted
+    //     ? offer.status
+    //     : 'Accept';
+
+    // const title = accepted
+    //     ? 'Click to cancel'
+    //     : 'Click to accept this offer';
+
+    // return (
+    //     <button disabled={confirmed} title={title} onClick={() => setStatus()} class={classes}>${offer.total} {offer.condition}</button>
+    // )
+
+    const min = _.first(offers).total
+    const max = _.last(offers).total
+    // const step = min === max ? max : "any"
+    const step = 'any'
+    const id = `${groupId}-${i}`
+    const markersId = `${id}-markers`
+    const steps = offers.map(o => o.total)
+
+    const [acceptedPrice, setAcceptedPrice] = useState(0)
+
+    function onChange(target) {
+        const highest = () => {
+            return _.findLast(steps, s => target.value >= Number(s)) || 0
+        }
+
+        const v = highest()
+        setAcceptedPrice(v)
+        target.value = v
+    }
+
+    const acceptedPriceLabel = acceptedPrice ? `$${acceptedPrice}` : '-'
+
+    return (
+        <div key={id}>
+            <label for={id}>{condition}</label><br />
+            <label for={id}>{acceptedPriceLabel}</label><br />
+            <input
+                type="range"
+                id={id}
+                name={id}
+                list={markersId}
+                step={step}
+                min={rangeMin}
+                max={rangeMax}
+                value={acceptedPrice}
+                onChange={e => onChange((e.target as HTMLInputElement)) } />
+
+            <datalist id={markersId}>
+                {offers.map(o => <option value={o.total}></option>)}
+            </datalist>
+        </div>
+    )
+}
+
 
 export default function OfferGroup(group, i) {
     const ws = useSelector((state: State) => state.ws);
@@ -66,6 +134,10 @@ export default function OfferGroup(group, i) {
     const descriptions = group.details.formats.map(f => f.descriptions.join(' ')).join(' ')
     const detailText = `${format} ${descriptions}`;
 
+    const conditions = Object.entries(_.groupBy(group.offers, 'condition'))
+    const rangeMin = 0
+    const rangeMax = _.maxBy(group.offers, 'total').total
+
     return (
         <div class="offer" key={i} id={group.details.id}>
             <section>
@@ -76,8 +148,8 @@ export default function OfferGroup(group, i) {
                 <div class='alt-text details'>Status: {group.status}</div>
             </section>
             <img src={group.details.thumb} />
-            <div class="lines">
-                {group.offers.map(o => OfferPriceBtn(o))}
+            <div>
+                {conditions.map((c, i) => OfferConditionSlider(c, i, group.details.id, rangeMin, rangeMax))}
             </div>
         </div>
     )