Added icons, better navigation, and working translation.

This commit is contained in:
Andrew Lalis 2023-01-24 19:52:55 +01:00
parent a0ffb9c166
commit 0d14c31f6d
20 changed files with 261 additions and 105 deletions

View File

@ -15,7 +15,10 @@
version="1.1"
id="svg8"
inkscape:version="0.92.5 (2060ec1f9f, 2020-04-08)"
sodipodi:docname="icon.svg">
sodipodi:docname="icon.svg"
inkscape:export-filename="/home/andrew/github-andrewlalis/Gymboard/design/icon_128.png"
inkscape:export-xdpi="384"
inkscape:export-ydpi="384">
<defs
id="defs2" />
<sodipodi:namedview
@ -26,15 +29,15 @@
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="22.4"
inkscape:cx="16.756057"
inkscape:cy="13.672431"
inkscape:cx="2.8035079"
inkscape:cy="15.519297"
inkscape:document-units="px"
inkscape:current-layer="layer1"
showgrid="false"
units="px"
inkscape:window-width="1920"
inkscape:window-height="1009"
inkscape:window-x="0"
inkscape:window-height="1049"
inkscape:window-x="1920"
inkscape:window-y="0"
inkscape:window-maximized="1" />
<metadata
@ -45,7 +48,7 @@
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title></dc:title>
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
@ -55,55 +58,55 @@
id="layer1"
transform="translate(0,-288.53333)">
<rect
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.96639419;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect815"
width="1.5535041"
height="2.5136223"
x="0.8639006"
y="290.76736"
rx="0.26458335" />
width="1.8913983"
height="3.0603466"
x="0.13103379"
y="290.25571"
rx="0.32213143" />
<rect
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.96639419;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect819"
width="3.1289527"
height="0.90185839"
x="2.6688571"
y="291.52304" />
width="3.809514"
height="1.0980167"
x="2.3285766"
y="291.17575" />
<rect
rx="0.26458335"
y="290.76736"
x="6.049262"
height="2.5136223"
width="1.5535041"
rx="0.32213143"
y="290.25571"
x="6.4442344"
height="3.0603466"
width="1.8913983"
id="rect821"
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
style="opacity:1;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.96639419;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
y="292.4281"
x="2.8526049"
height="0.58447266"
width="2.761457"
y="292.27765"
x="2.5522902"
height="0.71159816"
width="3.3620865"
id="rect823"
style="opacity:1;fill:#646464;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
style="opacity:1;fill:#646464;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.96639419;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#898989;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
style="opacity:1;fill:#898989;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.96639419;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect825"
width="2.4071047"
height="0.58447266"
x="3.0297811"
y="293.01257" />
width="2.9306607"
height="0.71159816"
x="2.7680032"
y="292.98926" />
<rect
y="293.59705"
x="3.201052"
height="0.58447266"
width="2.064563"
y="293.70084"
x="2.9765263"
height="0.71159816"
width="2.5136149"
id="rect827"
style="opacity:1;fill:#a8a8a8;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
style="opacity:1;fill:#a8a8a8;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.96639419;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1" />
<rect
style="opacity:1;fill:#d2d2d2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.79374999;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
style="opacity:1;fill:#d2d2d2;fill-opacity:1;fill-rule:evenodd;stroke:none;stroke-width:0.96639419;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1"
id="rect829"
width="1.6865873"
height="0.58447266"
x="3.3900397"
y="294.18152" />
width="2.0534277"
height="0.71159816"
x="3.2066195"
y="294.41245" />
</g>
</svg>

Before

Width:  |  Height:  |  Size: 4.1 KiB

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 99 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 859 B

After

Width:  |  Height:  |  Size: 375 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.0 KiB

After

Width:  |  Height:  |  Size: 516 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 723 B

Binary file not shown.

Before

Width:  |  Height:  |  Size: 9.4 KiB

After

Width:  |  Height:  |  Size: 872 B

View File

@ -4,12 +4,6 @@ const api = axios.create({
baseURL: 'http://localhost:8080',
});
export interface GymIdentifiable {
countryCode: string;
cityShortName: string;
shortName: string;
}
export type Gym = {
countryCode: string;
countryName: string;
@ -48,7 +42,3 @@ export async function getGym(
streetAddress: d.streetAddress,
};
}
export function getGymRoute(gym: GymIdentifiable): string {
return `/g/${gym.countryCode}/${gym.cityShortName}/${gym.shortName}`;
}

View File

