VSinerva/freesewing
1
0
Fork 0
Code Activity

wip(fs.lab): Work on workbench components

Browse source
This commit is contained in:
Joost De Cock 2022-01-25 08:31:06 +01:00
parent 8703983f2f
commit 22b25c0c5d
5 changed files with 242 additions and 63 deletions
Download patch file Download diff file Expand all files Collapse all files

97
packages/freesewing.shared/components/workbench/measurements.js
View file

@ -1,4 +1,27 @@
import MeasurementInput from './input-measurement.js'
import { withBreasts, withoutBreasts } from 'pkgs/models/src/index.js'
import nonHuman from './non-human-measurements.js'
import WithBreastsIcon from 'shared/components/icons/with-breasts.js'
import WithoutBreastsIcon from 'shared/components/icons/without-breasts.js'
const groups = {
people: {
with: withBreasts,
without: withoutBreasts,
},
dolls: {
with: nonHuman.withBreasts.dolls,
without: nonHuman.withoutBreasts.dolls,
},
giants: {
with: nonHuman.withBreasts.giants,
without: nonHuman.withoutBreasts.giants,
}
}
const icons = {
with: <WithBreastsIcon />,
without: <WithoutBreastsIcon />,
}
const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
@ -6,10 +29,11 @@ const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
const updateMeasurements = (value, m=false) => {
if (m === false) {
// Set all measurements
updateGist('measurements', value)
} else {
// Set one measurement
const newValues = {...gist.measurements}
newValues[m] = value.trim()
newValues[m] = value
updateGist('measurements', newValues)
}
}
@ -24,22 +48,63 @@ const WorkbenchMeasurements = ({ app, pattern, gist, updateGist }) => {
</span>
{app.t('measurements')}
</h1>
{pattern.config.measurements && (
<>
<h2>{app.t('requiredMeasurements')}</h2>
{pattern.config.measurements.map(m => (
<MeasurementInput key={m} m={m} {...inputProps} />
<details open>
<summary><h2 className="inline-block">{app.t('cfp.preloadMeasurements')}</h2></summary>
<div className="ml-2 pl-4 border-l-2">
{Object.keys(groups).map(group => (
<details>
<summary><h3 className="inline-block">{app.t(`app.${group}`)}</h3></summary>
<div className="ml-2 pl-4 border-l-2">
{Object.keys(icons).map(type => (
<>
<h4>{app.t(`app.${type}Breasts`)}</h4>
<ul className="flex flex-row flex-wrap gap-2">
{Object.keys(groups[group][type]).map((m) => (
<li key={`${m}-${type}-${group}`} className="">
<button
className="flex flex-row btn btn-outline"
onClick={() => updateMeasurements(groups[group][type][m], false)}
>
{icons[type]}
{app.t('cfp.size')}&nbsp;
{ group === 'people'
? m.slice(-2)
: m
}
</button>
</li>
))}
</ul>
</>
))}
</div>
</details>
))}
</>
)}
{pattern.config.optionalMeasurements && (
<>
<h2>{app.t('optionalMeasurements')}</h2>
{pattern.config.optionalMeasurements.map(m => (
<MeasurementInput key={m} m={m} {...inputProps} />
))}
</>
)}
</div>
</details>
<details>
<summary><h2 className="inline-block">{app.t('cfp.enterMeasurements')}</h2></summary>
<div className="ml-2 pl-4 border-l-2">
{pattern.config.measurements && (
<>
<h3>{app.t('requiredMeasurements')}</h3>
{pattern.config.measurements.map(m => (
<MeasurementInput key={m} m={m} {...inputProps} />
))}
</>
)}
{pattern.config.optionalMeasurements && (
<>
<h3>{app.t('optionalMeasurements')}</h3>
{pattern.config.optionalMeasurements.map(m => (
<MeasurementInput key={m} m={m} {...inputProps} />
))}
</>
)}
</div>
</details>
</div>
)
}