feat(lab): Added language setting

packages/freesewing.lab/hooks/useApp.js

@@ -141,6 +141,7 @@ function useApp(full = true) {
 
     // Translation
     t,
+    languages: Object.keys(strings),
   }
 }
 

packages/freesewing.shared/components/workbench/default-settings.js

@@ -0,0 +1,11 @@
+const defaultSettings = {
+  sa: 0,
+  complete: true,
+  paperless: false,
+  units: 'metric',
+  locale: 'en',
+  margin: 2,
+  debug: true,
+}
+
+export default defaultSettings

packages/freesewing.shared/components/workbench/menu/core-settings/core-setting-list.js

@@ -0,0 +1,48 @@
+import { useState } from 'react'
+
+const CoreSettingList = props => {
+  const { dflt, list } = props
+  const val = props.gist?.settings?.[props.setting]
+
+  const [value, setValue] = useState(val)
+
+  const handleChange = (newVal) => {
+    if (newVal === dflt) reset()
+    else {
+      setValue(newVal)
+      props.updateGist(['settings', props.setting], newVal)
+    }
+  }
+
+  return (
+    <div className="py-4 mx-6 border-l-2 pl-2">
+      <p className="m-0 p-0 px-2 mb-2 text-neutral-content opacity-60 italic">
+        {props.app.t(`settings.${props.setting}.description`)}
+      </p>
+      <div className="flex flex-row">
+        <div className="grow">
+          {props.list.map(entry => (
+            <button
+              key={entry.key}
+              onClick={() => handleChange(entry.key)}
+              className={`
+                mr-1 mb-1 text-left text-lg w-full hover:text-secondary-focus px-2
+                ${entry.key === value && 'font-bold text-secondary'}
+              `}
+            >
+              <span className={`
+                text-3xl mr-2 inline-block p-0 leading-3
+                translate-y-3
+              `}>
+                <>&deg;</>
+              </span>
+              {entry.title}
+            </button>
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CoreSettingList

packages/freesewing.shared/components/workbench/menu/core-settings/index.js

@@ -0,0 +1,39 @@
+import SettingsIcon from 'shared/components/icons/settings.js'
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import Setting from './setting.js'
+
+const settings = {
+  locale: {
+    dflt: 'en',
+    list: ['de', 'en', 'es', 'fr', 'nl'],
+  },
+}
+
+const CoreSettings = props => {
+
+  return (
+    <details className='py-1' open>
+      <summary className={`
+        flex flex-row uppercase gap-4 font-bold text-lg
+        hover:cursor-row-resize
+        p-2
+        text-base-content
+        sm:text-neutral-content
+        items-center
+      `}>
+        <span className="text-secondary-focus mr-4"><SettingsIcon /></span>
+        <span className={`grow ${linkClasses}`}>
+          {props.app.t('app.settings')}
+        </span>
+        <Chevron />
+      </summary>
+      <ul className="pl-5 list-inside">
+        {Object.keys(settings).map(setting => (
+          <Setting key={setting} setting={setting} config={settings[setting]} {...props} />
+        ))}
+      </ul>
+    </details>
+  )
+}
+
+export default CoreSettings

packages/freesewing.shared/components/workbench/menu/core-settings/setting.js

@@ -0,0 +1,169 @@
+import { linkClasses, Chevron } from 'shared/components/navigation/primary.js'
+import PctDegOption from 'shared/components/workbench/inputs/design-option-pct-deg'
+import CountOption from 'shared/components/workbench/inputs/design-option-count'
+import ListSetting from './core-setting-list'
+import { formatMm, formatPercentage, optionType } from 'shared/utils.js'
+
+const settings = {
+  locale: props => {
+    return (
+      <span className="text-secondary">
+        {props.app.t(`i18n.${props.gist.settings.locale}`)}
+      </span>
+    )
+  },
+  pct: props => {
+    const val = (typeof props.gist?.options?.[props.option] === 'undefined')
+      ? props.pattern.config.options[props.option].pct/100
+      : props.gist.options[props.option]
+    return (
+      <span className={
+        val=== props.pattern.config.options[props.option].pct/100
+          ? 'text-secondary'
+          : 'text-accent'
+      }>
+        {formatPercentage(val)}
+        {props.pattern.config.options[props.option]?.toAbs
+          ? ' | ' +formatMm(props.pattern.config.options[props.option]?.toAbs(val, props.gist))
+          : null
+        }
+      </span>
+    )
+  },
+  bool: props => {
+    const dflt = props.pattern.config.options[props.option].bool
+    const current = props.gist?.options?.[props.option]
+    return (
+      <span className={
+        (dflt==current || typeof current === 'undefined')
+          ? 'text-secondary'
+          : 'text-accent'
+      }>
+        {props.gist?.options?.[props.option]
+          ? props.app.t('app.yes')
+          : props.app.t('app.no')
+        }
+      </span>
+    )
+  },
+  count: props => {
+    const dflt = props.pattern.config.options[props.option].count
+    const current = props.gist?.options?.[props.option]
+    return (dflt==current || typeof current === 'undefined')
+      ? <span className="text-secondary">{dflt}</span>
+      : <span className="text-accent">{current}</span>
+  },
+  deg: props => {
+    const dflt = props.pattern.config.options[props.option].deg
+    const current = props.gist?.options?.[props.option]
+    return (dflt==current || typeof current === 'undefined')
+      ? <span className="text-secondary">{dflt}&deg;</span>
+      : <span className="text-accent">{current}&deg;</span>
+  },
+  mm: props => {
+    return <p>No mm val yet</p>
+  },
+  constant: props => {
+    return <p>No constant val yet</p>
+  },
+}
+
+const Tmp = props => <p>not yet</p>
+
+const inputs = {
+  locale: props => <ListSetting
+    {...props}
+    list={props.app.languages.map(key => ({
+      key,
+      title: props.app.t(`i18n.${key}`)
+    }))}
+  />,
+}
+
+
+const Setting = props => {
+  const Input = inputs[props.setting]
+  const Value = settings[props.setting]
+
+  const toggleBoolean = () => {
+    const dflt = props.pattern.config.options[props.option].bool
+    const current = props.gist?.options?.[props.option]
+    if (typeof current === 'undefined')
+      props.updateGist(['options', props.option], !dflt)
+    else props.unsetGist(['options', props.option])
+  }
+
+  if (props.setting === 'bool') return (
+    <li className="flex flex-row">
+      <button className={`
+        flex flex-row
+        w-full
+        justify-between
+        px-2
+        text-left
+        text-base-content
+        sm:text-neutral-content
+        items-center
+        pr-6
+      `} onClick={toggleBoolean}>
+        <div className={`
+          grow pl-2 border-l-2
+          ${linkClasses}
+          hover:border-secondary
+          sm:hover:border-secondary-focus
+          text-base-content sm:text-neutral-content
+        `}>
+          <span className={`
+            text-3xl mr-2 inline-block p-0 leading-3
+            translate-y-3
+          `}>
+            <>&deg;</>
+          </span>
+          <span>
+            { props.app.t(`options.${props.pattern.config.name}.${props.option}.title`) }
+          </span>
+        </div>
+        <Value setting={props.setting} {...props} />
+      </button>
+    </li>
+
+  )
+
+  return (
+    <li className="flex flex-row">
+      <details className="grow">
+        <summary className={`
+          flex flex-row
+          px-2
+          text-base-content
+          sm:text-neutral-content
+          hover:cursor-row-resize
+          items-center
+        `}>
+          <div className={`
+            grow pl-2 border-l-2
+            ${linkClasses}
+            hover:border-secondary
+            sm:hover:border-secondary-focus
+            text-base-content sm:text-neutral-content
+          `}>
+            <span className={`
+              text-3xl inline-block p-0 leading-3 px-2
+              translate-y-3
+            `}>
+              <>&deg;</>
+            </span>
+            <span>
+              { props.app.t(`settings.${props.setting}.title`) }
+            </span>
+          </div>
+          <Value setting={props.setting} {...props} />
+          <Chevron w={6} m={3}/>
+        </summary>
+        <Input {...props} />
+      </details>
+    </li>
+  )
+}
+
+export default Setting

packages/freesewing.shared/components/workbench/menu/index.js

@@ -1,11 +1,17 @@
 import ModesMenu from './modes.js'
 import DesignOptions from './design-options'
+import CoreSettings from './core-settings'
 
 const WorkbenchMenu = props => {
   return (
     <nav className="smmax-w-96 grow mb-12">
       <ModesMenu {...props} />
-      {props.mode === 'draft' && <DesignOptions {...props} />}
+      {props.mode === 'draft' && (
+        <>
+          <DesignOptions {...props} />
+          <CoreSettings {...props} />
+        </>
+      )}
     </nav>
   )
 }

packages/freesewing.shared/components/wrappers/workbench.js

@@ -6,21 +6,20 @@ import Measurements, { Input } from 'shared/components/workbench/measurements/in
 import LabDraft from 'shared/components/workbench/draft/index.js'
 import set from 'lodash.set'
 import unset from 'lodash.unset'
+import defaultSettings from 'shared/components/workbench/default-settings.js'
+
 
 // Generates a default pattern gist to start from
-const defaultGist = (pattern, language='en') => ({
+const defaultGist = (pattern, language='en') => {
+  const gist = {
   design: pattern.config.name,
   version: pattern.config.version,
-  settings: {
+  settings: defaultSettings
-    sa: 0,
-    complete: true,
-    paperless: false,
-    units: 'metric',
-    locale: language,
-    margin: 2,
-    debug: true,
   }
-})
+  if (language) gist.settings.locale = language
+
+  return gist
+}
 
 const hasRequiredMeasurements = (pattern, gist) => {
   for (const m of pattern.config.measurements) {