@ -12,8 +12,8 @@
</template>
<script setup lang="ts">
import {getGymRoute} from 'src/api/gymboard-api';
import {GymSearchResult} from 'src/api/gymboard-search';
import {getGymRoute} from 'src/router/gym-routing';
interface Props {
gym: GymSearchResult

View File

@ -0,0 +1,9 @@
<template>
<div class="row justify-center">
<div class="col-xs-12 col-sm-8 col-md-6 col-lg-4">
<slot>
<p>Form content.</p>
</slot>
</div>
</div>
</template>

View File

@ -1,7 +1,18 @@
// This is just an example,
// so you can safely delete all default props below
export default {
failed: 'Action failed',
success: 'Action was successful'
mainLayout: {
language: 'Language',
pages: 'Pages'
},
gymPage: {
home: 'Home',
submit: 'Submit',
leaderboard: 'Leaderboard',
submitPage: {
exercise: 'Exercise',
weight: 'Weight',
reps: 'Repetitions',
date: 'Date',
submit: 'Submit'
}
}
};

View File

@ -1,5 +1,7 @@
import enUS from './en-US';
import nlNL from './nl-NL';
export default {
'en-US': enUS
'en-US': enUS,
'nl-NL': nlNL
};

View File

@ -0,0 +1,18 @@
export default {
mainLayout: {
language: 'Taal',
pages: 'Pagina\'s'
},
gymPage: {
home: 'Thuis',
submit: 'Indienen',
leaderboard: 'Scorebord',
submitPage: {
exercise: 'Oefening',
weight: 'Gewicht',
reps: 'Repetities',
date: 'Datum',
submit: 'Sturen'
}
}
}

View File

@ -14,6 +14,23 @@
<q-toolbar-title>
<router-link to="/" style="text-decoration: none; color: inherit;">Gymboard</router-link>
</q-toolbar-title>
<q-select
v-model="i18n.locale.value"
:options="localeOptions"
:label="$t('mainLayout.language')"
dense
borderless
emit-value
map-options
options-dense
filled
hide-bottom-space
dark
options-dark
label-color="white"
options-selected-class="text-grey"
style="min-width: 150px"
/>
</q-toolbar>
</q-header>
@ -26,7 +43,7 @@
<q-item-label
header
>
Pages
{{ $t('mainLayout.pages') }}
</q-item-label>
<q-item clickable>Gyms</q-item>
<q-item clickable>Global Leaderboard</q-item>
@ -39,21 +56,19 @@
</q-layout>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
<script setup lang="ts">
import { ref } from 'vue';
import {useI18n} from 'vue-i18n';
export default defineComponent({
name: 'MainLayout',
const i18n = useI18n({useScope: 'global'});
const localeOptions = [
{ value: 'en-US', label: 'English' },
{ value: 'nl-NL', label: 'Nederlands' }
];
setup () {
const leftDrawerOpen = ref(false)
const leftDrawerOpen = ref(false);
return {
leftDrawerOpen,
toggleLeftDrawer () {
leftDrawerOpen.value = !leftDrawerOpen.value
}
}
}
});
function toggleLeftDrawer () {
leftDrawerOpen.value = !leftDrawerOpen.value
}
</script>

View File

@ -2,7 +2,13 @@
<q-page>
<h3>Gym Home Page</h3>
<p>
Put stuff here.
Maybe put an image of the gym here?
</p>
<p>
Put a description of the gym here?
</p>
<p>
Maybe show a snapshot of some recent lifts?
</p>
</q-page>
</template>

View File

@ -1,30 +1,38 @@
<template>
<StandardCenteredPage v-if="gym">
<h3 class="q-my-sm">{{ gym.displayName }}</h3>
<q-btn-group>
<q-btn label="Home" :to="baseGymPath"/>
<q-btn label="Submit" :to="baseGymPath + '/submit'"/>
<q-btn label="Leaderboard" :to="baseGymPath + '/lb'"/>
<h3 class="q-my-md text-center">{{ gym.displayName }}</h3>
<q-btn-group spread square push>
<q-btn
:label="$t('gymPage.home')"
:to="getGymRoute(gym)"
:color="homePageSelected ? 'primary' : 'secondary'"
/>
<q-btn
:label="$t('gymPage.submit')"
:to="getGymRoute(gym) + '/submit'"
:color="submitPageSelected ? 'primary' : 'secondary'"
/>
<q-btn
:label="$t('gymPage.leaderboard')"
:to="getGymRoute(gym) + '/leaderboard'"
:color="leaderboardPageSelected ? 'primary' : 'secondary'"
/>
</q-btn-group>
<router-view/>
</StandardCenteredPage>
<q-page v-if="notFound">
<h3>Gym not found! Oh no!!!</h3>
<router-link to="/">Back</router-link>
</q-page>
</template>
<script setup lang="ts">
import { onMounted, ref, Ref } from 'vue';
import {computed, onMounted, ref, Ref} from 'vue';
import { getGym, Gym } from 'src/api/gymboard-api';
import { useRoute } from 'vue-router';
import {useRoute, useRouter} from 'vue-router';
import StandardCenteredPage from 'components/StandardCenteredPage.vue';
import {getGymRoute} from 'src/router/gym-routing';
const route = useRoute();
const baseGymPath = `/g/${route.params.countryCode}/${route.params.cityShortName}/${route.params.gymShortName}`;
const router = useRouter();
const gym: Ref<Gym | undefined> = ref<Gym>();
const notFound: Ref<boolean | undefined> = ref<boolean>();
// Once the component is mounted, load the gym that we're at.
onMounted(async () => {
@ -34,10 +42,13 @@ onMounted(async () => {
route.params.cityShortName as string,
route.params.gymShortName as string
);
notFound.value = false;
} catch (error) {
console.error(error);
notFound.value = true;
await router.push('/');
}
});
const homePageSelected = computed(() => gym.value && getGymRoute(gym.value) === route.fullPath);
const submitPageSelected = computed(() => gym.value && route.fullPath === getGymRoute(gym.value) + '/submit');
const leaderboardPageSelected = computed(() => gym.value && route.fullPath === getGymRoute(gym.value) + '/leaderboard');
</script>

View File

@ -1,31 +1,91 @@
<template>
<q-page v-if="gym">
<h3>Submit Your Lift for {{ gym.displayName }}</h3>
<q-form>
<q-form @submit="onSubmitted">
<SlimForm>
<div class="row">
<q-select
:options="exercises"
v-model="submissionModel.exercise"
:label="$t('gymPage.submitPage.exercise')"
class="col-12"
/>
</div>
<div class="row">
<q-input
:label="$t('gymPage.submitPage.weight')"
type="number"
v-model="submissionModel.weight"
class="col-8"
/>
<q-select
:options="weightUnits"
v-model="submissionModel.weightUnit"
class="col-4 q-pl-sm"
/>
</div>
<div class="row">
<q-input
:label="$t('gymPage.submitPage.reps')"
type="number"
v-model="submissionModel.repCount"
class="col-12"
/>
</div>
<div class="row">
<q-input
v-model="submissionModel.date"
type="date"
:label="$t('gymPage.submitPage.date')"
class="col-12"
/>
</div>
<div class="row">
<q-btn
:label="$t('gymPage.submitPage.submit')"
color="primary"
type="submit"
class="q-mt-sm"
/>
</div>
</SlimForm>
</q-form>
</q-page>
</template>
<script setup lang="ts">
import {onMounted, ref, Ref} from 'vue';
import {getGym, Gym} from 'src/api/gymboard-api';
import {useRoute} from 'vue-router';
import {Gym} from 'src/api/gymboard-api';
import {getGymFromRoute} from 'src/router/gym-routing';
import SlimForm from 'components/SlimForm.vue';
// interface Props {
// gym: Gym
// }
// const props = defineProps<Props>();
const route = useRoute();
const gym: Ref<Gym | undefined> = ref<Gym>();
let submissionModel = ref({
exercise: null,
weight: null,
weightUnit: 'Kg',
repCount: 1,
date: new Date().toLocaleDateString('en-CA')
});
const weightUnits = ['Kg', 'Lbs'];
const exercises = ['Bench Press', 'Squat', 'Deadlift'];
// TODO: Make it possible to pass the gym to this via props instead.
onMounted(async () => {
try {
gym.value = await getGym(
route.params.countryCode as string,
route.params.cityShortName as string,
route.params.gymShortName as string
);
gym.value = await getGymFromRoute();
} catch (error) {
console.error(error);
}
})
});
function onSubmitted() {
console.log('submitted');
}
</script>
<style scoped>

