{/* Name is always shown */}
val && val.length > 0}
/>
{/* img: Control level determines whether or not to show this */}
{account.control >= controlConfig.account.sets.img ? (
val.length > 0}
/>
) : null}
{/* public: Control level determines whether or not to show this */}
{account.control >= controlConfig.account.sets.public ? (
Public measurements set
),
desc: 'Others are allowed to use these measurements to generate or test patterns',
},
{
val: false,
label: (
Private measurements set
),
desc: 'These measurements cannot be used by other users or visitors',
},
]}
current={isPublic}
/>
) : null}
{/* units: Control level determines whether or not to show this */}
{account.control >= controlConfig.account.sets.units ? (
<>
Metric units (cm)cm
),
desc: 'Pick this if you prefer cm over inches',
},
{
val: true,
label: (
Imperial units (inch)″
),
desc: 'Pick this if you prefer inches over cm',
},
]}
current={imperial}
/>
Note: You must save after changing Units to have the change take effect on this page.
) : null}
{/* notes: Control level determines whether or not to show this */}
{account.control >= controlConfig.account.sets.notes ? (
) : null}
)
}
/**
* A (helper) component to display a measurements value
*
* @param {object} props - All React props
* @param {string} val - The value
* @param {string} m - The measurement name
* @param {bool} imperial - True for imperial measurements, or metric by default
*/
export const MeasurementValue = ({ val, m, imperial = false }) =>
isDegreeMeasurement(m) ? (
{val}°
) : (
)
/**
* React component to suggest a measurements set for curation
*
* @param {object} props - All React props
* @param {string} mset - The measurements set
*/
export const SuggestCset = ({ mset, Link }) => {
// State
const [height, setHeight] = useState('')
const [img, setImg] = useState('')
const [name, setName] = useState('')
const [notes, setNotes] = useState('')
const [submission, setSubmission] = useState(false)
console.log(mset)
// Hooks
const backend = useBackend()
// Method to submit the form
const suggestSet = async () => {
setLoadingStatus([true, 'Contacting backend'])
const result = await backend.suggestCset({ set: mset.id, height, img, name, notes })
if (result.success && result.data.submission) {
setSubmission(result.data.submission)
setLoadingStatus([true, 'Nailed it', true, true])
} else setLoadingStatus([true, 'An unexpected error occured. Please report this.', true, false])
}
const missing = []
for (const m of measurements) {
if (typeof mset.measies[m] === 'undefined') missing.push(m)
}
if (submission) {
const url = `/curate/sets/suggested/${submission.id}`
return (
<>
Thank you
Your submission has been registered and will be processed by one of our curators.
It is available at: {url}
)
}
return (
<>
Suggest a measurements set for curation
{missing.length > 0 ? : }
Measurements
{missing.length > 0 ? (
<>
To ensure curated measurements sets work for all designs, you need to provide a full set
of measurements.
Your measurements set is missing the following measurements:
{missing.map((m) => (
{m}
))}
) : (
All measurements are available.
)}
{name.length > 1 ? : }
Name
Each curated set has a name. You can suggest your own name or a pseudonym.
val.length > 1} />
{height.length > 1 ? : }
Height
To allow organizing and presenting our curated sets in a structured way, we organize them by
height.
val.length > 1}
/>
{img.length > 0 ? : }
Image
Finally, we need a picture. Please refer to the documentation to see what makes a good
picture for a curated measurements set.
Documentation
val.length > 1}
/>
Notes
If you would like to add any notes, you can do so here.
This field supports markdown
true} />
)
}
export const NewSet = () => {
// Hooks
const backend = useBackend()
const { account } = useAccount()
const { setLoadingStatus, LoadingProgress } = useContext(LoadingStatusContext)
// State
const [name, setName] = useState('')
// Use account setting for imperial
const imperial = account.imperial
// Helper method to create a new set
const createSet = async () => {
setLoadingStatus([true, 'Storing new measurements set'])
const [status, body] = await backend.createSet({ name, imperial })
if (status === 201 && body.result === 'created') {
setLoadingStatus([true, 'Nailed it', true, true])
window.location = `/account/set?id=${body.set.id}`
} else
setLoadingStatus([
true,
'Failed to save the measurments set. Please report this.',
true,
false,
])
}
return (
Name
Give this set of measurements a name. That will help tell them apart.
val && val.length > 0}
placeholder={'Georg Cantor'}
/>
)
// Is it a button with an onClick handler?
if (onClick)
return (
)
// Returns a link to an internal page
if (href && !useA)
return (
{inner}
)
// Returns a link to an external page
if (href && useA)
return (
{inner}
)
// Returns a div
return
{inner}
}
export const MsetButton = (props) =>
export const MsetLink = (props) =>
export const MsetA = (props) =>
export const UserSetPicker = ({
design,
t,
href,
clickHandler,
missingClickHandler,
size = 'lg',
}) => {
// Hooks
const backend = useBackend()
const { control } = useAccount()
// State
const [sets, setSets] = useState({})
// Effects
useEffect(() => {
const getSets = async () => {
const result = await backend.getSets()
if (result.success) {
const all = {}
for (const set of result.data.sets) all[set.id] = set
setSets(all)
}
}
getSets()
}, [backend])
let hasSets = false
const okSets = []
const lackingSets = []
if (Object.keys(sets).length > 0) {
hasSets = true
for (const setId in sets) {
const [hasMeasies] = hasRequiredMeasurements(
designMeasurements[design],
sets[setId].measies,
true
)
if (hasMeasies) okSets.push(sets[setId])
else lackingSets.push(sets[setId])
}
}
if (!hasSets)
return (