mirrors/homebox
1
0
Fork 1
mirror of https://github.com/hay-kot/homebox.git synced 2024-11-24 17:45:41 +00:00
Code Issues Projects Releases Packages Wiki Activity

feat: pwa support (#366)

Browse source 
* add PWA support

* fix broken URLs for query

* remove unused variable

* restore authURL
This commit is contained in:
Hayden 2023-03-23 10:27:12 -08:00 committed by GitHub
parent be6b5c9c56
commit 0f8db862b4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
8 changed files with 1656 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
docs/docs/tips-tricks.md
View file

@ -39,7 +39,7 @@ In some cases you may want to skip some items such as consumables, or items that
Homebox has a built-in QR code generator that can be used to generate QR codes for your items. This is useful for tracking items with a mobile device. You can generate a QR code for any item by clicking the QR code icon in the top right of the item details page. The same can be done for the Labels and Locations page. Currently support is limited to generating one off QR Codes. Homebox has a built-in QR code generator that can be used to generate QR codes for your items. This is useful for tracking items with a mobile device. You can generate a QR code for any item by clicking the QR code icon in the top right of the item details page. The same can be done for the Labels and Locations page. Currently support is limited to generating one off QR Codes.
However, the API endpoint is available for generating QR codes on the fly for any item (or any other data) if you provide a valid API key in the query parameters. An example url would look like `/api/v1/qrcode?data=https://homebox.fly.dev/item/{uuid}&access_token={api_key}`. Currently the easiest way to get an API token is to use one from an existing URL of the QR Code in the API key, but this will be improved in the future. However, the API endpoint is available for generating QR codes on the fly for any item (or any other data) if you provide a valid API key in the query parameters. An example url would look like `/api/v1/qrcode?data=https://homebox.fly.dev/item/{uuid}`. Currently the easiest way to get an API token is to use one from an existing URL of the QR Code in the API key, but this will be improved in the future.
:octicons-tag-24: v0.8.0 :octicons-tag-24: v0.8.0

4
frontend/app.vue
View file

@ -2,6 +2,10 @@
<NuxtLayout> <NuxtLayout>
<Html lang="en" :data-theme="theme || 'homebox'" /> <Html lang="en" :data-theme="theme || 'homebox'" />
<Link rel="icon" type="image/svg" href="/favicon.svg"></Link> <Link rel="icon" type="image/svg" href="/favicon.svg"></Link>
<Link rel="apple-touch-icon" href="/apple-touch-icon.png" size="180x180" />
<Link rel="mask-icon" href="/mask-icon.svg" color="#5b7f67" />
<Meta name="theme-color" content="#5b7f67" />
<Link rel="manifest" href="/manifest.webmanifest" />
<NuxtPage /> <NuxtPage />
</NuxtLayout> </NuxtLayout>
</template> </template>

37
frontend/nuxt.config.ts
View file

@ -3,7 +3,7 @@ import { defineNuxtConfig } from "nuxt/config";
// https://v3.nuxtjs.org/api/configuration/nuxt.config // https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({ export default defineNuxtConfig({
ssr: false, ssr: false,
modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "@vueuse/nuxt"], modules: ["@nuxtjs/tailwindcss", "@pinia/nuxt", "@vueuse/nuxt", "@vite-pwa/nuxt"],
nitro: { nitro: {
devProxy: { devProxy: {
"/api": { "/api": {
@ -13,4 +13,39 @@ export default defineNuxtConfig({
}, },
}, },
css: ["@/assets/css/main.css"], css: ["@/assets/css/main.css"],
pwa: {
injectRegister: "script",
injectManifest: {
swSrc: "sw.js",
},
devOptions: {
// Enable to troubleshoot during development
enabled: true,
},
manifest: {
name: "Homebox",
short_name: "Homebox",
description: "Home Inventory App",
theme_color: "#5b7f67",
start_url: "/home",
icons: [
{
src: "pwa-192x192.png",
sizes: "192x192",
type: "image/png",
},
{
src: "pwa-512x512.png",
sizes: "512x512",
type: "image/png",
},
{
src: "pwa-512x512.png",
sizes: "512x512",
type: "image/png",
purpose: "any maskable",
},
],
},
},
}); });

1
frontend/package.json
View file

@ -20,6 +20,7 @@
"@types/markdown-it": "^12.2.3", "@types/markdown-it": "^12.2.3",
"@typescript-eslint/eslint-plugin": "^5.36.2", "@typescript-eslint/eslint-plugin": "^5.36.2",
"@typescript-eslint/parser": "^5.36.2", "@typescript-eslint/parser": "^5.36.2",
"@vite-pwa/nuxt": "^0.0.7",
"eslint": "^8.23.0", "eslint": "^8.23.0",
"eslint-config-prettier": "^8.5.0", "eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1", "eslint-plugin-prettier": "^4.2.1",

4
frontend/pages/reports/label-generator.vue
View file

@ -158,8 +158,6 @@
location: string; location: string;
}; };
const api = useUserApi();
function fmtAssetID(aid: number | string) { function fmtAssetID(aid: number | string) {
aid = aid.toString(); aid = aid.toString();
@ -178,7 +176,7 @@
const data = `${origin}/a/${assetID}`; const data = `${origin}/a/${assetID}`;
return `/api/v1/qrcode?data=${encodeURIComponent(data)}&access_token=${api.items.attachmentToken}`; return `/api/v1/qrcode?data=${encodeURIComponent(data)}`;
} }
function getItem(n: number): LabelData { function getItem(n: number): LabelData {

1615
frontend/pnpm-lock.yaml
View file

File diff suppressed because it is too large Load diff

BIN
frontend/public/pwa-192x192.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.9 KiB

BIN
frontend/public/pwa-512x512.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 26 KiB