View File

@ -0,0 +1,31 @@
import {useRoute} from 'vue-router';
import {getGym, Gym} from 'src/api/gymboard-api';
/**
* Any object that contains the properties needed to identify a single gym.
*/
export interface GymRoutable {
countryCode: string;
cityShortName: string;
shortName: string
}
/**
* Gets the route that can be used to navigate to a particular gym's page.
* @param gym The gym to get the route for.
*/
export function getGymRoute(gym: GymRoutable): string {
return `/gyms/${gym.countryCode}/${gym.cityShortName}/${gym.shortName}`;
}
/**
* Gets the gym that's referred to by the current route's path params.
*/
export async function getGymFromRoute(): Promise<Gym> {
const route = useRoute();
return await getGym(
route.params.countryCode as string,
route.params.cityShortName as string,
route.params.gymShortName as string
);
}

View File

@ -13,12 +13,12 @@ const routes: RouteRecordRaw[] = [
children: [
{ path: '', component: IndexPage },
{
path: 'g/:countryCode/:cityShortName/:gymShortName',
path: 'gyms/:countryCode/:cityShortName/:gymShortName',
component: GymPage,
children: [
{ path: '', component: GymHomePage },
{ path: 'submit', component: GymSubmissionPage },
{ path: 'lb', component: GymLeaderboardsPage }
{ path: 'leaderboard', component: GymLeaderboardsPage }
]
}
],