Simon/romm
1
0
Fork 0
mirror of https://github.com/rommapp/romm.git synced 2026-06-28 06:46:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Complete components

Browse Source
This commit is contained in:
Georges-Antoine Assi
2024-01-02 19:34:30 -05:00
parent f69d8ee58c
commit 669190d2ba
12 changed files with 52 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/Drawer/Base.vue
View File

@@ -12,7 +12,7 @@ import RailFooter from "@/components/Drawer/Footer.vue";
// Props
const platforms = storePlatforms();
const auth = storeAuth();
const drawer = ref(undefined);
const drawer = ref(false);
const open = ref(["Platforms", "Library", "Settings"]);
const rail = ref(localStorage.getItem("rail") == "true");
@@ -23,7 +23,7 @@ emitter?.on("toggleDrawer", () => {
});
emitter?.on("toggleDrawerRail", () => {
rail.value = !rail.value;
localStorage.setItem("rail", rail.value);
localStorage.setItem("rail", rail.value.toString());
});
</script>

4
frontend/src/components/Gallery/AppBar/FilterBar.vue
View File

@@ -18,12 +18,12 @@ onMounted(() => {
function clearFilter() {
galleryFilter.set("");
emitter?.emit("filter");
emitter?.emit("filter", null);
}
const filterRoms = debounce(() => {
galleryFilter.set(filterValue.value);
emitter?.emit("filter");
emitter?.emit("filter", null);
}, 500);
</script>

4
frontend/src/components/Gallery/FabMenu/Base.vue
View File

@@ -21,7 +21,7 @@ const route = useRoute();
socket.on("scan:scanning_rom", ({ id }) => {
const rom = romsStore.selectedRoms.find((r) => r.id === id);
romsStore.removeFromSelection(rom);
if (rom) romsStore.removeFromSelection(rom);
});
socket.on("scan:done", () => {
@@ -34,7 +34,7 @@ socket.on("scan:done", () => {
socket.disconnect();
});
socket.on("scan:done_ko", (msg) => {
socket.on("scan:done_ko", (msg: string) => {
scanning.set(false);
emitter?.emit("snackbarShow", {
msg: `Scan couldn't be completed. Something went wrong: ${msg}`,

2
frontend/src/components/Game/Card/Base.vue
View File

@@ -9,7 +9,7 @@ const emit = defineEmits(["selectRom"]);
const romsStore = storeRoms();
// Functions
function selectRom(event) {
function selectRom(event: MouseEvent) {
if (!props.selected) {
romsStore.addToSelection(props.rom);
} else {

14
frontend/src/components/Game/Card/Cover.vue
View File

@@ -17,17 +17,17 @@ const downloadStore = storeDownload();
const romsStore = storeRoms();
const card = ref();
let timeout;
let timeout: ReturnType<typeof setTimeout>;
// Functions
function onSelectRom(event) {
function onSelectRom(event: MouseEvent) {
if (!event.ctrlKey && !event.shiftKey) {
event.preventDefault();
emit("selectRom", event);
}
}
function onNavigate(event) {
function onNavigate(event: MouseEvent) {
if (
event.ctrlKey ||
event.shiftKey ||
@@ -39,8 +39,8 @@ function onNavigate(event) {
}
}
function onTouchStart(event) {
card.value.$el.addEventListener("contextmenu", (event) => {
function onTouchStart(event: TouchEvent) {
card.value.$el.addEventListener("contextmenu", (event: Event) => {
event.preventDefault();
});
romsStore.isTouchScreen(true);
@@ -103,7 +103,7 @@ function onTouchEnd() {
</v-expand-transition>
<v-chip-group class="ml-2 pt-0 text-shadow position-absolute flags">
<v-chip
v-if="rom.regions.filter((i) => i).length > 0"
v-if="rom.regions.filter((i: string) => i).length > 0"
:title="`Regions: ${rom.regions.join(', ')}`"
class="bg-chip px-2 py-3"
density="compact"
@@ -113,7 +113,7 @@ function onTouchEnd() {
</span>
</v-chip>
<v-chip
v-if="rom.languages.filter((i) => i).length > 0"
v-if="rom.languages.filter((i: string) => i).length > 0"
:title="`Languages: ${rom.languages.join(', ')}`"
class="bg-chip px-2 py-3"
density="compact"

42
frontend/src/components/Game/DataTable/Base.vue
View File

@@ -1,11 +1,12 @@
<script setup lang="ts">
import { ref, inject } from "vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { VDataTable } from "vuetify/labs/VDataTable";
import api from "@/services/api";
import storeDownload from "@/stores/download";
import storeRoms from "@/stores/roms";
import storeRoms, { type Rom } from "@/stores/roms";
import storeAuth from "@/stores/auth";
import { VDataTable } from "vuetify/labs/VDataTable";
import AdminMenu from "@/components/AdminMenu/Base.vue";
import { regionToEmoji, languageToEmoji } from "@/utils";
@@ -52,11 +53,12 @@ const HEADERS = [
sortable: true,
key: "revision",
},
{ align: "end", key: "actions", sortable: false },
];
{ title: "", align: "end", key: "actions", sortable: false },
] as const;
const PER_PAGE_OPTIONS = [
{ value: -1, title: "$vuetify.dataFooter.itemsPerPageAll" },
];
] as const;
// Props
const location = window.location.origin;
@@ -68,9 +70,9 @@ const auth = storeAuth();
const romsPerPage = ref(-1);
// Functions
function rowClick(_, row) {
function rowClick(_: Event, row: any) {
router.push(
`/platform/${row.item.selectable.platform_slug}/${row.item.selectable.id}`
`/platform/${row.item.value.platform_slug}/${row.item.value.id}`
);
}
</script>
@@ -91,40 +93,40 @@ function rowClick(_, row) {
<v-avatar :rounded="0">
<v-progress-linear
color="romm-accent-1"
:active="downloadStore.value.includes(item.selectable.id)"
:active="downloadStore.value.includes(item.value.id)"
:indeterminate="true"
absolute
/>
<v-img
:src="`/assets/romm/resources/${item.selectable.path_cover_s}`"
:lazy-src="`/assets/romm/resources/${item.selectable.path_cover_s}`"
:src="`/assets/romm/resources/${item.value.path_cover_s}`"
:lazy-src="`/assets/romm/resources/${item.value.path_cover_s}`"
min-height="150"
/>
</v-avatar>
</template>
<template v-slot:item.file_size_bytes="{ item }">
<span>
{{ item.selectable.file_size }}
{{ item.selectable.file_size_units }}
{{ item.value.file_size }}
{{ item.value.file_size_units }}
</span>
</template>
<template v-slot:item.regions="{ item }">
<span class="px-1" v-for="region in item.selectable.regions">
<span class="px-1" v-for="region in item.value.regions">
{{ regionToEmoji(region) }}
</span>
</template>
<template v-slot:item.languages="{ item }">
<span class="px-1" v-for="language in item.selectable.languages">
<span class="px-1" v-for="language in item.value.languages">
{{ languageToEmoji(language) }}
</span>
</template>
<template v-slot:item.actions="{ item }">
<template v-if="item.selectable.multi">
<template v-if="item.value.multi">
<v-btn
class="my-1"
rounded="0"
@click.stop="api.downloadRom({ rom: item.selectable })"
:disabled="downloadStore.value.includes(item.selectable.id)"
@click.stop="api.downloadRom({ rom: item.value })"
:disabled="downloadStore.value.includes(item.value.id)"
download
size="small"
variant="text"
@@ -136,7 +138,7 @@ function rowClick(_, row) {
class="my-1"
rounded="0"
@click.stop=""
:href="`${location}${item.selectable.download_path}`"
:href="`${location}${item.value.download_path}`"
download
size="small"
variant="text"
@@ -163,7 +165,7 @@ function rowClick(_, row) {
><v-icon>mdi-dots-vertical</v-icon></v-btn
>
</template>
<admin-menu :rom="item.selectable" />
<admin-menu :rom="item.value" />
</v-menu>
</template>
</v-data-table>

6
frontend/src/components/Settings/Config/PlatformBindingCard.vue
View File

@@ -34,7 +34,7 @@ const platformsBinding = heartbeat.data.CONFIG.PLATFORMS_BINDING;
<v-card-text class="pa-1">
<v-row no-gutters>
<v-col cols="6" sm="3" md="2" lg="2" v-for="(platform, fs_platform) in platformsBinding">
<v-col cols="6" sm="3" md="2" lg="2" v-for="platform in Object.keys(platformsBinding)">
<v-card-text class="bg-terciary ma-1 py-1 pl-1 pr-3">
<v-row class="align-center" no-gutters>
<v-col cols="5" sm="4" md="5" lg="4">
@@ -43,8 +43,8 @@ const platformsBinding = heartbeat.data.CONFIG.PLATFORMS_BINDING;
</v-avatar>
</v-col>
<v-col cols="7" sm="8" md="7" lg="8">
<div class="bg-primary pa-2 text-caption text-truncate" :title="fs_platform">
<span clas="pa-1">{{ fs_platform }}</span>
<div class="bg-primary pa-2 text-caption text-truncate" :title="platformsBinding[platform]">
<span clas="pa-1">{{ platformsBinding[platform] }}</span>
</div>
</v-col>
</v-row>

2
frontend/src/components/Settings/General/Interface/InterfaceOptions.vue
View File

@@ -7,7 +7,7 @@ const groupRoms = ref(isUndefined(storedGroupRoms) ? true : storedGroupRoms ===
// Functions
function toggleGroupRoms() {
localStorage.setItem("settings.groupRoms", groupRoms.value);
localStorage.setItem("settings.groupRoms", groupRoms.value.toString());
}
</script>

6
frontend/src/components/Settings/General/Theme/ThemeCard.vue
View File

@@ -5,17 +5,17 @@ import { themes, autoThemeKey } from "@/styles/themes";
import ThemeOption from "@/components/Settings/General/Theme/ThemeOption.vue";
const theme = useTheme();
const storedTheme = parseInt(localStorage.getItem("settings.theme"));
const storedTheme = parseInt(localStorage.getItem("settings.theme") ?? "");
const selectedTheme = ref(isNaN(storedTheme) ? autoThemeKey : storedTheme);
// Functions
function toggleTheme() {
localStorage.setItem("settings.theme", selectedTheme.value);
localStorage.setItem("settings.theme", selectedTheme.value.toString());
const mediaMatch = window.matchMedia("(prefers-color-scheme: dark)");
if (selectedTheme.value === autoThemeKey) {
theme.global.name.value = mediaMatch.matches ? "dark" : "light";
} else {
} else if (isKeyof(selectedTheme.value, themes)) {
theme.global.name.value = themes[selectedTheme.value];
}
}

2
frontend/src/stores/auth.ts
View File

@@ -25,7 +25,7 @@ export default defineStore("auth", {
},
actions: {
setUser(user: User) {
setUser(user: User | null) {
this.user = user;
},
setEnabled(enabled: boolean) {

7
frontend/src/stores/heartbeat.ts
View File

@@ -27,6 +27,13 @@ export type Heartbeat = {
CONFIG: {
EXCLUDED_MULTI_FILES: string[];
EXCLUDED_SINGLE_EXT: string[];
EXCLUDED_SINGLE_FILES: string[];
EXCLUDED_MULTI_PARTS_FILES: string[];
EXCLUDED_MULTI_PARTS_EXT: string[];
EXCLUDED_PLATFORMS: string[];
PLATFORMS_BINDING: {
[key: string]: string;
};
};
};

2
frontend/tsconfig.json
View File

@@ -3,7 +3,7 @@
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"types": ["node", "file-saver"],
"types": ["node", "file-saver", "lodash", "js-cookie"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",