Skip to content

Commit

Permalink
feat: i18n
Browse files Browse the repository at this point in the history
  • Loading branch information
SilianZ committed Oct 22, 2024
1 parent 113f984 commit 40da341
Show file tree
Hide file tree
Showing 13 changed files with 354 additions and 160 deletions.
69 changes: 67 additions & 2 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"primevue": "^4.0.7",
"tailwindcss-primeui": "^0.3.4",
"vue": "^3.4.37",
"vue-i18n": "^10.0.4",
"vue-request": "^2.0.4",
"vue-router": "^4.4.5",
"vue-turnstile": "^1.0.11"
Expand Down
113 changes: 76 additions & 37 deletions src/App.vue
Original file line number Diff line number Diff line change
@@ -1,35 +1,45 @@
<script setup lang="ts">
import { RouterView } from "vue-router";
import { onMounted, ref } from "vue";
import { onMounted, ref, computed, watch } from "vue";
import Toast from "primevue/toast";
import Menubar from "primevue/menubar";
import { verifyAdmin } from "./api";
import Button from "primevue/button";
import Select from "primevue/select";
import "./styles/styles.css";
const items = ref([
import { useI18n } from "vue-i18n";
const { t, locale } = useI18n();
const changeLocale = (lang: string) => {
localStorage.setItem("locale", lang);
locale.value = lang;
};
const items = computed(() => [
{
label: "Homepage",
label: t("menubar.homepage"),
icon: "pi pi-home",
url: "/",
},
{
label: "Reservation",
label: t("menubar.reservation.reservation"),
icon: "pi pi-calendar-clock",
items: [
{
label: "Application Form",
label: t("menubar.reservation.form"),
icon: "pi pi-pen-to-square",
url: "/reservation/create",
},
{
label: "Reservation Status",
label: t("menubar.reservation.status"),
icon: "pi pi-chart-bar",
url: "/reservation/status",
},
],
},
{
label: "Maintenance Report",
label: t("menubar.maintenance"),
icon: "pi pi-wrench",
url: "/maintenance",
},
Expand All @@ -45,6 +55,19 @@ const toggleColorScheme = () => {
iconClass.value = color == "white" ? "pi-sun" : "pi-moon";
};
const localeOptions = ref([
{
key: "简体中文",
code: "zh_cn",
},
{
key: "English",
code: "en_us",
},
]);
const selectedLocale = ref("");
const isAdmin = ref(false);
const signOut = () => {
Expand All @@ -57,7 +80,14 @@ const signIn = () => {
window.location.href = "/admin/login";
};
watch(
() => selectedLocale.value,
(newLocale) => changeLocale(newLocale),
);
onMounted(async () => {
selectedLocale.value = localStorage.getItem("locale") || "en_us";
console.log(selectedLocale.value)
const color =
localStorage.getItem("color") ||
(window.matchMedia("(prefers-color-scheme: dark)").matches
Expand All @@ -74,16 +104,16 @@ onMounted(async () => {
if (await verifyAdmin(token)) {
isAdmin.value = true;
items.value.push({
label: "Admin",
label: t("menubar.admin.admin"),
icon: "pi pi-user",
items: [
{
label: "Reservation Management",
label: t("menubar.admin.reservation"),
icon: "pi pi-list-check",
url: "/admin/reservations",
},
{
label: "Policy Settings",
label: t("menubar.admin.policy"),
icon: "pi pi-building-columns",
url: "/admin/policy",
},
Expand All @@ -101,17 +131,35 @@ onMounted(async () => {
<img src="./assets/logo.svg" class="m-1" style="height: 25px" />
</template>
<template #end>
<Button v-if="!isAdmin" @click="signIn()" severity="success">
<i class="pi pi-sign-in"></i>
<span class="text-sm">Login</span>
<Select
:options="localeOptions"
v-model="selectedLocale"
optionValue="code"
optionLabel="key"
>
<template #dropdownicon>
<i class="pi pi-globe" />
</template>
</Select>
<Button
v-if="!isAdmin"
@click="signIn()"
severity="success"
class="ms-2 me-2"
icon="pi pi-sign-in"
:label="$t('menubar.login')"
>
</Button>
<Button v-if="isAdmin" @click="signOut()" severity="danger">
<i class="pi pi-sign-out"></i>
<span class="text-sm">Logout</span>
<Button
v-if="isAdmin"
@click="signOut()"
severity="danger"
class="ms-2 me-2"
icon="pi pi-sign-out"
:label="$t('menubar.logout')"
>
</Button>
<Button @click="toggleColorScheme()">
<i :class="`pi ${iconClass}`"></i>
<span class="text-sm">Color Mode</span>
<Button @click="toggleColorScheme()" :icon="`pi ${iconClass}`">
</Button>
</template>
</Menubar>
Expand All @@ -120,32 +168,21 @@ onMounted(async () => {
<RouterView />
</div>
<footer id="footer">
<p>Powered by and created by MAKERs' with ♥.</p>
<p>{{ $t("footer.line1") }}</p>
<p>
Copyright &copy; 2024 The co-author of HFI Utility Center. All
rights reserved.
</p>
<p>
This website is under
<a href="https://www.gnu.org/licenses/agpl-3.0.html"
>AGPL-3.0 License</a
>
and open-sourced on
<a href="https://github.com/SilianZ/hfi-utility-center"
><i class="pi pi-github"></i> GitHub</a
>.
{{ $t("footer.line2") }}
</p>
<i18n-t tag="p" keypath="footer.line3" scope="global">
<a href="https://www.gnu.org/licenses/agpl-3.0.html">{{ $t("footer.license") }}</a>
<a href="https://github.com/SilianZ/hfi-utility-center"><i class="pi pi-github"></i> GitHub</a>
</i18n-t>
</footer>
</template>

<style scoped>
#body {
padding: 1rem 2rem 4rem 2rem;
}
.p-button {
margin-left: 3px;
margin-right: 3px;
}
#footer {
text-align: center;
Expand All @@ -154,8 +191,10 @@ onMounted(async () => {
background-color: var(--p-zinc-600);
}
button {
button,
.p-select {
border-radius: 0.5rem;
height: 40px;
}
:deep(.p-menubar) {
Expand Down
73 changes: 73 additions & 0 deletions src/assets/i18n/en_us.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
{
"home": {
"title": "HFI Utility Center",
"subtitle": "by MAKERs'",
"button": {
"form": "Application Form",
"status": "Reservation Status"
}
},
"menubar": {
"homepage": "Homepage",
"reservation": {
"reservation": "Reservation",
"form": "Application Form",
"status": "Reservation Status"
},
"maintenance": "Maintenance Report",
"admin": {
"admin": "Admin",
"reservation": "Reservation Management",
"policy": "Policy Settings"
},
"login": "Login",
"logout": "Logout"
},
"footer": {
"license": "GNU AGPL-3.0 License",
"line1": "Powered by and created by MAKERs' with ♥.",
"line2": "Copyright © 2024 The co-author of HFI Utility Center. All rights reserved.",
"line3": "This website is under {0} and open-sourced on {1}."
},
"campus": {
"shipai": "Shipai Campus",
"knowledgecity": "Knowledge City Campus",
"office": "Office"
},
"toast": {
"error": "Error",
"required_field": "Please fill out the required field!"
},
"application": {
"rule": {
"rule": "Classroom Regulations",
"1": "◆ Do not bring food and drinks into the study area. Students are responsible for keeping the study room clean and tidy.",
"2": "◆ Students should take good care of their personal belongings (such as wallets, phones, and computers). Valuable items should be carried or locked in a secure place. When leaving the classroom, students should take their valuable items with them, as the school does not assume any responsibility for their safekeeping.",
"3": "◆ After leaving public areas, students should take their personal belongings with them. The administrative office will periodically clean the area, and the school will not be responsible for any lost items.",
"4": "◆ Students should consciously maintain the cleanliness of the classroom and public order.",
"5": "◆ Please take care of and use the teaching equipment responsibly. If any problems or losses are discovered, contact the administrative office as soon as possible. If a student causes equipment loss or maliciously damages the equipment, the student will be responsible for compensation.",
"6": "◆ When students leave the classroom, they should ensure that all electrical equipment (such as air conditioners, fans, and lights) is turned off, and the remote control is returned to the designated location.",
"7": "◆ Students are not allowed to move teaching equipment without permission.",
"8": "◆ Do not reserve seats in any way. If students need to leave their seats, they should take their personal belongings with them, or place their books in their bags and put them under the desk without affecting other students' use of the seat. The duty teacher will periodically inspect the area, and any reserved items found will be removed or taken away to make the seat available for others.",
"9": "◆ Be mindful of public decency and personal image, and do not lie down on benches or sofas.",
"10": "◆ Do not speak loudly in public places, and set your phone to silent mode. Please go outside to make phone calls.",
"11": "◆ It is forbidden to pull power sources privately or use high-powered electrical appliances. Do not move fire safety equipment without permission.",
"12": "◆ At any time, the study area must not be used for non-study-related activities (including but not limited to video games on phones/computers, board games, watching variety shows or movies, etc.). Violation of these rules will be handled according to the 'Student Violation Management Regulations' based on the actual situation."
},
"application": "Application Form",
"personal_info": "Personal Information",
"name": "Name",
"class": "Class",
"campus": "Campus",
"id": "Student ID",
"email": "E-mail",
"room_info": "Room Information",
"room": "Room",
"date": "Date",
"start_time": "Start Time",
"end_time": "End Time",
"reason": "Reason",
"checkbox": "I will follow the {0}.",
"submit": "Submit"
}
}
Loading

0 comments on commit 40da341

Please sign in to comment.