Improved actor editing units.

pages/actors/@actorId/edit/+Page.vue

@@ -68,7 +68,7 @@
 					<div class="item-header">
 						<div class="key">{{ item.label || item.key }}</div>
 
-						<div class="item-actions">
+						<div class="item-actions noselect">
 							<Icon
 								v-if="!item.forced"
 								icon="pencil5"
@@ -153,32 +153,66 @@
 									class="input"
 									:disabled="!editing.has(item.key)"
 								>
-									<option value="imperial">Imperial</option>
 									<option value="metric">Metric</option>
+									<option value="imperial">Imperial</option>
 								</select>
 							</div>
 
-							<span class="figure-bust">
+							<span class="figure-height">
 								<div class="value-section">
-									<span class="value-label">Bust</span>
+									<span class="value-label">Height</span>
 
-									<select
-										v-model="edits[item.key].bust"
-										class="select input"
-										placeholder="Bust"
-										:disabled="!editing.has(item.key)"
-									>
-										<option
-											:key="`${item.key}-bust-unknown`"
-											:value="null"
-										/>
+									<span v-if="sizeUnits === 'metric'">
+										<input
+											v-model="edits[item.key].metricHeight"
+											type="number"
+											class="input"
+											:disabled="!editing.has(item.key)"
+										> cm
+									</span>
 
-										<option
-											v-for="bust in bustSizes[figureUnits]"
-											:key="`${item.key}-bust-${bust}`"
-											:value="Array.isArray(bust) ? bust[0] : bust"
-										>{{ Array.isArray(bust) ? bust.join('/') : bust }}</option>
-									</select>
+									<span v-if="sizeUnits === 'imperial'">
+										<input
+											v-model="edits[item.key].imperialHeight[0]"
+											type="number"
+											class="input"
+											:disabled="!editing.has(item.key)"
+										> ft
+
+										<input
+											v-model="edits[item.key].imperialHeight[1]"
+											type="number"
+											class="input"
+											:disabled="!editing.has(item.key)"
+										> in
+									</span>
+								</div>
+							</span>
+
+							<span class="figure-weight">
+								<div class="value-section">
+									<span class="value-label">Weight</span>
+
+									<span v-if="sizeUnits === 'metric'">
+										<input
+											v-model="edits[item.key].metricWeight"
+											type="number"
+											class="input"
+											:disabled="!editing.has(item.key)"
+										> kg
+									</span>
+
+									<span v-if="sizeUnits === 'imperial'">
+										<input
+											v-model="edits[item.key].imperialWeight"
+											type="number"
+											class="input"
+											:disabled="!editing.has(item.key)"
+										>
+
+										<template v-if="sizeUnits === 'imperial'">&nbsp;lbs</template>
+										<template v-else>&nbsp;kg</template>
+									</span>
 								</div>
 							</span>
 						</div>
@@ -210,20 +244,10 @@
 							</div>
 
 							<div class="value-section">
-								<span class="value-label">State</span>
+								<span class="value-label">Place</span>
 
 								<input
-									v-model="edits[item.key].state"
-									class="string input"
-									:disabled="!editing.has(item.key)"
-								>
-							</div>
-
-							<div class="value-section">
-								<span class="value-label">City</span>
-
-								<input
-									v-model="edits[item.key].city"
+									v-model="edits[item.key].place"
 									class="string input"
 									:disabled="!editing.has(item.key)"
 								>
@@ -560,27 +584,53 @@
 							<div class="value-section">
 								<span class="value-label">Penis length</span>
 
-								<input
-									v-model="edits[item.key].penisLength"
-									type="number"
-									class="volume input"
-									min="1"
-									max="20"
-									:disabled="!editing.has(item.key)"
-								>
+								<span v-if="penisUnits === 'metric'">
+									<input
+										v-model="edits[item.key].metricLength"
+										type="number"
+										class="volume input"
+										min="1"
+										max="30"
+										:disabled="!editing.has(item.key)"
+									> cm
+								</span>
+
+								<span v-if="penisUnits === 'imperial'">
+									<input
+										v-model="edits[item.key].imperialLength"
+										type="number"
+										class="volume input"
+										min="1"
+										max="30"
+										:disabled="!editing.has(item.key)"
+									> inch
+								</span>
 							</div>
 
 							<div class="value-section">
 								<span class="value-label">Penis girth</span>
 
-								<input
-									v-model="edits[item.key].penisGirth"
-									type="number"
-									class="volume input"
-									min="1"
-									max="20"
-									:disabled="!editing.has(item.key)"
-								>
+								<span v-if="penisUnits === 'metric'">
+									<input
+										v-model="edits[item.key].metricGirth"
+										type="number"
+										class="volume input"
+										min="1"
+										max="30"
+										:disabled="!editing.has(item.key)"
+									> cm
+								</span>
+
+								<span v-if="penisUnits === 'imperial'">
+									<input
+										v-model="edits[item.key].imperialGirth"
+										type="number"
+										class="volume input"
+										min="1"
+										max="30"
+										:disabled="!editing.has(item.key)"
+									> inch
+								</span>
 							</div>
 
 							<div class="value-section">
@@ -690,7 +740,7 @@ const user = pageContext.user;
 const countries = pageContext.pageProps.countries;
 const actor = ref(pageContext.pageProps.actor);
 
