Skip to content

Commit

Permalink
refact: update style for exercise forms (#59)
Browse files Browse the repository at this point in the history
  • Loading branch information
@crlssn
crlssn authored Nov 21, 2024
1 parent 6dceffb commit 3d4a991
Show file tree
Hide file tree
Showing 2 changed files with 48 additions and 114 deletions.
33 changes: 1 addition & 32 deletions apps/web/src/views/Exercises/CreateExercise.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,19 +11,6 @@ const resError = ref('')
const resOK = ref(false)
const rest = ref(0)
const restOptions = [
{ value: 30, label: '30 seconds' },
{ value: 60, label: '1 minute' },
{ value: 90, label: '1 minute 30 seconds' },
{ value: 120, label: '2 minutes' },
{ value: 150, label: '2 minutes 30 seconds' },
{ value: 180, label: '3 minutes' },
{ value: 210, label: '3 minutes 30 seconds' },
{ value: 240, label: '4 minutes' },
{ value: 270, label: '4 minutes 30 seconds' },
{ value: 300, label: '5 minutes' },
]
async function createExercise() {
const request = new CreateExerciseRequest({
name: name.value,
Expand Down Expand Up @@ -88,30 +75,12 @@ async function createExercise() {
v-model="label"
id="label"
type="text"
placeholder="Optional"
class="block w-full rounded-md border-0 bg-white px-3 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
/>
</div>
</div>

<div>
<div>
<label for="rest" class="block text-xs font-semibold text-gray-900 uppercase">
Rest between sets
</label>
</div>
<div class="mt-2">
<select
v-model="rest"
id="rest"
class="block w-full rounded-md border-0 bg-white px-3 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
>
<option :value="0" selected>Unspecified</option>
<option v-for="rest in restOptions" :key="rest.value" :value="rest.value">
{{ rest.label }}
</option>
</select>
</div>
</div>
<AppButton text="Create" type="submit" colour="primary" class="mt-6">Save Exercise</AppButton>
</form>
</div>
Expand Down
129 changes: 47 additions & 82 deletions apps/web/src/views/Exercises/UpdateExercise.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,24 +11,9 @@ const name = ref('')
const label = ref('')
const resError = ref('')
const resOK = ref(false)
const rest = ref(0)
const route = useRoute()
console.log(route.params.id)
const restOptions = [
{ value: 30, label: '30 seconds' },
{ value: 60, label: '1 minute' },
{ value: 90, label: '1 minute 30 seconds' },
{ value: 120, label: '2 minutes' },
{ value: 150, label: '2 minutes 30 seconds' },
{ value: 180, label: '3 minutes' },
{ value: 210, label: '3 minutes 30 seconds' },
{ value: 240, label: '4 minutes' },
{ value: 270, label: '4 minutes 30 seconds' },
{ value: 300, label: '5 minutes' },
]
async function loadExercise() {
const request = new GetExerciseRequest({
id: route.params.id as string,
Expand Down Expand Up @@ -57,11 +42,11 @@ onMounted(() => {
async function updateExercise() {
const request = new UpdateExerciseRequest({
exercise: new Exercise({
id: route.params.id[0],
id: route.params.id as string,
name: name.value,
label: label.value,
}),
updateMask: new FieldMask({ paths: ['name', 'label', 'rest_between_sets'] }),
updateMask: new FieldMask({ paths: ['name', 'label'] }),
})
try {
await ExerciseClient.update(request)
Expand All @@ -79,75 +64,55 @@ async function updateExercise() {
</script>

<template>
<form class="space-y-6" method="POST" @submit.prevent="updateExercise">
<div class="divide-y divide-gray-200 overflow-hidden rounded-lg bg-white shadow mb-4">
<div class="px-4 py-4 sm:px-6">
<span class="font-semibold">Update Exercise</span>
</div>
<div class="px-4 py-4 sm:px-6">
<div
v-if="resOK"
class="bg-green-200 rounded-md py-3 px-5 mb-2 text-sm/6 text-green-800"
role="alert"
>
Exercise updated
</div>
<div
v-if="resError"
class="bg-red-200 rounded-md py-3 px-5 mb-2 text-sm/6 text-red-800"
role="alert"
>
{{ resError }}
</div>
<div>
<label for="name" class="block text-sm/6 font-medium text-gray-900">Name</label>
<div class="mt-2">
<input
v-model="name"
type="text"
required
class="block w-full rounded-md border-0 bg-white/5 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
/>
</div>
<div class="">
<div
v-if="resOK"
class="border-2 border-green-400 bg-green-300 rounded-md py-3 px-5 mb-4 text-sm text-green-800 font-medium"
role="alert"
>
Exercise updated successfully.
</div>
<div
v-if="resError"
class="border-2 border-red-400 bg-red-300 mb-4 rounded-md py-3 px-5 mb-2 text-sm text-red-800"
role="alert"
>
{{ resError }}
</div>
<form class="space-y-6" @submit.prevent="updateExercise">
<div>
<label for="name" class="block text-xs font-semibold text-gray-900 uppercase">Name</label>
<div class="mt-2">
<input
v-model="name"
id="name"
type="text"
required
class="block w-full rounded-md border-0 bg-white px-3 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
/>
</div>
</div>

<div>
<div>
<div>
<label for="label" class="block text-sm/6 font-medium text-gray-900">Label</label>
</div>
<div class="mt-2">
<input
v-model="label"
id="label"
type="text"
class="block w-full rounded-md border-0 bg-white/5 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
/>
</div>
<label for="label" class="block text-xs font-semibold text-gray-900 uppercase">
Label
</label>
</div>

<div>
<div>
<label for="rest" class="block text-sm/6 font-medium text-gray-900">
Rest between sets
</label>
</div>
<div class="mt-2">
<select
v-model="rest"
id="rest"
class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
>
<option :value="0" selected>Unspecified</option>
<option v-for="rest in restOptions" :key="rest.value" :value="rest.value">
{{ rest.label }}
</option>
</select>
</div>
<div class="mt-2">
<input
v-model="label"
id="label"
type="text"
placeholder="Optional"
class="block w-full rounded-md border-0 bg-white px-3 py-3 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm/6"
/>
</div>
</div>
<div class="px-4 py-4 sm:px-6">
<AppButton colour="primary" type="submit">Update Exercise</AppButton>
</div>
</div>
</form>

<AppButton text="Create" type="submit" colour="primary" class="mt-6"
>Update Exercise</AppButton
>
</form>
</div>
</template>

0 comments on commit 3d4a991

Please sign in to comment.