-console.log(actor.value);
+// console.log(actor.value);
 
 const topCountries = [
 	'AU',
@@ -705,26 +755,6 @@ const topCountries = [
 
 const sortedCountries = countries.toSorted((countryA, countryB) => topCountries.indexOf(countryB.alpha2) - topCountries.indexOf(countryA.alpha2));
 
-/*
-const cupSizes = [
-	'A', 'AA',
-	'B',
-	'C',
-	'D', 'DD', 'DDD',
-	'E',
-	'F', 'FF',
-	'G', 'GG',
-	'H', 'HH',
-	'J', 'JJ',
-	'K', 'KK',
-	'L',
-	'M',
-	'N',
-	'O',
-	'P',
-];
-*/
-
 const cupSizes = {
 	us: ['AA', 'A', 'B', 'C', 'D', ['DD', 'E'], ['DDD', 'F'], 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P'], // United States
 	uk: ['AA', 'A', 'B', 'C', 'D', 'DD', 'E', 'F', 'FF', 'G', 'GG', 'H', 'HH', 'J', 'JJ', 'K', 'KK'], // United Kingdom
@@ -778,28 +808,42 @@ const fields = computed(() => [
 			: null,
 		inline: true,
 	},
+	{
+		key: 'ethnicity',
+		type: 'string',
+		value: actor.value.ethnicity,
+		suggestions: [
+			'Asian',
+			'Black',
+			'Indian',
+			'Latina',
+			'White',
+		],
+	},
 	{
 		key: 'origin',
 		type: 'place',
 		value: {
-			...actor.value.origin,
 			country: actor.value.origin?.country?.alpha2 || null,
+			place: [actor.value.origin?.city, actor.value.origin?.state].filter(Boolean).join(', '),
 		},
 	},
 	{
 		key: 'residence',
 		type: 'place',
 		value: {
-			...actor.value.residence,
 			country: actor.value.residence?.country?.alpha2 || null,
+			place: [actor.value.residence?.city, actor.value.residence?.state].filter(Boolean).join(', '),
 		},
 	},
 	{
 		key: 'size',
 		type: 'size',
 		value: {
-			height: actor.value.height?.metric,
-			weight: actor.value.weight?.metric,
+			metricHeight: actor.value.height?.metric,
+			metricWeight: actor.value.weight?.metric,
+			imperialHeight: actor.value.height?.imperial || [],
+			imperialWeight: actor.value.weight?.imperial,
 		},
 	},
 	{
@@ -900,8 +944,10 @@ const fields = computed(() => [
 		key: 'penis',
 		type: 'penis',
 		value: {
-			penisLength: actor.value.penisLength?.imperial,
-			penisGirth: actor.value.penisGirth?.imperial,
+			metricLength: actor.value.penisLength?.metric,
+			metricGirth: actor.value.penisGirth?.metric,
+			imperialLength: actor.value.penisLength?.imperial,
+			imperialGirth: actor.value.penisGirth?.imperial,
 			isCircumcised: actor.value.isCircumcised,
 		},
 	},
@@ -943,27 +989,49 @@ function setAvatar(avatarId) {
 const keyMap = {
 	origin: {
 		country: 'originCountry',
-		state: 'originState',
-		city: 'originCity',
+		place: 'originPlace',
 	},
 	residence: {
 		country: 'residenceCountry',
-		state: 'residenceState',
-		city: 'residenceCity',
+		place: 'residencePlace',
 	},
 };
 
+const groupMap = {
+	penisLength: 'penis',
+	penisGirth: 'penis',
+	height: 'size',
+	weight: 'size',
+};
+
 async function submit() {
 	try {
 		await post('/revisions/actors', {
 			actorId: actor.value.id,
-			edits: Object.fromEntries(Array.from(editing.value).flatMap((key) => {
-				if (edits.value[key] && typeof edits.value[key] === 'object') {
-					return Object.entries(edits.value[key]).map(([valueKey, value]) => [keyMap[key]?.[valueKey] || valueKey, value]);
-				}
+			edits: {
+				...Object.fromEntries(Array.from(editing.value).flatMap((key) => {
+					if (edits.value[key] && typeof edits.value[key] === 'object') {
+						return Object.entries(edits.value[key]).map(([valueKey, value]) => [keyMap[key]?.[valueKey] || valueKey, value]);
+					}
 
-				return [[key, edits.value[key]]];
-			})),
+					return [[key, edits.value[key]]];
+				})),
+				...Object.fromEntries(Object.entries({
+					height: sizeUnits.value === 'imperial' ? edits.value.size.imperialHeight : edits.value.size.metricHeight,
+					weight: sizeUnits.value === 'imperial' ? edits.value.size.imperialWeight : edits.value.size.metricWeight,
+					penisLength: penisUnits.value === 'imperial' ? edits.value.penis.imperialLength : edits.value.penis.metricLength,
+					penisGirth: penisUnits.value === 'imperial' ? edits.value.penis.imperialGirth : edits.value.penis.metricGirth,
+				}).filter(([key]) => editing.value.has(groupMap[key] || key))),
+				metricHeight: undefined,
+				metricWeight: undefined,
+				imperialHeight: undefined,
+				imperialWeight: undefined,
+				metricLength: undefined,
+				metricGirth: undefined,
+				imperialLength: undefined,
+				imperialGirth: undefined,
+			},
+			sizeUnits: sizeUnits.value,
 			figureUnits: figureUnits.value,
 			penisUnits: penisUnits.value,
 			comment: comment.value,