johanels/photoprism
1
0
Fork 0
mirror of https://github.com/photoprism/photoprism.git synced 2025-12-12 00:34:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Frontend: Reformat JS code

Browse Source
This commit is contained in:
Michael Mayer
2020-12-18 14:42:36 +01:00
parent 29145e77b6
commit 003412736e
37 changed files with 3715 additions and 3420 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
frontend/.eslintrc.js
View File

@@ -1,23 +1,67 @@
module.exports = {
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
mocha: true,
},
extends: 'eslint:recommended',
parserOptions: {
sourceType: 'module',
},
rules: {
'comma-dangle': ['error', 'always-multiline'],
indent: ['error', 4, { "SwitchCase": 1 }],
'linebreak-style': ['error', 'unix'],
quotes: ['error', 'double'], // Easier for Go developers!
semi: ['error', 'always'],
'no-unused-vars': ['warn'],
'no-console': 0,
'no-prototype-builtins': 0,
env: {
browser: true,
commonjs: true,
es6: true,
node: true,
mocha: true,
},
extends: [
"eslint:recommended",
"plugin:vue/recommended",
"plugin:prettier-vue/recommended",
// Do not add `'prettier/vue'` if you don't want to use prettier for `<template>` blocks
"prettier/vue",
],
settings: {
"prettier-vue": {
// Settings for how to process Vue SFC Blocks
SFCBlocks: {
template: false,
script: true,
style: true,
},
// Use prettierrc for prettier options or not (default: `true`)
usePrettierrc: true,
// Set the options for `prettier.getFileInfo`.
// @see https://prettier.io/docs/en/api.html#prettiergetfileinfofilepath-options
fileInfoOptions: {
// Path to ignore file (default: `'.prettierignore'`)
// Notice that the ignore file is only used for this plugin
ignorePath: ".testignore",
// Process the files in `node_modules` or not (default: `false`)
withNodeModules: false,
},
},
},
parserOptions: {
sourceType: "module",
},
rules: {
// 'comma-dangle': ['error', 'always-multiline'],
indent: ["error", 2, { SwitchCase: 1 }],
"linebreak-style": ["error", "unix"],
quotes: ["off", "double"], // Easier for Go developers!
semi: ["error", "always"],
"no-unused-vars": ["warn"],
"no-console": 0,
"no-prototype-builtins": 0,
"prettier-vue/prettier": [
"error",
{
// Override all options of `prettier` here
// @see https://prettier.io/docs/en/options.html
printWidth: 100,
singleQuote: false,
semi: true,
trailingComma: "es5",
htmlWhitespaceSensitivity: "strict",
},
],
},
};

218
frontend/karma.conf.js
View File

@@ -34,126 +34,130 @@ const findChrome = require("chrome-finder");
process.env.CHROME_BIN = findChrome();
module.exports = (config) => {
config.set({
logLevel: config.LOG_ERROR,
config.set({
logLevel: config.LOG_ERROR,
webpackMiddleware: {
stats: "errors-only",
},
webpackMiddleware: {
stats: "errors-only",
},
frameworks: ["mocha"],
frameworks: ["mocha"],
browsers: ["LocalChrome"],
browsers: ["LocalChrome"],
customLaunchers: {
LocalChrome: {
base: "ChromeHeadless",
flags: ["--disable-translate", "--disable-extensions", "--no-sandbox", "--disable-web-security", "--disable-dev-shm-usage"],
},
},
files: [
"node_modules/@babel/polyfill/dist/polyfill.js",
"node_modules/regenerator-runtime/runtime/runtime.js",
{pattern: "tests/unit/**/*_test.js", watched: false},
customLaunchers: {
LocalChrome: {
base: "ChromeHeadless",
flags: [
"--disable-translate",
"--disable-extensions",
"--no-sandbox",
"--disable-web-security",
"--disable-dev-shm-usage",
],
},
},
// Preprocess through webpack
preprocessors: {
"tests/unit/**/*_test.js": ["webpack"],
files: [
"node_modules/@babel/polyfill/dist/polyfill.js",
"node_modules/regenerator-runtime/runtime/runtime.js",
{ pattern: "tests/unit/**/*_test.js", watched: false },
],
// Preprocess through webpack
preprocessors: {
"tests/unit/**/*_test.js": ["webpack"],
},
reporters: ["progress", "html", "coverage-istanbul"],
htmlReporter: {
outputFile: "tests/unit.html",
},
coverageIstanbulReporter: {
// reports can be any that are listed here: https://github.com/istanbuljs/istanbuljs/tree/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib
reports: ["html", "lcovonly", "text-summary"],
// base output directory. If you include %browser% in the path it will be replaced with the karma browser name
dir: path.join(__dirname, "coverage"),
// Combines coverage information from multiple browsers into one report rather than outputting a report
// for each browser.
combineBrowserReports: true,
// if using webpack and pre-loaders, work around webpack breaking the source path
fixWebpackSourcePaths: true,
// Omit files with no statements, no functions and no branches from the report
skipFilesWithNoCoverage: true,
// Most reporters accept additional config options. You can pass these through the `report-config` option
"report-config": {
// all options available at: https://github.com/istanbuljs/istanbuljs/blob/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib/html/index.js#L135-L137
html: {
// outputs the report in ./coverage/html
subdir: "html",
},
},
reporters: ["progress", "html", "coverage-istanbul"],
htmlReporter: {
outputFile: "tests/unit.html",
// enforce percentage thresholds
// anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode
thresholds: {
emitWarning: true, // set to `true` to not fail the test command when thresholds are not met
// thresholds for all files
global: {
//statements: 90,
lines: 90,
//branches: 90,
//functions: 90,
},
coverageIstanbulReporter: {
// reports can be any that are listed here: https://github.com/istanbuljs/istanbuljs/tree/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib
reports: ["html", "lcovonly", "text-summary"],
// base output directory. If you include %browser% in the path it will be replaced with the karma browser name
dir: path.join(__dirname, "coverage"),
// Combines coverage information from multiple browsers into one report rather than outputting a report
// for each browser.
combineBrowserReports: true,
// if using webpack and pre-loaders, work around webpack breaking the source path
fixWebpackSourcePaths: true,
// Omit files with no statements, no functions and no branches from the report
skipFilesWithNoCoverage: true,
// Most reporters accept additional config options. You can pass these through the `report-config` option
"report-config": {
// all options available at: https://github.com/istanbuljs/istanbuljs/blob/aae256fb8b9a3d19414dcf069c592e88712c32c6/packages/istanbul-reports/lib/html/index.js#L135-L137
html: {
// outputs the report in ./coverage/html
subdir: "html",
},
// thresholds per file
each: {
//statements: 90,
lines: 90,
//branches: 90,
//functions: 90,
overrides: {
"src/common/viewer.js": {
lines: 0,
functions: 0,
},
// enforce percentage thresholds
// anything under these percentages will cause karma to fail with an exit code of 1 if not running in watch mode
thresholds: {
emitWarning: true, // set to `true` to not fail the test command when thresholds are not met
// thresholds for all files
global: {
//statements: 90,
lines: 90,
//branches: 90,
//functions: 90,
},
// thresholds per file
each: {
//statements: 90,
lines: 90,
//branches: 90,
//functions: 90,
overrides: {
"src/common/viewer.js": {
lines: 0,
functions: 0,
},
},
},
},
verbose: false, // output config used by istanbul for debugging
},
},
},
webpack: {
mode: "development",
verbose: false, // output config used by istanbul for debugging
},
resolve: {
modules: [
path.join(__dirname, "src"),
path.join(__dirname, "node_modules"),
path.join(__dirname, "tests/unit"),
],
alias: {
vue: "vue/dist/vue.min.js",
},
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: file => (
/node_modules/.test(file)
),
query: {
presets: ["@babel/preset-env"],
compact: false,
},
},
],
},
webpack: {
mode: "development",
resolve: {
modules: [
path.join(__dirname, "src"),
path.join(__dirname, "node_modules"),
path.join(__dirname, "tests/unit"),
],
alias: {
vue: "vue/dist/vue.min.js",
},
},
module: {
rules: [
{
test: /\.js$/,
loader: "babel-loader",
exclude: (file) => /node_modules/.test(file),
query: {
presets: ["@babel/preset-env"],
compact: false,
},
},
],
},
},
singleRun: true,
});
singleRun: true,
});
};

152
frontend/package-lock.json generated
View File

@@ -1926,6 +1926,62 @@
"@vue/shared": "3.0.2"
}
},
"@vue/component-compiler-utils": {
"version": "3.2.0",
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.2.0.tgz",
"integrity": "sha512-lejBLa7xAMsfiZfNp7Kv51zOzifnb29FwdnMLa96z26kXErPFioSf9BMcePVIQ6/Gc6/mC0UrPpxAWIHyae0vw==",
"requires": {
"consolidate": "^0.15.1",
"hash-sum": "^1.0.2",
"lru-cache": "^4.1.2",
"merge-source-map": "^1.1.0",
"postcss": "^7.0.14",
"postcss-selector-parser": "^6.0.2",
"prettier": "^1.18.2",
"source-map": "~0.6.1",
"vue-template-es2015-compiler": "^1.9.0"
},
"dependencies": {
"consolidate": {
"version": "0.15.1",
"resolved": "https://registry.npmjs.org/consolidate/-/consolidate-0.15.1.tgz",
"integrity": "sha512-DW46nrsMJgy9kqAbPt5rKaCr7uFtpo4mSUvLHIUbJEjm0vo+aY5QLwBUq3FK4tRnJr/X0Psc0C4jf/h+HtXSMw==",
"requires": {
"bluebird": "^3.1.1"
}
},
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ="
},
"lru-cache": {
"version": "4.1.5",
"resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
"integrity": "sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==",
"requires": {
"pseudomap": "^1.0.2",
"yallist": "^2.1.2"
}
},
"prettier": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
"integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==",
"optional": true
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
},
"yallist": {
"version": "2.1.2",
"resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
"integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
}
}
},
"@vue/shared": {
"version": "3.0.2",
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.0.2.tgz",
@@ -5040,6 +5096,11 @@
}
}
},
"eslint-config-prettier": {
"version": "7.0.0",
"resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-7.0.0.tgz",
"integrity": "sha512-8Y8lGLVPPZdaNA7JXqnvETVC7IiVRgAP6afQu9gOQRn90YY3otMNh+x7Vr2vMePQntF+5erdSUBqSzCmU/AxaQ=="
},
"eslint-config-standard": {
"version": "14.1.1",
"resolved": "https://registry.npmjs.org/eslint-config-standard/-/eslint-config-standard-14.1.1.tgz",
@@ -5381,6 +5442,18 @@
}
}
},
"eslint-plugin-prettier-vue": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-prettier-vue/-/eslint-plugin-prettier-vue-2.1.1.tgz",
"integrity": "sha512-B9nYJCwf6508tc36fBU6a7QRwmp688Z8q6BPDvHLftR5KccqVNRkCUwPYjHXouw1m6NzdcRZraJ0A0jXwtNCTQ==",
"requires": {
"@vue/component-compiler-utils": "^3.1.2",
"chalk": "^4.0.0",
"prettier": "^1.18.2 || ^2.0.0",
"prettier-linter-helpers": "^1.0.0",
"vue-template-compiler": "^2.0.0"
}
},
"eslint-plugin-promise": {
"version": "4.2.1",
"resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-4.2.1.tgz",
@@ -5391,6 +5464,27 @@
"resolved": "https://registry.npmjs.org/eslint-plugin-standard/-/eslint-plugin-standard-4.1.0.tgz",
"integrity": "sha512-ZL7+QRixjTR6/528YNGyDotyffm5OQst/sGxKDwGb9Uqs4In5Egi4+jbobhqJoyoCM6/7v/1A5fhQ7ScMtDjaQ=="
},
"eslint-plugin-vue": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.3.0.tgz",
"integrity": "sha512-4rc9xrZgwT4aLz3XE6lrHu+FZtDLWennYvtzVvvS81kW9c65U4DUzQQWAFjDCgCFvN6HYWxi7ueEtxZVSB+f0g==",
"requires": {
"eslint-utils": "^2.1.0",
"natural-compare": "^1.4.0",
"semver": "^7.3.2",
"vue-eslint-parser": "^7.3.0"
},
"dependencies": {
"semver": {
"version": "7.3.4",
"resolved": "https://registry.npmjs.org/semver/-/semver-7.3.4.tgz",
"integrity": "sha512-tCfb2WLjqFAtXn4KEdxIhalnRtoKFN7nAwj0B3ZXCbQloV2tq5eDbcTmT68JJD3nRJq24/XgxtQKFIpQdtvmVw==",
"requires": {
"lru-cache": "^6.0.0"
}
}
}
},
"eslint-rule-docs": {
"version": "1.1.213",
"resolved": "https://registry.npmjs.org/eslint-rule-docs/-/eslint-rule-docs-1.1.213.tgz",
@@ -5708,6 +5802,11 @@
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q=="
},
"fast-diff": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
"integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
},
"fast-glob": {
"version": "3.2.4",
"resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.4.tgz",
@@ -8026,7 +8125,6 @@
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/merge-source-map/-/merge-source-map-1.1.0.tgz",
"integrity": "sha512-Qkcp7P2ygktpMPh2mCQZaf3jhN6D3Z/qVZHSdWvQ+2Ef5HgRAPBO57A77+ENm0CPx2+1Ce/MYKi3ymqdfuqibw==",
"optional": true,
"requires": {
"source-map": "^0.6.1"
},
@@ -8034,8 +8132,7 @@
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
"optional": true
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g=="
}
}
},
@@ -10597,9 +10694,17 @@
"integrity": "sha1-1PRWKwzjaW5BrFLQ4ALlemNdxtw="
},
"prettier": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
"integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew=="
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.2.1.tgz",
"integrity": "sha512-PqyhM2yCjg/oKkFPtTGUojv7gnZAoG80ttl45O6x2Ug/rMJw4wcc9k6aaf2hibP7BGVCCM33gZoGjyvt9mm16Q=="
},
"prettier-linter-helpers": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz",
"integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==",
"requires": {
"fast-diff": "^1.1.2"
}
},
"pretty-error": {
"version": "2.1.2",
@@ -13473,6 +13578,36 @@
"resolved": "https://registry.npmjs.org/vue/-/vue-2.6.12.tgz",
"integrity": "sha512-uhmLFETqPPNyuLLbsKz6ioJ4q7AZHzD8ZVFNATNyICSZouqP2Sz0rotWQC8UNBF6VGSCs5abnKJoStA6JbCbfg=="
},
"vue-eslint-parser": {
"version": "7.3.0",
"resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.3.0.tgz",
"integrity": "sha512-n5PJKZbyspD0+8LnaZgpEvNCrjQx1DyDHw8JdWwoxhhC+yRip4TAvSDpXGf9SWX6b0umeB5aR61gwUo6NVvFxw==",
"requires": {
"debug": "^4.1.1",
"eslint-scope": "^5.0.0",
"eslint-visitor-keys": "^1.1.0",
"espree": "^6.2.1",
"esquery": "^1.0.1",
"lodash": "^4.17.15"
},
"dependencies": {
"acorn": {
"version": "7.4.1",
"resolved": "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz",
"integrity": "sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A=="
},
"espree": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz",
"integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==",
"requires": {
"acorn": "^7.1.1",
"acorn-jsx": "^5.2.0",
"eslint-visitor-keys": "^1.1.0"
}
}
}
},
"vue-fullscreen": {
"version": "2.1.6",
"resolved": "https://registry.npmjs.org/vue-fullscreen/-/vue-fullscreen-2.1.6.tgz",
@@ -13637,6 +13772,11 @@
"uniq": "^1.0.1"
}
},
"prettier": {
"version": "1.19.1",
"resolved": "https://registry.npmjs.org/prettier/-/prettier-1.19.1.tgz",
"integrity": "sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew=="
},
"source-map": {
"version": "0.6.1",
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",

6
frontend/package.json
View File

@@ -9,7 +9,7 @@
"watch": "webpack --watch",
"build": "webpack --optimize-minimize",
"lint": "eslint --cache src/ *.js",
"fmt": "eslint --cache --fix src/ *.js",
"fmt": "eslint --cache --fix src/ *.js .eslintrc.js",
"test": "karma start",
"upgrade": "npm --depth 10 update && npm audit fix",
"acceptance": "testcafe \"chromium:headless --disable-dev-shm-usage\" --skip-js-errors --selector-timeout 5000 -S -s tests/screenshots tests/acceptance",
@@ -50,6 +50,7 @@
"cssnano": "^4.1.10",
"easygettext": "^2.16.1",
"eslint": "^7.15.0",
"eslint-config-prettier": "^7.0.0",
"eslint-config-standard": "^14.1.1",
"eslint-formatter-pretty": "^4.0.0",
"eslint-friendly-formatter": "^4.0.1",
@@ -57,8 +58,10 @@
"eslint-plugin-html": "^6.1.1",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-prettier-vue": "^2.1.1",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.1.0",
"eslint-plugin-vue": "^7.3.0",
"eventsource-polyfill": "^0.9.6",
"file-loader": "^3.0.1",
"friendly-errors-webpack-plugin": "^1.7.0",
@@ -94,6 +97,7 @@
"postcss-preset-env": "^6.7.0",
"postcss-reporter": "^6.0.1",
"postcss-url": "^8.0.0",
"prettier": "^2.2.1",
"pubsub-js": "^1.9.2",
"puppeteer-core": "^5.5.0",
"regenerator-runtime": "^0.13.7",

10
frontend/postcss.config.js
View File

@@ -1,7 +1,7 @@
module.exports = {
plugins: {
"postcss-import": {},
"postcss-preset-env": {},
"cssnano": {},
},
plugins: {
"postcss-import": {},
"postcss-preset-env": {},
cssnano: {},
},
};

88
frontend/src/app.js
View File

@@ -41,8 +41,8 @@ import Log from "common/log";
import PhotoPrism from "app.vue";
import Router from "vue-router";
import Routes from "routes";
import {config, session} from "session";
import {Settings} from "luxon";
import { config, session } from "session";
import { Settings } from "luxon";
import Socket from "common/websocket";
import Viewer from "common/viewer";
import Vue from "vue";
@@ -53,13 +53,15 @@ import VueFullscreen from "vue-fullscreen";
import VueInfiniteScroll from "vue-infinite-scroll";
import VueModal from "vue-js-modal";
import Hls from "hls.js";
import {$gettext, Mount} from "common/vm";
import { $gettext, Mount } from "common/vm";
// Initialize helpers
const viewer = new Viewer();
const clipboard = new Clipboard(window.localStorage, "photo_clipboard");
const isPublic = config.get("public");
const isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
);
// HTTP Live Streaming (video support)
window.Hls = Hls;
@@ -77,23 +79,23 @@ Vue.prototype.$clipboard = clipboard;
Vue.prototype.$isMobile = isMobile;
// Register Vuetify
Vue.use(Vuetify, {"theme": config.theme});
Vue.use(Vuetify, { theme: config.theme });
Vue.config.language = config.values.settings.ui.language;
Settings.defaultLocale = Vue.config.language.substring(0, 2);
// Register other VueJS plugins
Vue.use(GetTextPlugin, {
translations: config.translations,
silent: true, // !config.values.debug,
defaultLanguage: Vue.config.language,
autoAddKeyAttributes: true,
translations: config.translations,
silent: true, // !config.values.debug,
defaultLanguage: Vue.config.language,
autoAddKeyAttributes: true,
});
Vue.use(VueLuxon);
Vue.use(VueInfiniteScroll);
Vue.use(VueFullscreen);
Vue.use(VueModal, {dynamic: true, dynamicDefaults: {clickToClose: true}});
Vue.use(VueModal, { dynamic: true, dynamicDefaults: { clickToClose: true } });
Vue.use(VueFilters);
Vue.use(Components);
Vue.use(Dialogs);
@@ -101,52 +103,52 @@ Vue.use(Router);
// Configure client-side routing
const router = new Router({
routes: Routes,
mode: "history",
saveScrollPosition: true,
routes: Routes,
mode: "history",
saveScrollPosition: true,
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.settings) && config.values.disable.settings) {
next({name: "home"});
} else if (to.matched.some(record => record.meta.admin)) {
if (isPublic || session.isAdmin()) {
next();
} else {
next({
name: "login",
params: {nextUrl: to.fullPath},
});
}
} else if (to.matched.some(record => record.meta.auth)) {
if (isPublic || session.isUser()) {
next();
} else {
next({
name: "login",
params: {nextUrl: to.fullPath},
});
}
if (to.matched.some((record) => record.meta.settings) && config.values.disable.settings) {
next({ name: "home" });
} else if (to.matched.some((record) => record.meta.admin)) {
if (isPublic || session.isAdmin()) {
next();
} else {
next();
next({
name: "login",
params: { nextUrl: to.fullPath },
});
}
} else if (to.matched.some((record) => record.meta.auth)) {
if (isPublic || session.isUser()) {
next();
} else {
next({
name: "login",
params: { nextUrl: to.fullPath },
});
}
} else {
next();
}
});
router.afterEach((to) => {
if (to.meta.title && config.values.siteTitle !== to.meta.title) {
config.page.title = $gettext(to.meta.title);
window.document.title = config.values.siteTitle + ": " + config.page.title;
} else {
config.page.title = config.values.siteTitle;
window.document.title = config.values.siteTitle + ": " + config.values.siteCaption;
}
if (to.meta.title && config.values.siteTitle !== to.meta.title) {
config.page.title = $gettext(to.meta.title);
window.document.title = config.values.siteTitle + ": " + config.page.title;
} else {
config.page.title = config.values.siteTitle;
window.document.title = config.values.siteTitle + ": " + config.values.siteCaption;
}
});
// Pull client config every 10 minutes in case push fails (except on mobile to save battery).
if (isMobile) {
document.body.classList.add("mobile");
document.body.classList.add("mobile");
} else {
setInterval(() => config.update(), 600000);
setInterval(() => config.update(), 600000);
}
// Start application.

60
frontend/src/common/api.js
View File

@@ -30,65 +30,73 @@ https://docs.photoprism.org/developer-guide/
import Axios from "axios";
import Notify from "common/notify";
import {$gettext} from "./vm";
import { $gettext } from "./vm";
const testConfig = {"jsHash":"48019917", "cssHash":"2b327230", "version": "test"};
const testConfig = { jsHash: "48019917", cssHash: "2b327230", version: "test" };
const config = window.__CONFIG__ ? window.__CONFIG__ : testConfig;
const Api = Axios.create({
baseURL: "/api/v1",
headers: {common: {
"X-Session-ID": window.localStorage.getItem("session_id"),
"X-Client-Hash": config.jsHash,
"X-Client-Version": config.version,
}},
baseURL: "/api/v1",
headers: {
common: {
"X-Session-ID": window.localStorage.getItem("session_id"),
"X-Client-Hash": config.jsHash,
"X-Client-Version": config.version,
},
},
});
Api.interceptors.request.use(function (config) {
Api.interceptors.request.use(
function (config) {
// Do something before request is sent
Notify.ajaxStart();
return config;
}, function (error) {
},
function (error) {
// Do something with request error
return Promise.reject(error);
});
}
);
Api.interceptors.response.use(function (response) {
Api.interceptors.response.use(
function (response) {
Notify.ajaxEnd();
if(typeof response.data == "string") {
Notify.error($gettext("Request failed - invalid response"));
console.warn("WARNING: Server returned HTML instead of JSON - API not implemented?");
if (typeof response.data == "string") {
Notify.error($gettext("Request failed - invalid response"));
console.warn("WARNING: Server returned HTML instead of JSON - API not implemented?");
}
return response;
}, function (error) {
},
function (error) {
Notify.ajaxEnd();
if (Axios.isCancel(error)) {
return Promise.reject(error);
return Promise.reject(error);
}
if(console && console.log) {
console.log(error);
if (console && console.log) {
console.log(error);
}
let errorMessage = $gettext("An error occurred - are you offline?");
let code = error.code;
if(error.response && error.response.data) {
let data = error.response.data;
code = data.code;
errorMessage = data.message ? data.message : data.error;
if (error.response && error.response.data) {
let data = error.response.data;
code = data.code;
errorMessage = data.message ? data.message : data.error;
}
if (code === 401) {
Notify.logout(errorMessage);
Notify.logout(errorMessage);
} else {
Notify.error(errorMessage);
Notify.error(errorMessage);
}
return Promise.reject(error);
});
}
);
export default Api;

280
frontend/src/common/clipboard.js
View File

@@ -30,188 +30,188 @@ https://docs.photoprism.org/developer-guide/
import RestModel from "model/rest";
import Notify from "common/notify";
import {$gettext} from "./vm";
import { $gettext } from "./vm";
export const MaxItems = 999;
export default class Clipboard {
/**
* @param {Storage} storage
* @param {string} key
*/
constructor(storage, key) {
this.storageKey = key ? key : "clipboard";
/**
* @param {Storage} storage
* @param {string} key
*/
constructor(storage, key) {
this.storageKey = key ? key : "clipboard";
this.storage = storage;
this.selectionMap = {};
this.selection = [];
this.lastId = "";
this.maxItems = MaxItems;
this.storage = storage;
this.selectionMap = {};
this.selection = [];
this.lastId = "";
this.maxItems = MaxItems;
this.loadFromStorage();
this.loadFromStorage();
}
isModel(model) {
if (!model) {
console.warn("Clipboard::isModel() - empty model", model);
return false;
}
isModel(model) {
if (!model) {
console.warn("Clipboard::isModel() - empty model", model);
return false;
}
if (typeof model.getId !== "function") {
console.warn("Clipboard::isModel() - model.getId() is not a function", model);
return false;
}
return true;
if (typeof model.getId !== "function") {
console.warn("Clipboard::isModel() - model.getId() is not a function", model);
return false;
}
loadFromStorage() {
const photosJson = this.storage.getItem(this.storageKey);
return true;
}
if (photosJson !== null && typeof photosJson !== "undefined") {
this.setIds(JSON.parse(photosJson));
}
loadFromStorage() {
const photosJson = this.storage.getItem(this.storageKey);
if (photosJson !== null && typeof photosJson !== "undefined") {
this.setIds(JSON.parse(photosJson));
}
}
saveToStorage() {
this.storage.setItem(this.storageKey, JSON.stringify(this.selection));
}
toggle(model) {
if (!this.isModel(model)) {
return;
}
saveToStorage() {
this.storage.setItem(this.storageKey, JSON.stringify(this.selection));
const id = model.getId();
this.toggleId(id);
}
toggleId(id) {
const index = this.selection.indexOf(id);
if (index === -1) {
if (this.selection.length >= this.maxItems) {
Notify.warn($gettext("Can't select more items"));
return;
}
this.selection.push(id);
this.selectionMap["id:" + id] = true;
this.lastId = id;
} else {
this.selection.splice(index, 1);
delete this.selectionMap["id:" + id];
this.lastId = "";
}
toggle(model) {
if (!this.isModel(model)) {
return;
}
this.saveToStorage();
}
const id = model.getId();
this.toggleId(id);
add(model) {
if (!this.isModel(model)) {
return;
}
toggleId(id) {
const index = this.selection.indexOf(id);
const id = model.getId();
if (index === -1) {
if (this.selection.length >= this.maxItems) {
Notify.warn($gettext("Can't select more items"));
return;
}
this.addId(id);
}
this.selection.push(id);
this.selectionMap["id:" + id] = true;
this.lastId = id;
} else {
this.selection.splice(index, 1);
delete this.selectionMap["id:" + id];
this.lastId = "";
}
this.saveToStorage();
addId(id) {
if (this.hasId(id)) {
return;
}
add(model) {
if (!this.isModel(model)) {
return;
}
const id = model.getId();
this.addId(id);
if (this.selection.length >= this.maxItems) {
Notify.warn($gettext("Can't select more items"));
return;
}
addId(id) {
if (this.hasId(id)) {
return;
}
this.selection.push(id);
this.selectionMap["id:" + id] = true;
this.lastId = id;
if (this.selection.length >= this.maxItems) {
Notify.warn($gettext("Can't select more items"));
return;
}
this.saveToStorage();
}
this.selection.push(id);
this.selectionMap["id:" + id] = true;
this.lastId = id;
this.saveToStorage();
addRange(rangeEnd, models) {
if (!models || !models[rangeEnd] || !(models[rangeEnd] instanceof RestModel)) {
console.warn("Clipboard::addRange() - invalid arguments:", rangeEnd, models);
return;
}
addRange(rangeEnd, models) {
if (!models || !models[rangeEnd] || !(models[rangeEnd] instanceof RestModel)) {
console.warn("Clipboard::addRange() - invalid arguments:", rangeEnd, models);
return;
}
let rangeStart = models.findIndex((photo) => photo.UID === this.lastId);
let rangeStart = models.findIndex((photo) => photo.UID === this.lastId);
if (rangeStart === -1) {
this.toggle(models[rangeEnd]);
return 1;
}
if (rangeStart > rangeEnd) {
const newEnd = rangeStart;
rangeStart = rangeEnd;
rangeEnd = newEnd;
}
for (let i = rangeStart; i <= rangeEnd; i++) {
this.add(models[i]);
}
return (rangeEnd - rangeStart) + 1;
if (rangeStart === -1) {
this.toggle(models[rangeEnd]);
return 1;
}
has(model) {
if (!this.isModel(model)) {
return;
}
return this.hasId(model.getId());
if (rangeStart > rangeEnd) {
const newEnd = rangeStart;
rangeStart = rangeEnd;
rangeEnd = newEnd;
}
hasId(id) {
return typeof this.selectionMap["id:" + id] !== "undefined";
for (let i = rangeStart; i <= rangeEnd; i++) {
this.add(models[i]);
}
remove(model) {
if (!this.isModel(model)) {
return;
}
return rangeEnd - rangeStart + 1;
}
this.removeId(model.getId());
has(model) {
if (!this.isModel(model)) {
return;
}
removeId(id) {
if (!this.hasId(id)) return;
return this.hasId(model.getId());
}
const index = this.selection.indexOf(id);
hasId(id) {
return typeof this.selectionMap["id:" + id] !== "undefined";
}
this.selection.splice(index, 1);
this.lastId = "";
delete this.selectionMap["id:" + id];
this.saveToStorage();
remove(model) {
if (!this.isModel(model)) {
return;
}
getIds() {
return this.selection;
this.removeId(model.getId());
}
removeId(id) {
if (!this.hasId(id)) return;
const index = this.selection.indexOf(id);
this.selection.splice(index, 1);
this.lastId = "";
delete this.selectionMap["id:" + id];
this.saveToStorage();
}
getIds() {
return this.selection;
}
setIds(ids) {
if (!Array.isArray(ids)) return;
this.selection = ids;
this.selectionMap = {};
this.lastId = "";
for (let i = 0; i < this.selection.length; i++) {
this.selectionMap["id:" + this.selection[i]] = true;
}
}
setIds(ids) {
if (!Array.isArray(ids)) return;
this.selection = ids;
this.selectionMap = {};
this.lastId = "";
for (let i = 0; i < this.selection.length; i++) {
this.selectionMap["id:" + this.selection[i]] = true;
}
}
clear() {
this.lastId = "";
this.selectionMap = {};
this.selection.splice(0, this.selection.length);
this.storage.removeItem(this.storageKey);
}
clear() {
this.lastId = "";
this.selectionMap = {};
this.selection.splice(0, this.selection.length);
this.storage.removeItem(this.storageKey);
}
}

348
frontend/src/common/config.js
View File

@@ -34,198 +34,198 @@ import translations from "locales/translations.json";
import Api from "./api";
export default class Config {
/**
* @param {Storage} storage
* @param {object} values
*/
constructor(storage, values) {
this.disconnected = false;
this.storage = storage;
this.storage_key = "config";
/**
* @param {Storage} storage
* @param {object} values
*/
constructor(storage, values) {
this.disconnected = false;
this.storage = storage;
this.storage_key = "config";
this.$vuetify = null;
this.translations = translations;
this.$vuetify = null;
this.translations = translations;
if (!values || !values.siteTitle) {
console.warn("config: values are empty");
this.debug = true;
this.demo = false;
this.values = {};
this.page = {
title: "PhotoPrism",
caption: "Browse Your Life",
};
return;
}
this.page = {
title: values.siteTitle,
caption: values.siteCaption,
};
this.values = values;
this.debug = !!values.debug;
this.demo = !!values.demo;
Event.subscribe("config.updated", (ev, data) => this.setValues(data.config));
Event.subscribe("count", (ev, data) => this.onCount(ev, data));
if (this.has("settings")) {
this.setTheme(this.get("settings").ui.theme);
} else {
this.setTheme("default");
}
if (!values || !values.siteTitle) {
console.warn("config: values are empty");
this.debug = true;
this.demo = false;
this.values = {};
this.page = {
title: "PhotoPrism",
caption: "Browse Your Life",
};
return;
}
update() {
Api.get("config").then(
(response) => this.setValues(response.data),
() => console.warn("failed pulling updated client config")
);
this.page = {
title: values.siteTitle,
caption: values.siteCaption,
};
this.values = values;
this.debug = !!values.debug;
this.demo = !!values.demo;
Event.subscribe("config.updated", (ev, data) => this.setValues(data.config));
Event.subscribe("count", (ev, data) => this.onCount(ev, data));
if (this.has("settings")) {
this.setTheme(this.get("settings").ui.theme);
} else {
this.setTheme("default");
}
}
update() {
Api.get("config").then(
(response) => this.setValues(response.data),
() => console.warn("failed pulling updated client config")
);
}
setValues(values) {
if (!values) return;
if (this.debug) {
console.log("config: new values", values);
}
setValues(values) {
if (!values) return;
if (this.debug) {
console.log("config: new values", values);
}
if (values.jsHash && this.values.jsHash !== values.jsHash) {
Event.publish("dialog.reload", {values});
}
for (let key in values) {
if (values.hasOwnProperty(key)) {
this.set(key, values[key]);
}
}
if (values.settings) {
this.setTheme(values.settings.ui.theme);
}
return this;
if (values.jsHash && this.values.jsHash !== values.jsHash) {
Event.publish("dialog.reload", { values });
}
onCount(ev, data) {
const type = ev.split(".")[1];
switch (type) {
case "cameras":
this.values.count.cameras += data.count;
this.update();
break;
case "lenses":
this.values.count.lenses += data.count;
break;
case "countries":
this.values.count.countries += data.count;
this.update();
break;
case "states":
this.values.count.states += data.count;
break;
case "places":
this.values.count.places += data.count;
break;
case "labels":
this.values.count.labels += data.count;
break;
case "videos":
this.values.count.videos += data.count;
break;
case "albums":
this.values.count.albums += data.count;
break;
case "moments":
this.values.count.moments += data.count;
break;
case "months":
this.values.count.months += data.count;
break;
case "folders":
this.values.count.folders += data.count;
break;
case "files":
this.values.count.files += data.count;
break;
case "favorites":
this.values.count.favorites += data.count;
break;
case "review":
this.values.count.review += data.count;
break;
case "private":
this.values.count.private += data.count;
break;
case "photos":
this.values.count.photos += data.count;
break;
default:
console.warn("unknown count type", ev, data);
}
this.values.count;
for (let key in values) {
if (values.hasOwnProperty(key)) {
this.set(key, values[key]);
}
}
setVuetify(instance) {
this.$vuetify = instance;
if (values.settings) {
this.setTheme(values.settings.ui.theme);
}
setTheme(name) {
this.theme = themes[name] ? themes[name] : themes["default"];
return this;
}
if (this.$vuetify) {
this.$vuetify.theme = this.theme;
}
onCount(ev, data) {
const type = ev.split(".")[1];
return this;
switch (type) {
case "cameras":
this.values.count.cameras += data.count;
this.update();
break;
case "lenses":
this.values.count.lenses += data.count;
break;
case "countries":
this.values.count.countries += data.count;
this.update();
break;
case "states":
this.values.count.states += data.count;
break;
case "places":
this.values.count.places += data.count;
break;
case "labels":
this.values.count.labels += data.count;
break;
case "videos":
this.values.count.videos += data.count;
break;
case "albums":
this.values.count.albums += data.count;
break;
case "moments":
this.values.count.moments += data.count;
break;
case "months":
this.values.count.months += data.count;
break;
case "folders":
this.values.count.folders += data.count;
break;
case "files":
this.values.count.files += data.count;
break;
case "favorites":
this.values.count.favorites += data.count;
break;
case "review":
this.values.count.review += data.count;
break;
case "private":
this.values.count.private += data.count;
break;
case "photos":
this.values.count.photos += data.count;
break;
default:
console.warn("unknown count type", ev, data);
}
getValues() {
return this.values;
this.values.count;
}
setVuetify(instance) {
this.$vuetify = instance;
}
setTheme(name) {
this.theme = themes[name] ? themes[name] : themes["default"];
if (this.$vuetify) {
this.$vuetify.theme = this.theme;
}
storeValues() {
this.storage.setItem(this.storage_key, JSON.stringify(this.getValues()));
return this;
return this;
}
getValues() {
return this.values;
}
storeValues() {
this.storage.setItem(this.storage_key, JSON.stringify(this.getValues()));
return this;
}
set(key, value) {
this.values[key] = value;
return this;
}
has(key) {
return !!this.values[key];
}
get(key) {
return this.values[key];
}
feature(name) {
return this.values.settings.features[name];
}
settings() {
return this.values.settings;
}
downloadToken() {
return this.values["downloadToken"];
}
previewToken() {
return this.values["previewToken"];
}
albumCategories() {
if (this.values["albumCategories"]) {
return this.values["albumCategories"];
}
set(key, value) {
this.values[key] = value;
return this;
}
has(key) {
return !!this.values[key];
}
get(key) {
return this.values[key];
}
feature(name) {
return this.values.settings.features[name];
}
settings() {
return this.values.settings;
}
downloadToken() {
return this.values["downloadToken"];
}
previewToken() {
return this.values["previewToken"];
}
albumCategories() {
if (this.values["albumCategories"]) {
return this.values["albumCategories"];
}
return [];
}
return [];
}
}

118
frontend/src/common/form.js
View File

@@ -29,80 +29,80 @@ https://docs.photoprism.org/developer-guide/
*/
export const FormPropertyType = Object.freeze({
String: "string",
Number: "number",
Object: "object",
String: "string",
Number: "number",
Object: "object",
});
export default class Form {
constructor(definition) {
this.definition = definition;
constructor(definition) {
this.definition = definition;
}
setValues(values) {
const def = this.getDefinition();
for (let prop in def) {
if (values.hasOwnProperty(prop)) {
this.setValue(prop, values[prop]);
}
}
setValues(values) {
const def = this.getDefinition();
return this;
}
for (let prop in def) {
if (values.hasOwnProperty(prop)) {
this.setValue(prop, values[prop]);
}
}
getValues() {
const result = {};
const def = this.getDefinition();
return this;
for (let prop in def) {
result[prop] = this.getValue(prop);
}
getValues() {
const result = {};
const def = this.getDefinition();
return result;
}
for (let prop in def) {
result[prop] = this.getValue(prop);
}
setValue(name, value) {
const def = this.getDefinition();
return result;
if (!def.hasOwnProperty(name)) {
throw `Property ${name} not found`;
} else if (typeof value != def[name].type) {
throw `Property ${name} must be ${def[name].type}`;
} else {
def[name].value = value;
}
setValue(name, value) {
const def = this.getDefinition();
return this;
}
if (!def.hasOwnProperty(name)) {
throw `Property ${name} not found`;
} else if (typeof value != def[name].type) {
throw `Property ${name} must be ${def[name].type}`;
} else {
def[name].value = value;
}
getValue(name) {
const def = this.getDefinition();
return this;
if (def.hasOwnProperty(name)) {
return def[name].value;
} else {
throw `Property ${name} not found`;
}
}
setDefinition(definition) {
this.definition = definition;
}
getDefinition() {
return this.definition ? this.definition : {};
}
getOptions(fieldName) {
if (
this.definition &&
this.definition.hasOwnProperty(fieldName) &&
this.definition[fieldName].hasOwnProperty("options")
) {
return this.definition[fieldName].options;
}
getValue(name) {
const def = this.getDefinition();
if (def.hasOwnProperty(name)) {
return def[name].value;
} else {
throw `Property ${name} not found`;
}
}
setDefinition(definition) {
this.definition = definition;
}
getDefinition() {
return this.definition ? this.definition : {};
}
getOptions(fieldName) {
if (
this.definition &&
this.definition.hasOwnProperty(fieldName) &&
this.definition[fieldName].hasOwnProperty("options")
) {
return this.definition[fieldName].options;
}
return [{ option: "", label: "" }];
}
return [{ option: "", label: "" }];
}
}

38
frontend/src/common/log.js
View File

@@ -31,35 +31,35 @@ https://docs.photoprism.org/developer-guide/
import Event from "pubsub-js";
class Log {
constructor() {
this.cap = 150;
this.created = new Date;
this.logs = [
/* EXAMPLE LOG MESSAGE
constructor() {
this.cap = 150;
this.created = new Date();
this.logs = [
/* EXAMPLE LOG MESSAGE
{
"message": "waiting for events",
"level": "debug",
"time": this.created.toISOString(),
},
*/
];
];
this.logId = 0;
this.logId = 0;
Event.subscribe("log", this.onLog.bind(this));
}
onLog(ev, data) {
data.id = this.logId++;
this.logs.unshift(data);
if(this.logs.length > this.cap) {
this.logs.splice(this.cap);
}
Event.subscribe("log", this.onLog.bind(this));
}
onLog(ev, data) {
data.id = this.logId++;
this.logs.unshift(data);
if (this.logs.length > this.cap) {
this.logs.splice(this.cap);
}
}
}
const log = new Log;
const log = new Log();
export default log;

76
frontend/src/common/notify.js
View File

@@ -29,48 +29,48 @@ https://docs.photoprism.org/developer-guide/
*/
import Event from "pubsub-js";
import {$gettext} from "./vm";
import { $gettext } from "./vm";
const Notify = {
info: function (message) {
Event.publish("notify.info", {message});
},
warn: function (message) {
Event.publish("notify.warning", {message});
},
error: function (message) {
Event.publish("notify.error", {message});
},
success: function (message) {
Event.publish("notify.success", {message});
},
logout: function (message) {
Event.publish("notify.error", {message});
Event.publish("session.logout", {message});
},
ajaxStart: function() {
Event.publish("ajax.start");
},
ajaxEnd: function() {
Event.publish("ajax.end");
},
blockUI: function() {
const el = document.getElementById("busy-overlay");
info: function (message) {
Event.publish("notify.info", { message });
},
warn: function (message) {
Event.publish("notify.warning", { message });
},
error: function (message) {
Event.publish("notify.error", { message });
},
success: function (message) {
Event.publish("notify.success", { message });
},
logout: function (message) {
Event.publish("notify.error", { message });
Event.publish("session.logout", { message });
},
ajaxStart: function () {
Event.publish("ajax.start");
},
ajaxEnd: function () {
Event.publish("ajax.end");
},
blockUI: function () {
const el = document.getElementById("busy-overlay");
if(el) {
el.style.display = "block";
}
},
unblockUI: function() {
const el = document.getElementById("busy-overlay");
if (el) {
el.style.display = "block";
}
},
unblockUI: function () {
const el = document.getElementById("busy-overlay");
if(el) {
el.style.display = "none";
}
},
wait: function () {
this.warn($gettext("Busy, please wait…"));
},
if (el) {
el.style.display = "none";
}
},
wait: function () {
this.warn($gettext("Busy, please wait…"));
},
};
export default Notify;

408
frontend/src/common/session.js
View File

@@ -34,217 +34,213 @@ import User from "model/user";
import Socket from "./websocket";
export default class Session {
/**
* @param {Storage} storage
* @param {Config} config
*/
constructor(storage, config) {
this.auth = false;
this.config = config;
/**
* @param {Storage} storage
* @param {Config} config
*/
constructor(storage, config) {
this.auth = false;
this.config = config;
if (storage.getItem("session_storage") === "true") {
this.storage = window.sessionStorage;
} else {
this.storage = storage;
}
if (storage.getItem("session_storage") === "true") {
this.storage = window.sessionStorage;
} else {
this.storage = storage;
}
if (this.applyId(this.storage.getItem("session_id"))) {
const dataJson = this.storage.getItem("data");
this.data = dataJson !== "undefined" ? JSON.parse(dataJson) : null;
}
if (this.applyId(this.storage.getItem("session_id"))) {
const dataJson = this.storage.getItem("data");
this.data = dataJson !== "undefined" ? JSON.parse(dataJson) : null;
}
if (this.data && this.data.user) {
this.user = new User(this.data.user);
}
if (this.data && this.data.user) {
this.user = new User(this.data.user);
}
if (this.isUser()) {
this.auth = true;
}
if (this.isUser()) {
this.auth = true;
}
Event.subscribe("session.logout", () => {
return this.onLogout();
Event.subscribe("session.logout", () => {
return this.onLogout();
});
Event.subscribe("websocket.connected", () => {
this.sendClientInfo();
});
this.sendClientInfo();
}
useSessionStorage() {
this.deleteId();
this.storage.setItem("session_storage", "true");
this.storage = window.sessionStorage;
}
useLocalStorage() {
this.storage.setItem("session_storage", "false");
this.storage = window.localStorage;
}
applyId(id) {
if (!id) {
this.deleteId();
return false;
}
this.session_id = id;
Api.defaults.headers.common["X-Session-ID"] = id;
return true;
}
setId(id) {
this.storage.setItem("session_id", id);
return this.applyId(id);
}
setConfig(values) {
this.config.setValues(values);
}
getId() {
return this.session_id;
}
hasId() {
return !!this.session_id;
}
deleteId() {
this.session_id = null;
this.storage.removeItem("session_id");
delete Api.defaults.headers.common["X-Session-ID"];
this.deleteData();
}
setData(data) {
if (!data) {
return;
}
this.data = data;
this.user = new User(this.data.user);
this.storage.setItem("data", JSON.stringify(data));
this.auth = true;
}
getUser() {
return this.user;
}
getEmail() {
if (this.isUser()) {
return this.user.PrimaryEmail;
}
return "";
}
getNickName() {
if (this.isUser()) {
return this.user.NickName;
}
return "";
}
getFullName() {
if (this.isUser()) {
return this.user.FullName;
}
return "";
}
isUser() {
return this.user && this.user.hasId();
}
isAdmin() {
return this.user && this.user.hasId() && this.user.RoleAdmin;
}
isAnonymous() {
return !this.user || !this.user.hasId();
}
hasToken(token) {
if (!this.data || !this.data.tokens) {
return false;
}
return this.data.tokens.indexOf(token) >= 0;
}
deleteData() {
this.auth = false;
this.user = new User();
this.data = null;
this.storage.removeItem("data");
}
sendClientInfo() {
const clientInfo = {
session: this.getId(),
js: window.__CONFIG__.jsHash,
css: window.__CONFIG__.cssHash,
version: window.__CONFIG__.version,
};
try {
Socket.send(JSON.stringify(clientInfo));
} catch (e) {
if (this.config.debug) {
console.log("session: can't use websocket, not connected (yet)");
}
}
}
login(username, password, token) {
this.deleteId();
return Api.post("session", { username, password, token }).then((resp) => {
this.setConfig(resp.data.config);
this.setId(resp.data.id);
this.setData(resp.data.data);
this.sendClientInfo();
});
}
redeemToken(token) {
return Api.post("session", { token }).then((resp) => {
this.setConfig(resp.data.config);
this.setId(resp.data.id);
this.setData(resp.data.data);
this.sendClientInfo();
});
}
onLogout(noRedirect) {
this.deleteId();
if (noRedirect !== true) {
window.location = "/";
}
return Promise.resolve();
}
logout(noRedirect) {
if (this.hasId()) {
return Api.delete("session/" + this.getId())
.then(() => {
return this.onLogout(noRedirect);
})
.catch(() => {
return this.onLogout(noRedirect);
});
Event.subscribe("websocket.connected", () => {
this.sendClientInfo();
});
this.sendClientInfo();
}
useSessionStorage() {
this.deleteId();
this.storage.setItem("session_storage", "true");
this.storage = window.sessionStorage;
}
useLocalStorage() {
this.storage.setItem("session_storage", "false");
this.storage = window.localStorage;
}
applyId(id) {
if (!id) {
this.deleteId();
return false;
}
this.session_id = id;
Api.defaults.headers.common["X-Session-ID"] = id;
return true;
}
setId(id) {
this.storage.setItem("session_id", id);
return this.applyId(id);
}
setConfig(values) {
this.config.setValues(values);
}
getId() {
return this.session_id;
}
hasId() {
return !!this.session_id;
}
deleteId() {
this.session_id = null;
this.storage.removeItem("session_id");
delete Api.defaults.headers.common["X-Session-ID"];
this.deleteData();
}
setData(data) {
if (!data) {
return;
}
this.data = data;
this.user = new User(this.data.user);
this.storage.setItem("data", JSON.stringify(data));
this.auth = true;
}
getUser() {
return this.user;
}
getEmail() {
if (this.isUser()) {
return this.user.PrimaryEmail;
}
return "";
}
getNickName() {
if (this.isUser()) {
return this.user.NickName;
}
return "";
}
getFullName() {
if (this.isUser()) {
return this.user.FullName;
}
return "";
}
isUser() {
return this.user && this.user.hasId();
}
isAdmin() {
return this.user && this.user.hasId() && this.user.RoleAdmin;
}
isAnonymous() {
return !this.user || !this.user.hasId();
}
hasToken(token) {
if (!this.data || !this.data.tokens) {
return false;
}
return this.data.tokens.indexOf(token) >= 0;
}
deleteData() {
this.auth = false;
this.user = new User;
this.data = null;
this.storage.removeItem("data");
}
sendClientInfo() {
const clientInfo = {
"session": this.getId(),
"js": window.__CONFIG__.jsHash,
"css": window.__CONFIG__.cssHash,
"version": window.__CONFIG__.version,
};
try {
Socket.send(JSON.stringify(clientInfo));
} catch (e) {
if (this.config.debug) {
console.log("session: can't use websocket, not connected (yet)");
}
}
}
login(username, password, token) {
this.deleteId();
return Api.post("session", {username, password, token}).then(
(resp) => {
this.setConfig(resp.data.config);
this.setId(resp.data.id);
this.setData(resp.data.data);
this.sendClientInfo();
}
);
}
redeemToken(token) {
return Api.post("session", {token}).then(
(resp) => {
this.setConfig(resp.data.config);
this.setId(resp.data.id);
this.setData(resp.data.data);
this.sendClientInfo();
}
);
}
onLogout(noRedirect) {
this.deleteId();
if (noRedirect !== true) {
window.location = "/";
}
return Promise.resolve();
}
logout(noRedirect) {
if (this.hasId()) {
return Api.delete("session/" + this.getId())
.then(() => {
return this.onLogout(noRedirect);
})
.catch(() => {
return this.onLogout(noRedirect);
});
} else {
return this.onLogout(noRedirect);
}
} else {
return this.onLogout(noRedirect);
}
}
}

161
frontend/src/common/util.js
View File

@@ -36,94 +36,93 @@ const Minute = 60 * Second;
const Hour = 60 * Minute;
export default class Util {
static duration(d) {
let u = d;
static duration(d) {
let u = d;
let neg = d < 0;
let neg = d < 0;
if (neg) {
u = -u;
}
if (u < Second) {
// Special case: if duration is smaller than a second,
// use smaller units, like 1.2ms
if (!u) {
return "0s";
}
if (u < Microsecond) {
return u + "ns";
}
if (u < Millisecond) {
return Math.round(u / Microsecond) + "µs";
}
return Math.round(u / Millisecond) + "ms";
}
let result = [];
let h = Math.floor(u / Hour);
let min = Math.floor(u / Minute)%60;
let sec = Math.ceil(u / Second)%60;
result.push(h.toString().padStart(2, "0"));
result.push(min.toString().padStart(2, "0"));
result.push(sec.toString().padStart(2, "0"));
// return `${h}h${min}m${sec}s`
return result.join(":");
if (neg) {
u = -u;
}
static arabicToRoman(number) {
let roman = "";
const romanNumList = {
M: 1000,
CM: 900,
D: 500,
CD: 400,
C: 100,
XC: 90,
L: 50,
XV: 40,
X: 10,
IX: 9,
V: 5,
IV: 4,
I: 1,
};
let a;
if (number < 1 || number > 3999)
return "";
else {
for (let key in romanNumList) {
a = Math.floor(number / romanNumList[key]);
if (a >= 0) {
for (let i = 0; i < a; i++) {
roman += key;
}
}
number = number % romanNumList[key];
}
}
if (u < Second) {
// Special case: if duration is smaller than a second,
// use smaller units, like 1.2ms
if (!u) {
return "0s";
}
return roman;
if (u < Microsecond) {
return u + "ns";
}
if (u < Millisecond) {
return Math.round(u / Microsecond) + "µs";
}
return Math.round(u / Millisecond) + "ms";
}
static truncate(str, length, ending) {
if (length == null) {
length = 100;
}
if (ending == null) {
ending = "…";
}
if (str.length > length) {
return str.substring(0, length - ending.length) + ending;
} else {
return str;
let result = [];
let h = Math.floor(u / Hour);
let min = Math.floor(u / Minute) % 60;
let sec = Math.ceil(u / Second) % 60;
result.push(h.toString().padStart(2, "0"));
result.push(min.toString().padStart(2, "0"));
result.push(sec.toString().padStart(2, "0"));
// return `${h}h${min}m${sec}s`
return result.join(":");
}
static arabicToRoman(number) {
let roman = "";
const romanNumList = {
M: 1000,
CM: 900,
D: 500,
CD: 400,
C: 100,
XC: 90,
L: 50,
XV: 40,
X: 10,
IX: 9,
V: 5,
IV: 4,
I: 1,
};
let a;
if (number < 1 || number > 3999) return "";
else {
for (let key in romanNumList) {
a = Math.floor(number / romanNumList[key]);
if (a >= 0) {
for (let i = 0; i < a; i++) {
roman += key;
}
}
number = number % romanNumList[key];
}
}
return roman;
}
static truncate(str, length, ending) {
if (length == null) {
length = 100;
}
if (ending == null) {
ending = "…";
}
if (str.length > length) {
return str.substring(0, length - ending.length) + ending;
} else {
return str;
}
}
}

303
frontend/src/common/viewer.js
View File

@@ -36,151 +36,186 @@ import stripHtml from "string-strip-html";
const thumbs = window.__CONFIG__.thumbs;
class Viewer {
constructor() {
this.el = null;
this.gallery = null;
constructor() {
this.el = null;
this.gallery = null;
}
getEl() {
if (!this.el) {
this.el = document.getElementById("p-photo-viewer");
if (this.el === null) {
let err = "no photo viewer element found";
console.warn(err);
throw err;
}
}
getEl() {
if (!this.el) {
this.el = document.getElementById("p-photo-viewer");
return this.el;
}
if (this.el === null) {
let err = "no photo viewer element found";
console.warn(err);
throw err;
}
show(items, index = 0) {
if (!Array.isArray(items) || items.length === 0 || index >= items.length) {
console.log("photo list passed to gallery was empty:", items);
return;
}
const shareButtons = [
{
id: "fit_720",
template: "Tiny (size)",
label: "Tiny",
url: "{{raw_image_url}}",
download: true,
},
{
id: "fit_1280",
template: "Small (size)",
label: "Small",
url: "{{raw_image_url}}",
download: true,
},
{
id: "fit_2048",
template: "Medium (size)",
label: "Medium",
url: "{{raw_image_url}}",
download: true,
},
{
id: "fit_2560",
template: "Large (size)",
label: "Large",
url: "{{raw_image_url}}",
download: true,
},
{
id: "original",
template: "Original (size)",
label: "Original",
url: "{{raw_image_url}}",
download: true,
},
];
const options = {
index: index,
history: true,
preload: [1, 1],
focus: true,
modal: true,
closeEl: true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
shareEl: true,
shareButtons: shareButtons,
counterEl: false,
arrowEl: true,
preloaderEl: true,
addCaptionHTMLFn: function (item, captionEl /*, isFake */) {
// item - slide object
// captionEl - caption DOM element
// isFake - true when content is added to fake caption container
// (used to get size of next or previous caption)
if (!item.title) {
captionEl.children[0].innerHTML = "";
return false;
}
return this.el;
}
captionEl.children[0].innerHTML = stripHtml(item.title);
show(items, index = 0) {
if (!Array.isArray(items) || items.length === 0 || index >= items.length) {
console.log("photo list passed to gallery was empty:", items);
return;
if (item.playable) {
captionEl.children[0].innerHTML +=
' <i aria-hidden="true" class="v-icon material-icons theme--dark">movie_creation</i>';
}
const shareButtons = [
{id: "fit_720", template: "Tiny (size)", label: "Tiny", url: "{{raw_image_url}}", download: true},
{id: "fit_1280", template: "Small (size)", label: "Small", url: "{{raw_image_url}}", download: true},
{id: "fit_2048", template: "Medium (size)", label: "Medium", url: "{{raw_image_url}}", download: true},
{id: "fit_2560", template: "Large (size)", label: "Large", url: "{{raw_image_url}}", download: true},
{id: "original", template: "Original (size)", label: "Original", url: "{{raw_image_url}}", download: true},
];
const options = {
index: index,
history: true,
preload: [1, 1],
focus: true,
modal: true,
closeEl: true,
captionEl: true,
fullscreenEl: true,
zoomEl: true,
shareEl: true,
shareButtons: shareButtons,
counterEl: false,
arrowEl: true,
preloaderEl: true,
addCaptionHTMLFn: function(item, captionEl /*, isFake */) {
// item - slide object
// captionEl - caption DOM element
// isFake - true when content is added to fake caption container
// (used to get size of next or previous caption)
if(!item.title) {
captionEl.children[0].innerHTML = "";
return false;
}
captionEl.children[0].innerHTML = stripHtml(item.title);
if(item.playable) {
captionEl.children[0].innerHTML += " <i aria-hidden=\"true\" class=\"v-icon material-icons theme--dark\">movie_creation</i>";
}
if(item.description) {
captionEl.children[0].innerHTML += "<br><span class=\"description\">" + stripHtml(item.description) + "</span>";
}
if(item.playable) {
captionEl.children[0].innerHTML = "<button>" + captionEl.children[0].innerHTML + "</button>";
}
return true;
},
};
let gallery = new PhotoSwipe(this.getEl(), PhotoSwipeUI_Default, items, options);
let realViewportWidth;
let realViewportHeight;
let previousSize;
let nextSize;
let firstResize = true;
let photoSrcWillChange;
this.gallery = gallery;
Event.publish("viewer.show");
gallery.listen("close", () => {
Event.publish("viewer.pause");
Event.publish("viewer.hide");
});
gallery.listen("shareLinkClick", () => Event.publish("viewer.pause"));
gallery.listen("initialZoomIn", () => Event.publish("viewer.pause"));
gallery.listen("initialZoomOut", () => Event.publish("viewer.pause"));
gallery.listen("beforeChange", () => Event.publish("viewer.change", {gallery: gallery, item: gallery.currItem}));
gallery.listen("beforeResize", () => {
realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;
realViewportHeight = gallery.viewportSize.y * window.devicePixelRatio;
if (!previousSize) {
previousSize = "tile_720";
}
nextSize = this.constructor.mapViewportToImageSize(realViewportWidth, realViewportHeight);
if (nextSize !== previousSize) {
photoSrcWillChange = true;
}
if (photoSrcWillChange && !firstResize) {
gallery.invalidateCurrItems();
}
if (firstResize) {
firstResize = false;
}
photoSrcWillChange = false;
});
gallery.listen("gettingData", function (index, item) {
item.src = item[nextSize].src;
item.w = item[nextSize].w;
item.h = item[nextSize].h;
previousSize = nextSize;
});
gallery.init();
}
static mapViewportToImageSize(viewportWidth, viewportHeight) {
for (let i = 0; i < thumbs.length; i++) {
let t = thumbs[i];
if (t.w >= viewportWidth || t.h >= viewportHeight) {
return t.size;
}
if (item.description) {
captionEl.children[0].innerHTML +=
'<br><span class="description">' + stripHtml(item.description) + "</span>";
}
return "fit_7680";
if (item.playable) {
captionEl.children[0].innerHTML =
"<button>" + captionEl.children[0].innerHTML + "</button>";
}
return true;
},
};
let gallery = new PhotoSwipe(this.getEl(), PhotoSwipeUI_Default, items, options);
let realViewportWidth;
let realViewportHeight;
let previousSize;
let nextSize;
let firstResize = true;
let photoSrcWillChange;
this.gallery = gallery;
Event.publish("viewer.show");
gallery.listen("close", () => {
Event.publish("viewer.pause");
Event.publish("viewer.hide");
});
gallery.listen("shareLinkClick", () => Event.publish("viewer.pause"));
gallery.listen("initialZoomIn", () => Event.publish("viewer.pause"));
gallery.listen("initialZoomOut", () => Event.publish("viewer.pause"));
gallery.listen("beforeChange", () =>
Event.publish("viewer.change", { gallery: gallery, item: gallery.currItem })
);
gallery.listen("beforeResize", () => {
realViewportWidth = gallery.viewportSize.x * window.devicePixelRatio;
realViewportHeight = gallery.viewportSize.y * window.devicePixelRatio;
if (!previousSize) {
previousSize = "tile_720";
}
nextSize = this.constructor.mapViewportToImageSize(realViewportWidth, realViewportHeight);
if (nextSize !== previousSize) {
photoSrcWillChange = true;
}
if (photoSrcWillChange && !firstResize) {
gallery.invalidateCurrItems();
}
if (firstResize) {
firstResize = false;
}
photoSrcWillChange = false;
});
gallery.listen("gettingData", function (index, item) {
item.src = item[nextSize].src;
item.w = item[nextSize].w;
item.h = item[nextSize].h;
previousSize = nextSize;
});
gallery.init();
}
static mapViewportToImageSize(viewportWidth, viewportHeight) {
for (let i = 0; i < thumbs.length; i++) {
let t = thumbs[i];
if (t.w >= viewportWidth || t.h >= viewportHeight) {
return t.size;
}
}
return "fit_7680";
}
}
export default Viewer;

28
frontend/src/common/vm.js
View File

@@ -1,21 +1,23 @@
export let vm = {
$gettext: (msgid) => msgid,
$ngettext: (msgid, plural, n) => { return n > 1 ? plural : msgid; },
$pgettext:(context, msgid) => msgid,
$npgettext: (context, msgid) => msgid,
$gettext: (msgid) => msgid,
$ngettext: (msgid, plural, n) => {
return n > 1 ? plural : msgid;
},
$pgettext: (context, msgid) => msgid,
$npgettext: (context, msgid) => msgid,
};
export function $gettext (msgid) {
return vm.$gettext(msgid);
export function $gettext(msgid) {
return vm.$gettext(msgid);
}
export function $ngettext (msgid, plural, n) {
return vm.$ngettext(msgid, plural, n);
export function $ngettext(msgid, plural, n) {
return vm.$ngettext(msgid, plural, n);
}
export function Mount (Vue, app, router) {
vm = new Vue({
router,
render: h => h(app),
}).$mount("#photoprism");
export function Mount(Vue, app, router) {
vm = new Vue({
router,
render: (h) => h(app),
}).$mount("#photoprism");
}

40
frontend/src/common/websocket.js
View File

@@ -30,31 +30,31 @@ https://docs.photoprism.org/developer-guide/
import Sockette from "sockette";
import Event from "pubsub-js";
import {config} from "session";
import { config } from "session";
const host = window.location.host;
const prot = ("https:" === document.location.protocol ? "wss://" : "ws://");
const prot = "https:" === document.location.protocol ? "wss://" : "ws://";
const url = prot + host + "/api/v1/ws";
const Socket = new Sockette(url, {
timeout: 5e3,
onopen: e => {
console.log("websocket: connected");
config.disconnected = false;
document.body.classList.remove("disconnected");
Event.publish("websocket.connected", e);
},
onmessage: e => {
const m = JSON.parse(e.data);
Event.publish(m.event, m.data);
},
onreconnect: () => console.log("websocket: reconnecting"),
onmaximum: () => console.warn("websocket: hit max reconnect limit"),
onclose: () => {
console.warn("websocket: disconnected");
config.disconnected = true;
document.body.classList.add("disconnected");
},
timeout: 5e3,
onopen: (e) => {
console.log("websocket: connected");
config.disconnected = false;
document.body.classList.remove("disconnected");
Event.publish("websocket.connected", e);
},
onmessage: (e) => {
const m = JSON.parse(e.data);
Event.publish(m.event, m.data);
},
onreconnect: () => console.log("websocket: reconnecting"),
onmaximum: () => console.warn("websocket: hit max reconnect limit"),
onclose: () => {
console.warn("websocket: disconnected");
config.disconnected = true;
document.body.classList.add("disconnected");
},
});
export default Socket;

32
frontend/src/component/components.js
View File

@@ -48,22 +48,22 @@ import PAboutFooter from "./footer.vue";
const components = {};
components.install = (Vue) => {
Vue.component("p-notify", PNotify);
Vue.component("p-navigation", PNavigation);
Vue.component("p-scroll-top", PScrollTop);
Vue.component("p-loading-bar", PLoadingBar);
Vue.component("p-video-player", PVideoPlayer);
Vue.component("p-photo-viewer", PPhotoViewer);
Vue.component("p-photo-toolbar", PPhotoToolbar);
Vue.component("p-photo-cards", PPhotoCards);
Vue.component("p-photo-mosaic", PPhotoMosaic);
Vue.component("p-photo-list", PPhotoList);
Vue.component("p-photo-clipboard", PPhotoClipboard);
Vue.component("p-album-clipboard", PAlbumClipboard);
Vue.component("p-album-toolbar", PAlbumToolbar);
Vue.component("p-label-clipboard", PLabelClipboard);
Vue.component("p-file-clipboard", PFileClipboard);
Vue.component("p-about-footer", PAboutFooter);
Vue.component("PNotify", PNotify);
Vue.component("PNavigation", PNavigation);
Vue.component("PScrollTop", PScrollTop);
Vue.component("PLoadingBar", PLoadingBar);
Vue.component("PVideoPlayer", PVideoPlayer);
Vue.component("PPhotoViewer", PPhotoViewer);
Vue.component("PPhotoToolbar", PPhotoToolbar);
Vue.component("PPhotoCards", PPhotoCards);
Vue.component("PPhotoMosaic", PPhotoMosaic);
Vue.component("PPhotoList", PPhotoList);
Vue.component("PPhotoClipboard", PPhotoClipboard);
Vue.component("PAlbumClipboard", PAlbumClipboard);
Vue.component("PAlbumToolbar", PAlbumToolbar);
Vue.component("PLabelClipboard", PLabelClipboard);
Vue.component("PFileClipboard", PFileClipboard);
Vue.component("PAboutFooter", PAboutFooter);
};
export default components;

32
frontend/src/dialog/dialogs.js
View File

@@ -48,22 +48,22 @@ import PReloadDialog from "./reload.vue";
const dialogs = {};
dialogs.install = (Vue) => {
Vue.component("p-account-add-dialog", PAccountAddDialog);
Vue.component("p-account-remove-dialog", PAccountRemoveDialog);
Vue.component("p-account-edit-dialog", PAccountEditDialog);
Vue.component("p-photo-archive-dialog", PPhotoArchiveDialog);
Vue.component("p-photo-album-dialog", PPhotoAlbumDialog);
Vue.component("p-photo-edit-dialog", PPhotoEditDialog);
Vue.component("p-file-delete-dialog", PFileDeleteDialog);
Vue.component("p-album-edit-dialog", PAlbumEditDialog);
Vue.component("p-album-delete-dialog", PAlbumDeleteDialog);
Vue.component("p-label-delete-dialog", PLabelDeleteDialog);
Vue.component("p-upload-dialog", PUploadDialog);
Vue.component("p-video-dialog", PVideoDialog);
Vue.component("p-share-dialog", PShareDialog);
Vue.component("p-share-upload-dialog", PShareUploadDialog);
Vue.component("p-webdav-dialog", PWebdavDialog);
Vue.component("p-reload-dialog", PReloadDialog);
Vue.component("PAccountAddDialog", PAccountAddDialog);
Vue.component("PAccountRemoveDialog", PAccountRemoveDialog);
Vue.component("PAccountEditDialog", PAccountEditDialog);
Vue.component("PPhotoArchiveDialog", PPhotoArchiveDialog);
Vue.component("PPhotoAlbumDialog", PPhotoAlbumDialog);
Vue.component("PPhotoEditDialog", PPhotoEditDialog);
Vue.component("PFileDeleteDialog", PFileDeleteDialog);
Vue.component("PAlbumEditDialog", PAlbumEditDialog);
Vue.component("PAlbumDeleteDialog", PAlbumDeleteDialog);
Vue.component("PLabelDeleteDialog", PLabelDeleteDialog);
Vue.component("PUploadDialog", PUploadDialog);
Vue.component("PVideoDialog", PVideoDialog);
Vue.component("PShareDialog", PShareDialog);
Vue.component("PShareUploadDialog", PShareUploadDialog);
Vue.component("PWebdavDialog", PWebdavDialog);
Vue.component("PReloadDialog", PReloadDialog);
};
export default dialogs;

108
frontend/src/model/account.js
View File

@@ -30,67 +30,71 @@ https://docs.photoprism.org/developer-guide/
import RestModel from "model/rest";
import Api from "common/api";
import {$gettext} from "common/vm";
import {config} from "../session";
import { $gettext } from "common/vm";
import { config } from "../session";
export class Account extends RestModel {
getDefaults() {
return {
ID: 0,
AccName: "",
AccOwner: "",
AccURL: "",
AccType: "",
AccKey: "",
AccUser: "",
AccPass: "",
AccError: "",
AccErrors: 0,
AccShare: true,
AccSync: false,
RetryLimit: 3,
SharePath: "/",
ShareSize: "",
ShareExpires: 0,
SyncPath: "/",
SyncStatus: "",
SyncInterval: 86400,
SyncDate: null,
SyncFilenames: true,
SyncUpload: false,
SyncDownload: !config.get("readonly"),
SyncRaw: true,
CreatedAt: "",
UpdatedAt: "",
DeletedAt: null,
};
}
getDefaults() {
return {
ID: 0,
AccName: "",
AccOwner: "",
AccURL: "",
AccType: "",
AccKey: "",
AccUser: "",
AccPass: "",
AccError: "",
AccErrors: 0,
AccShare: true,
AccSync: false,
RetryLimit: 3,
SharePath: "/",
ShareSize: "",
ShareExpires: 0,
SyncPath: "/",
SyncStatus: "",
SyncInterval: 86400,
SyncDate: null,
SyncFilenames: true,
SyncUpload: false,
SyncDownload: !config.get("readonly"),
SyncRaw: true,
CreatedAt: "",
UpdatedAt: "",
DeletedAt: null,
};
}
getEntityName() {
return this.AccName;
}
getEntityName() {
return this.AccName;
}
getId() {
return this.ID;
}
getId() {
return this.ID;
}
Folders() {
return Api.get(this.getEntityResource() + "/folders").then((response) => Promise.resolve(response.data));
}
Folders() {
return Api.get(this.getEntityResource() + "/folders").then((response) =>
Promise.resolve(response.data)
);
}
Share(photos, dest) {
const values = {Photos: photos, Destination: dest};
Share(photos, dest) {
const values = { Photos: photos, Destination: dest };
return Api.post(this.getEntityResource() + "/share", values).then((response) => Promise.resolve(response.data));
}
return Api.post(this.getEntityResource() + "/share", values).then((response) =>
Promise.resolve(response.data)
);
}
static getCollectionResource() {
return "accounts";
}
static getCollectionResource() {
return "accounts";
}
static getModelName() {
return $gettext("Account");
}
static getModelName() {
return $gettext("Account");
}
}
export default Account;

222
frontend/src/model/album.js
View File

@@ -30,136 +30,136 @@ https://docs.photoprism.org/developer-guide/
import RestModel from "model/rest";
import Api from "common/api";
import {DateTime} from "luxon";
import {config} from "../session";
import {$gettext} from "common/vm";
import { DateTime } from "luxon";
import { config } from "../session";
import { $gettext } from "common/vm";
export class Album extends RestModel {
getDefaults() {
return {
UID: "",
Cover: "",
Parent: "",
Folder: "",
Slug: "",
Type: "",
Title: "",
Location: "",
Caption: "",
Category: "",
Description: "",
Notes: "",
Filter: "",
Order: "",
Template: "",
Country: "",
Day: -1,
Year: -1,
Month: -1,
Favorite: true,
Private: false,
PhotoCount: 0,
LinkCount: 0,
CreatedAt: "",
UpdatedAt: "",
};
getDefaults() {
return {
UID: "",
Cover: "",
Parent: "",
Folder: "",
Slug: "",
Type: "",
Title: "",
Location: "",
Caption: "",
Category: "",
Description: "",
Notes: "",
Filter: "",
Order: "",
Template: "",
Country: "",
Day: -1,
Year: -1,
Month: -1,
Favorite: true,
Private: false,
PhotoCount: 0,
LinkCount: 0,
CreatedAt: "",
UpdatedAt: "",
};
}
getEntityName() {
return this.Slug;
}
getTitle() {
return this.Title;
}
thumbnailUrl(size) {
return `/api/v1/albums/${this.getId()}/t/${config.previewToken()}/${size}`;
}
dayString() {
if (!this.Day || this.Day <= 0) {
return "01";
}
getEntityName() {
return this.Slug;
return this.Day.toString().padStart(2, "0");
}
monthString() {
if (!this.Month || this.Month <= 0) {
return "01";
}
getTitle() {
return this.Title;
return this.Month.toString().padStart(2, "0");
}
yearString() {
if (!this.Year || this.Year <= 1000) {
return new Date().getFullYear().toString().padStart(4, "0");
}
thumbnailUrl(size) {
return `/api/v1/albums/${this.getId()}/t/${config.previewToken()}/${size}`;
return this.Year.toString();
}
getDate() {
let date = this.yearString() + "-" + this.monthString() + "-" + this.dayString();
return DateTime.fromISO(`${date}T12:00:00Z`).toUTC();
}
localDate(time) {
if (!this.TakenAtLocal) {
return this.utcDate();
}
dayString() {
if (!this.Day || this.Day <= 0) {
return "01";
}
let zone = this.getTimeZone();
return this.Day.toString().padStart(2, "0");
return DateTime.fromISO(this.localDateString(time), { zone });
}
getDateString() {
if (!this.Year || this.Year <= 1000) {
return $gettext("Unknown");
} else if (!this.Month || this.Month <= 0) {
return this.localYearString();
} else if (!this.Day || this.Day <= 0) {
return this.getDate().toLocaleString({ month: "long", year: "numeric" });
}
monthString() {
if (!this.Month || this.Month <= 0) {
return "01";
}
return this.localDate().toLocaleString(DateTime.DATE_HUGE);
}
return this.Month.toString().padStart(2, "0");
getCreatedString() {
return DateTime.fromISO(this.CreatedAt).toLocaleString(DateTime.DATETIME_MED);
}
toggleLike() {
this.Favorite = !this.Favorite;
if (this.Favorite) {
return Api.post(this.getEntityResource() + "/like");
} else {
return Api.delete(this.getEntityResource() + "/like");
}
}
yearString() {
if (!this.Year || this.Year <= 1000) {
return new Date().getFullYear().toString().padStart(4, "0");
}
like() {
this.Favorite = true;
return Api.post(this.getEntityResource() + "/like");
}
return this.Year.toString();
}
unlike() {
this.Favorite = false;
return Api.delete(this.getEntityResource() + "/like");
}
getDate() {
let date = this.yearString() + "-" + this.monthString() + "-" + this.dayString();
static getCollectionResource() {
return "albums";
}
return DateTime.fromISO(`${date}T12:00:00Z`).toUTC();
}
localDate(time) {
if(!this.TakenAtLocal) {
return this.utcDate();
}
let zone = this.getTimeZone();
return DateTime.fromISO(this.localDateString(time), {zone});
}
getDateString() {
if (!this.Year || this.Year <= 1000) {
return $gettext("Unknown");
} else if (!this.Month || this.Month <= 0) {
return this.localYearString();
} else if (!this.Day || this.Day <= 0) {
return this.getDate().toLocaleString({month: "long", year: "numeric"});
}
return this.localDate().toLocaleString(DateTime.DATE_HUGE);
}
getCreatedString() {
return DateTime.fromISO(this.CreatedAt).toLocaleString(DateTime.DATETIME_MED);
}
toggleLike() {
this.Favorite = !this.Favorite;
if (this.Favorite) {
return Api.post(this.getEntityResource() + "/like");
} else {
return Api.delete(this.getEntityResource() + "/like");
}
}
like() {
this.Favorite = true;
return Api.post(this.getEntityResource() + "/like");
}
unlike() {
this.Favorite = false;
return Api.delete(this.getEntityResource() + "/like");
}
static getCollectionResource() {
return "albums";
}
static getModelName() {
return $gettext("Album");
}
static getModelName() {
return $gettext("Album");
}
}
export default Album;

326
frontend/src/model/file.js
View File

@@ -30,208 +30,208 @@ https://docs.photoprism.org/developer-guide/
import RestModel from "model/rest";
import Api from "common/api";
import {DateTime} from "luxon";
import { DateTime } from "luxon";
import Util from "common/util";
import {config} from "../session";
import {$gettext} from "common/vm";
import { config } from "../session";
import { $gettext } from "common/vm";
export class File extends RestModel {
getDefaults() {
return {
UID: "",
PhotoUID: "",
InstanceID: "",
Root: "/",
Name: "",
OriginalName: "",
Hash: "",
Size: 0,
ModTime: 0,
Codec: "",
Type: "",
Mime: "",
Primary: false,
Sidecar: false,
Missing: false,
Portrait: false,
Video: false,
Duration: 0,
Width: 0,
Height: 0,
Orientation: 0,
Projection: "",
AspectRatio: 1.0,
MainColor: "",
Colors: "",
Luminance: "",
Diff: 0,
Chroma: 0,
Notes: "",
Error: "",
CreatedAt: "",
CreatedIn: 0,
UpdatedAt: "",
UpdatedIn: 0,
DeletedAt: "",
};
getDefaults() {
return {
UID: "",
PhotoUID: "",
InstanceID: "",
Root: "/",
Name: "",
OriginalName: "",
Hash: "",
Size: 0,
ModTime: 0,
Codec: "",
Type: "",
Mime: "",
Primary: false,
Sidecar: false,
Missing: false,
Portrait: false,
Video: false,
Duration: 0,
Width: 0,
Height: 0,
Orientation: 0,
Projection: "",
AspectRatio: 1.0,
MainColor: "",
Colors: "",
Luminance: "",
Diff: 0,
Chroma: 0,
Notes: "",
Error: "",
CreatedAt: "",
CreatedIn: 0,
UpdatedAt: "",
UpdatedIn: 0,
DeletedAt: "",
};
}
baseName(truncate) {
let result = this.Name;
const slash = result.lastIndexOf("/");
if (slash >= 0) {
result = this.Name.substring(slash + 1);
}
baseName(truncate) {
let result = this.Name;
const slash = result.lastIndexOf("/");
if (slash >= 0) {
result = this.Name.substring(slash + 1);
}
if (truncate) {
result = Util.truncate(result, truncate, "…");
}
return result;
if (truncate) {
result = Util.truncate(result, truncate, "…");
}
isFile() {
return true;
return result;
}
isFile() {
return true;
}
getEntityName() {
return this.Root + "/" + this.Name;
}
thumbnailUrl(size) {
if (this.Error) {
return "/api/v1/svg/broken";
} else if (this.Type === "raw") {
return "/api/v1/svg/raw";
}
getEntityName() {
return this.Root + "/" + this.Name;
return `/api/v1/t/${this.Hash}/${config.previewToken()}/${size}`;
}
getDownloadUrl() {
return "/api/v1/dl/" + this.Hash + "?t=" + config.downloadToken();
}
download() {
if (!this.Hash) {
console.warn("no file hash found for download", this);
return;
}
thumbnailUrl(size) {
if (this.Error) {
return "/api/v1/svg/broken";
} else if (this.Type === "raw") {
return "/api/v1/svg/raw";
}
let link = document.createElement("a");
link.href = this.getDownloadUrl();
link.download = this.baseName(this.Name);
link.click();
}
return `/api/v1/t/${this.Hash}/${config.previewToken()}/${size}`;
calculateSize(width, height) {
if (width >= this.Width && height >= this.Height) {
// Smaller
return { width: this.Width, height: this.Height };
}
getDownloadUrl() {
return "/api/v1/dl/" + this.Hash + "?t=" + config.downloadToken();
const srcAspectRatio = this.Width / this.Height;
const maxAspectRatio = width / height;
let newW, newH;
if (srcAspectRatio > maxAspectRatio) {
newW = width;
newH = Math.round(newW / srcAspectRatio);
} else {
newH = height;
newW = Math.round(newH * srcAspectRatio);
}
download() {
if (!this.Hash) {
console.warn("no file hash found for download", this);
return;
}
return { width: newW, height: newH };
}
let link = document.createElement("a");
link.href = this.getDownloadUrl();
link.download = this.baseName(this.Name);
link.click();
getDateString() {
return DateTime.fromISO(this.CreatedAt).toLocaleString(DateTime.DATETIME_MED);
}
getInfo() {
let info = [];
if (this.Type) {
info.push(this.Type.toUpperCase());
}
calculateSize(width, height) {
if (width >= this.Width && height >= this.Height) { // Smaller
return {width: this.Width, height: this.Height};
}
const srcAspectRatio = this.Width / this.Height;
const maxAspectRatio = width / height;
let newW, newH;
if (srcAspectRatio > maxAspectRatio) {
newW = width;
newH = Math.round(newW / srcAspectRatio);
} else {
newH = height;
newW = Math.round(newH * srcAspectRatio);
}
return {width: newW, height: newH};
if (this.Duration > 0) {
info.push(Util.duration(this.Duration));
}
getDateString() {
return DateTime.fromISO(this.CreatedAt).toLocaleString(DateTime.DATETIME_MED);
this.addSizeInfo(info);
return info.join(", ");
}
typeInfo() {
if (this.Video) {
return $gettext("Video");
} else if (this.Sidecar) {
return $gettext("Sidecar");
}
getInfo() {
let info = [];
return this.Type.toUpperCase();
}
if (this.Type) {
info.push(this.Type.toUpperCase());
}
sizeInfo() {
let info = [];
if (this.Duration > 0) {
info.push(Util.duration(this.Duration));
}
this.addSizeInfo(info);
this.addSizeInfo(info);
return info.join(", ");
}
return info.join(", ");
addSizeInfo(info) {
if (this.Width && this.Height) {
info.push(this.Width + " × " + this.Height);
}
typeInfo() {
if (this.Video) {
return $gettext("Video");
} else if (this.Sidecar) {
return $gettext("Sidecar");
}
if (this.Size > 102400) {
const size = Number.parseFloat(this.Size) / 1048576;
return this.Type.toUpperCase();
info.push(size.toFixed(1) + " MB");
} else if (this.Size) {
const size = Number.parseFloat(this.Size) / 1024;
info.push(size.toFixed(1) + " KB");
}
}
sizeInfo() {
let info = [];
toggleLike() {
this.Favorite = !this.Favorite;
this.addSizeInfo(info);
return info.join(", ");
if (this.Favorite) {
return Api.post(this.getPhotoResource() + "/like");
} else {
return Api.delete(this.getPhotoResource() + "/like");
}
}
addSizeInfo(info) {
if (this.Width && this.Height) {
info.push(this.Width + " × " + this.Height);
}
getPhotoResource() {
return "photos/" + this.PhotoUID;
}
if (this.Size > 102400) {
const size = Number.parseFloat(this.Size) / 1048576;
like() {
this.Favorite = true;
return Api.post(this.getPhotoResource() + "/like");
}
info.push(size.toFixed(1) + " MB");
} else if (this.Size) {
const size = Number.parseFloat(this.Size) / 1024;
unlike() {
this.Favorite = false;
return Api.delete(this.getPhotoResource() + "/like");
}
info.push(size.toFixed(1) + " KB");
}
}
static getCollectionResource() {
return "files";
}
toggleLike() {
this.Favorite = !this.Favorite;
if (this.Favorite) {
return Api.post(this.getPhotoResource() + "/like");
} else {
return Api.delete(this.getPhotoResource() + "/like");
}
}
getPhotoResource() {
return "photos/" + this.PhotoUID;
}
like() {
this.Favorite = true;
return Api.post(this.getPhotoResource() + "/like");
}
unlike() {
this.Favorite = false;
return Api.delete(this.getPhotoResource() + "/like");
}
static getCollectionResource() {
return "files";
}
static getModelName() {
return $gettext("File");
}
static getModelName() {
return $gettext("File");
}
}
export default File;

270
frontend/src/model/folder.js
View File

@@ -30,162 +30,162 @@ https://docs.photoprism.org/developer-guide/
import RestModel from "model/rest";
import Api from "common/api";
import {DateTime} from "luxon";
import { DateTime } from "luxon";
import File from "model/file";
import Util from "common/util";
import {$gettext} from "common/vm";
import { $gettext } from "common/vm";
export const RootImport = "import";
export const RootOriginals = "originals";
export class Folder extends RestModel {
getDefaults() {
return {
Folder: true,
Path: "",
Root: "",
UID: "",
Type: "",
Title: "",
Category: "",
Description: "",
Order: "",
Country: "",
Year: "",
Month: "",
Favorite: false,
Private: false,
Ignore: false,
Watch: false,
FileCount: 0,
CreatedAt: "",
UpdatedAt: "",
};
getDefaults() {
return {
Folder: true,
Path: "",
Root: "",
UID: "",
Type: "",
Title: "",
Category: "",
Description: "",
Order: "",
Country: "",
Year: "",
Month: "",
Favorite: false,
Private: false,
Ignore: false,
Watch: false,
FileCount: 0,
CreatedAt: "",
UpdatedAt: "",
};
}
baseName(truncate) {
let result = this.Path;
const slash = result.lastIndexOf("/");
if (slash >= 0) {
result = this.Path.substring(slash + 1);
}
baseName(truncate) {
let result = this.Path;
const slash = result.lastIndexOf("/");
if (truncate) {
result = Util.truncate(result, truncate, "…");
}
if (slash >= 0) {
result = this.Path.substring(slash + 1);
return result;
}
isFile() {
return false;
}
getEntityName() {
return this.Root + "/" + this.Path;
}
thumbnailUrl() {
return "/api/v1/svg/folder";
}
getDateString() {
return DateTime.fromISO(this.CreatedAt).toLocaleString(DateTime.DATETIME_MED);
}
toggleLike() {
this.Favorite = !this.Favorite;
if (this.Favorite) {
return Api.post(this.getEntityResource() + "/like");
} else {
return Api.delete(this.getEntityResource() + "/like");
}
}
like() {
this.Favorite = true;
return Api.post(this.getEntityResource() + "/like");
}
unlike() {
this.Favorite = false;
return Api.delete(this.getEntityResource() + "/like");
}
static findAll(path) {
return this.search(path, { recursive: true });
}
static findAllUncached(path) {
return this.search(path, { recursive: true, uncached: true });
}
static originals(path, params) {
if (!path || path[0] !== "/") {
path = "/" + path;
}
return this.search(RootOriginals + path, params);
}
static search(path, params) {
const options = {
params: params,
};
if (!path || path[0] !== "/") {
path = "/" + path;
}
return Api.get(this.getCollectionResource() + path, options).then((response) => {
let folders = response.data.folders;
let files = response.data.files ? response.data.files : [];
let count = folders.length + files.length;
let limit = 0;
let offset = 0;
if (response.headers) {
if (response.headers["x-count"]) {
count = parseInt(response.headers["x-count"]);
}
if(truncate) {
result = Util.truncate(result, truncate, "…");
if (response.headers["x-limit"]) {
limit = parseInt(response.headers["x-limit"]);
}
return result;
}
isFile() {
return false;
}
getEntityName() {
return this.Root + "/" + this.Path;
}
thumbnailUrl() {
return "/api/v1/svg/folder";
}
getDateString() {
return DateTime.fromISO(this.CreatedAt).toLocaleString(DateTime.DATETIME_MED);
}
toggleLike() {
this.Favorite = !this.Favorite;
if (this.Favorite) {
return Api.post(this.getEntityResource() + "/like");
} else {
return Api.delete(this.getEntityResource() + "/like");
if (response.headers["x-offset"]) {
offset = parseInt(response.headers["x-offset"]);
}
}
}
like() {
this.Favorite = true;
return Api.post(this.getEntityResource() + "/like");
}
response.models = [];
response.files = files.length;
response.folders = folders.length;
response.count = count;
response.limit = limit;
response.offset = offset;
unlike() {
this.Favorite = false;
return Api.delete(this.getEntityResource() + "/like");
}
for (let i = 0; i < folders.length; i++) {
response.models.push(new this(folders[i]));
}
static findAll(path) {
return this.search(path, {recursive: true});
}
for (let i = 0; i < files.length; i++) {
response.models.push(new File(files[i]));
}
static findAllUncached(path) {
return this.search(path, {recursive: true, uncached: true});
}
return Promise.resolve(response);
});
}
static originals(path, params) {
if(!path || path[0] !== "/") {
path = "/" + path;
}
return this.search(RootOriginals + path, params);
}
static getCollectionResource() {
return "folders";
}
static search(path, params) {
const options = {
params: params,
};
if (!path || path[0] !== "/") {
path = "/" + path;
}
return Api.get(this.getCollectionResource() + path, options).then((response) => {
let folders = response.data.folders;
let files = response.data.files ? response.data.files : [];
let count = folders.length + files.length;
let limit = 0;
let offset = 0;
if (response.headers) {
if (response.headers["x-count"]) {
count = parseInt(response.headers["x-count"]);
}
if (response.headers["x-limit"]) {
limit = parseInt(response.headers["x-limit"]);
}
if (response.headers["x-offset"]) {
offset = parseInt(response.headers["x-offset"]);
}
}
response.models = [];
response.files = files.length;
response.folders = folders.length;
response.count = count;
response.limit = limit;
response.offset = offset;
for (let i = 0; i < folders.length; i++) {
response.models.push(new this(folders[i]));
}
for (let i = 0; i < files.length; i++) {
response.models.push(new File(files[i]));
}
return Promise.resolve(response);
});
}
static getCollectionResource() {
return "folders";
}
static getModelName() {
return $gettext("Folder");
}
static getModelName() {
return $gettext("Folder");
}
}
export default Folder;

106
frontend/src/model/label.js
View File

@@ -30,72 +30,72 @@ https://docs.photoprism.org/developer-guide/
import RestModel from "model/rest";
import Api from "common/api";
import {DateTime} from "luxon";
import {config} from "../session";
import {$gettext} from "common/vm";
import { DateTime } from "luxon";
import { config } from "../session";
import { $gettext } from "common/vm";
export class Label extends RestModel {
getDefaults() {
return {
ID: 0,
UID: "",
Slug: "",
CustomSlug: "",
Name: "",
Priority: 0,
Favorite: false,
Description: "",
Notes: "",
PhotoCount: 0,
CreatedAt: "",
UpdatedAt: "",
DeletedAt: "",
};
}
getDefaults() {
return {
ID: 0,
UID: "",
Slug: "",
CustomSlug: "",
Name: "",
Priority: 0,
Favorite: false,
Description: "",
Notes: "",
PhotoCount: 0,
CreatedAt: "",
UpdatedAt: "",
DeletedAt: "",
};
}
getEntityName() {
return this.Slug;
}
getEntityName() {
return this.Slug;
}
getTitle() {
return this.Name;
}
getTitle() {
return this.Name;
}
thumbnailUrl(size) {
return `/api/v1/labels/${this.getId()}/t/${config.previewToken()}/${size}`;
}
thumbnailUrl(size) {
return `/api/v1/labels/${this.getId()}/t/${config.previewToken()}/${size}`;
}
getDateString() {
return DateTime.fromISO(this.CreatedAt).toLocaleString(DateTime.DATETIME_MED);
}
getDateString() {
return DateTime.fromISO(this.CreatedAt).toLocaleString(DateTime.DATETIME_MED);
}
toggleLike() {
this.Favorite = !this.Favorite;
toggleLike() {
this.Favorite = !this.Favorite;
if (this.Favorite) {
return Api.post(this.getEntityResource() + "/like");
} else {
return Api.delete(this.getEntityResource() + "/like");
}
if (this.Favorite) {
return Api.post(this.getEntityResource() + "/like");
} else {
return Api.delete(this.getEntityResource() + "/like");
}
}
like() {
this.Favorite = true;
return Api.post(this.getEntityResource() + "/like");
}
like() {
this.Favorite = true;
return Api.post(this.getEntityResource() + "/like");
}
unlike() {
this.Favorite = false;
return Api.delete(this.getEntityResource() + "/like");
}
unlike() {
this.Favorite = false;
return Api.delete(this.getEntityResource() + "/like");
}
static getCollectionResource() {
return "labels";
}
static getCollectionResource() {
return "labels";
}
static getModelName() {
return $gettext("Label");
}
static getModelName() {
return $gettext("Label");
}
}
export default Label;

122
frontend/src/model/link.js
View File

@@ -29,79 +29,81 @@ https://docs.photoprism.org/developer-guide/
*/
import Model from "./model";
import {DateTime} from "luxon";
import {$gettext} from "common/vm";
import { DateTime } from "luxon";
import { $gettext } from "common/vm";
export default class Link extends Model {
getDefaults() {
return {
UID: "",
Share: "",
Slug: "",
Token: "",
Expires: 0,
Views: 0,
MaxViews: 0,
Password: "",
HasPassword: false,
CanComment: false,
CanEdit: false,
CreatedAt: "",
ModifiedAt: "",
};
getDefaults() {
return {
UID: "",
Share: "",
Slug: "",
Token: "",
Expires: 0,
Views: 0,
MaxViews: 0,
Password: "",
HasPassword: false,
CanComment: false,
CanEdit: false,
CreatedAt: "",
ModifiedAt: "",
};
}
getToken() {
return this.Token.toLowerCase().trim();
}
url() {
let token = this.getToken();
if (!token) {
token = "…";
}
getToken() {
return this.Token.toLowerCase().trim();
if (this.hasSlug()) {
return `${window.location.origin}/s/${token}/${this.Slug}`;
}
url() {
let token = this.getToken();
return `${window.location.origin}/s/${token}/${this.Share}`;
}
if(!token) {
token = "…";
}
caption() {
return `/s/${this.getToken()}`;
}
if(this.hasSlug()) {
return `${window.location.origin}/s/${token}/${this.Slug}`;
}
getId() {
return this.UID;
}
return `${window.location.origin}/s/${token}/${this.Share}`;
}
hasId() {
return !!this.getId();
}
caption() {
return `/s/${this.getToken()}`;
}
getSlug() {
return this.Slug ? this.Slug : "";
}
getId() {
return this.UID;
}
hasSlug() {
return !!this.getSlug();
}
hasId() {
return !!this.getId();
}
clone() {
return new this.constructor(this.getValues());
}
getSlug() {
return this.Slug ? this.Slug : "";
}
expires() {
return DateTime.fromISO(this.UpdatedAt)
.plus({ seconds: this.Expires })
.toLocaleString(DateTime.DATE_SHORT);
}
hasSlug() {
return !!this.getSlug();
}
static getCollectionResource() {
return "links";
}
clone() {
return new this.constructor(this.getValues());
}
expires() {
return DateTime.fromISO(this.UpdatedAt).plus({ seconds: this.Expires }).toLocaleString(DateTime.DATE_SHORT);
}
static getCollectionResource() {
return "links";
}
static getModelName() {
return $gettext("Link");
}
static getModelName() {
return $gettext("Link");
}
}

139
frontend/src/model/model.js
View File

@@ -29,87 +29,86 @@ https://docs.photoprism.org/developer-guide/
*/
export class Model {
constructor(values) {
this.__originalValues = {};
constructor(values) {
this.__originalValues = {};
if (values) {
this.setValues(values);
if (values) {
this.setValues(values);
} else {
this.setValues(this.getDefaults());
}
}
setValues(values, scalarOnly) {
if (!values) return;
for (let key in values) {
if (values.hasOwnProperty(key) && key !== "__originalValues") {
this[key] = values[key];
if (typeof values[key] !== "object") {
this.__originalValues[key] = values[key];
} else if (!scalarOnly) {
this.__originalValues[key] = JSON.parse(JSON.stringify(values[key]));
}
}
}
return this;
}
getValues(changed) {
const result = {};
const defaults = this.getDefaults();
for (let key in this.__originalValues) {
if (this.__originalValues.hasOwnProperty(key) && key !== "__originalValues") {
let val;
if (defaults.hasOwnProperty(key)) {
switch (typeof defaults[key]) {
case "string":
if (this[key] === null || this[key] === undefined) {
val = "";
} else {
val = this[key];
}
break;
case "bigint":
case "number":
val = parseFloat(this[key]);
break;
case "boolean":
val = !!this[key];
break;
default:
val = this[key];
}
} else {
this.setValues(this.getDefaults());
}
}
setValues(values, scalarOnly) {
if (!values) return;
for (let key in values) {
if (values.hasOwnProperty(key) && key !== "__originalValues") {
this[key] = values[key];
if (typeof values[key] !== "object") {
this.__originalValues[key] = values[key];
} else if (!scalarOnly) {
this.__originalValues[key] = JSON.parse(JSON.stringify(values[key]));
}
}
val = this[key];
}
return this;
}
getValues(changed) {
const result = {};
const defaults = this.getDefaults();
for (let key in this.__originalValues) {
if (this.__originalValues.hasOwnProperty(key) && key !== "__originalValues") {
let val;
if (defaults.hasOwnProperty(key)) {
switch (typeof defaults[key]) {
case "string":
if(this[key] === null || this[key] === undefined) {
val = "";
} else {
val = this[key];
}
break;
case "bigint":
case "number":
val = parseFloat(this[key]);
break;
case "boolean":
val = !!this[key];
break;
default:
val = this[key];
}
} else {
val = this[key];
}
if (!changed || JSON.stringify(val) !== JSON.stringify(this.__originalValues[key])) {
result[key] = val;
}
}
if (!changed || JSON.stringify(val) !== JSON.stringify(this.__originalValues[key])) {
result[key] = val;
}
return result;
}
}
wasChanged() {
const changed = this.getValues(true);
return result;
}
if(!changed) {
return false;
}
wasChanged() {
const changed = this.getValues(true);
return !(changed.constructor === Object && Object.keys(changed).length === 0);
if (!changed) {
return false;
}
getDefaults() {
return {};
}
return !(changed.constructor === Object && Object.keys(changed).length === 0);
}
getDefaults() {
return {};
}
}
export default Model;

1015
frontend/src/model/photo.js
View File

File diff suppressed because it is too large Load Diff

306
frontend/src/model/rest.js
View File

@@ -32,173 +32,183 @@ import Api from "common/api";
import Form from "common/form";
import Model from "./model";
import Link from "./link";
import {$gettext} from "common/vm";
import { $gettext } from "common/vm";
export class Rest extends Model {
getId() {
return this.UID ? this.UID : this.ID;
getId() {
return this.UID ? this.UID : this.ID;
}
hasId() {
return !!this.getId();
}
getSlug() {
return this.Slug ? this.Slug : "";
}
clone() {
return new this.constructor(this.getValues());
}
find(id, params) {
return Api.get(this.getEntityResource(id), params).then((resp) =>
Promise.resolve(new this.constructor(resp.data))
);
}
save() {
if (this.hasId()) {
return this.update();
}
hasId() {
return !!this.getId();
return Api.post(this.constructor.getCollectionResource(), this.getValues()).then((resp) =>
Promise.resolve(this.setValues(resp.data))
);
}
update() {
return Api.put(this.getEntityResource(), this.getValues(true)).then((resp) =>
Promise.resolve(this.setValues(resp.data))
);
}
remove() {
return Api.delete(this.getEntityResource()).then(() => Promise.resolve(this));
}
getEditForm() {
return Api.options(this.getEntityResource()).then((resp) =>
Promise.resolve(new Form(resp.data))
);
}
getEntityResource(id) {
if (!id) {
id = this.getId();
}
getSlug() {
return this.Slug ? this.Slug : "";
return this.constructor.getCollectionResource() + "/" + id;
}
getEntityName() {
return this.constructor.getModelName() + " " + this.getId();
}
createLink(password, expires) {
return Api.post(this.getEntityResource() + "/links", {
Password: password ? password : "",
Expires: expires ? expires : 0,
Slug: this.getSlug(),
CanEdit: false,
CanComment: false,
}).then((resp) => Promise.resolve(new Link(resp.data)));
}
updateLink(link) {
let values = link.getValues(false);
if (link.Token) {
values["Token"] = link.getToken();
}
clone() {
return new this.constructor(this.getValues());
if (link.Password) {
values["Password"] = link.Password;
}
find(id, params) {
return Api.get(this.getEntityResource(id), params).then((resp) => Promise.resolve(new this.constructor(resp.data)));
}
return Api.put(this.getEntityResource() + "/links/" + link.getId(), values).then((resp) =>
Promise.resolve(link.setValues(resp.data))
);
}
save() {
if (this.hasId()) {
return this.update();
removeLink(link) {
return Api.delete(this.getEntityResource() + "/links/" + link.getId()).then((resp) =>
Promise.resolve(link.setValues(resp.data))
);
}
links() {
return Api.get(this.getEntityResource() + "/links").then((resp) => {
resp.models = [];
resp.count = resp.data.length;
for (let i = 0; i < resp.data.length; i++) {
resp.models.push(new Link(resp.data[i]));
}
return Promise.resolve(resp);
});
}
modelName() {
return this.constructor.getModelName();
}
static getCollectionResource() {
// Needs to be implemented!
return "";
}
static getCreateResource() {
return this.getCollectionResource();
}
static getCreateForm() {
return Api.options(this.getCreateResource()).then((resp) =>
Promise.resolve(new Form(resp.data))
);
}
static getModelName() {
return $gettext("Item");
}
static getSearchForm() {
return Api.options(this.getCollectionResource()).then((resp) =>
Promise.resolve(new Form(resp.data))
);
}
static limit() {
return 3333;
}
static search(params) {
const options = {
params: params,
};
return Api.get(this.getCollectionResource(), options).then((resp) => {
let count = resp.data.length;
let limit = 0;
let offset = 0;
if (resp.headers) {
if (resp.headers["x-count"]) {
count = parseInt(resp.headers["x-count"]);
}
return Api.post(this.constructor.getCollectionResource(), this.getValues()).then((resp) => Promise.resolve(this.setValues(resp.data)));
}
update() {
return Api.put(this.getEntityResource(), this.getValues(true)).then((resp) => Promise.resolve(this.setValues(resp.data)));
}
remove() {
return Api.delete(this.getEntityResource()).then(() => Promise.resolve(this));
}
getEditForm() {
return Api.options(this.getEntityResource()).then(resp => Promise.resolve(new Form(resp.data)));
}
getEntityResource(id) {
if (!id) {
id = this.getId();
if (resp.headers["x-limit"]) {
limit = parseInt(resp.headers["x-limit"]);
}
return this.constructor.getCollectionResource() + "/" + id;
}
getEntityName() {
return this.constructor.getModelName() + " " + this.getId();
}
createLink(password, expires) {
return Api
.post(this.getEntityResource() + "/links", {
"Password": password ? password : "",
"Expires": expires ? expires : 0,
"Slug": this.getSlug(),
"CanEdit": false,
"CanComment": false,
})
.then((resp) => Promise.resolve(new Link(resp.data)));
}
updateLink(link) {
let values = link.getValues(false);
if(link.Token) {
values["Token"] = link.getToken();
if (resp.headers["x-offset"]) {
offset = parseInt(resp.headers["x-offset"]);
}
}
if(link.Password) {
values["Password"] = link.Password;
}
resp.models = [];
resp.count = count;
resp.limit = limit;
resp.offset = offset;
return Api
.put(this.getEntityResource() + "/links/" + link.getId(), values)
.then((resp) => Promise.resolve(link.setValues(resp.data)));
}
for (let i = 0; i < resp.data.length; i++) {
resp.models.push(new this(resp.data[i]));
}
removeLink(link) {
return Api
.delete(this.getEntityResource() + "/links/" + link.getId())
.then((resp) => Promise.resolve(link.setValues(resp.data)));
}
links() {
return Api.get(this.getEntityResource() + "/links").then((resp) => {
resp.models = [];
resp.count = resp.data.length;
for (let i = 0; i < resp.data.length; i++) {
resp.models.push(new Link(resp.data[i]));
}
return Promise.resolve(resp);
});
}
modelName() {
return this.constructor.getModelName();
}
static getCollectionResource() {
// Needs to be implemented!
return "";
}
static getCreateResource() {
return this.getCollectionResource();
}
static getCreateForm() {
return Api.options(this.getCreateResource()).then(resp => Promise.resolve(new Form(resp.data)));
}
static getModelName() {
return $gettext("Item");
}
static getSearchForm() {
return Api.options(this.getCollectionResource()).then(resp => Promise.resolve(new Form(resp.data)));
}
static limit() {
return 3333;
}
static search(params) {
const options = {
params: params,
};
return Api.get(this.getCollectionResource(), options).then((resp) => {
let count = resp.data.length;
let limit = 0;
let offset = 0;
if (resp.headers) {
if (resp.headers["x-count"]) {
count = parseInt(resp.headers["x-count"]);
}
if (resp.headers["x-limit"]) {
limit = parseInt(resp.headers["x-limit"]);
}
if (resp.headers["x-offset"]) {
offset = parseInt(resp.headers["x-offset"]);
}
}
resp.models = [];
resp.count = count;
resp.limit = limit;
resp.offset = offset;
for (let i = 0; i < resp.data.length; i++) {
resp.models.push(new this(resp.data[i]));
}
return Promise.resolve(resp);
});
}
return Promise.resolve(resp);
});
}
}
export default Rest;

30
frontend/src/model/settings.js
View File

@@ -32,23 +32,25 @@ import Api from "common/api";
import Model from "./model";
export class Settings extends Model {
changed(area, key) {
if (typeof this.__originalValues[area] === "undefined") {
return false;
}
return (this[area][key] !== this.__originalValues[area][key]);
changed(area, key) {
if (typeof this.__originalValues[area] === "undefined") {
return false;
}
load() {
return Api.get("settings").then((response) => {
return Promise.resolve(this.setValues(response.data));
});
}
return this[area][key] !== this.__originalValues[area][key];
}
save() {
return Api.post("settings", this.getValues(true)).then((response) => Promise.resolve(this.setValues(response.data)));
}
load() {
return Api.get("settings").then((response) => {
return Promise.resolve(this.setValues(response.data));
});
}
save() {
return Api.post("settings", this.getValues(true)).then((response) =>
Promise.resolve(this.setValues(response.data))
);
}
}
export default Settings;

339
frontend/src/model/thumb.js
View File

@@ -30,219 +30,218 @@ https://docs.photoprism.org/developer-guide/
import Model from "./model";
import Api from "common/api";
import {config} from "../session";
import {$gettext} from "common/vm";
import { config } from "../session";
import { $gettext } from "common/vm";
const thumbs = window.__CONFIG__.thumbs;
export class Thumb extends Model {
getDefaults() {
return {
uid: "",
title: "",
taken: "",
description: "",
favorite: false,
playable: false,
original_w: 0,
original_h: 0,
download_url: "",
};
getDefaults() {
return {
uid: "",
title: "",
taken: "",
description: "",
favorite: false,
playable: false,
original_w: 0,
original_h: 0,
download_url: "",
};
}
getId() {
return this.uid;
}
hasId() {
return !!this.getId();
}
toggleLike() {
this.favorite = !this.favorite;
if (this.favorite) {
return Api.post("photos/" + this.uid + "/like");
} else {
return Api.delete("photos/" + this.uid + "/like");
}
}
static thumbNotFound() {
const result = {
uid: "",
title: $gettext("Not Found"),
taken: "",
description: "",
favorite: false,
playable: false,
original_w: 0,
original_h: 0,
download_url: "",
};
for (let i = 0; i < thumbs.length; i++) {
let t = thumbs[i];
result[t.size] = {
src: "/api/v1/svg/photo",
w: t.w,
h: t.h,
};
}
getId() {
return this.uid;
return result;
}
static fromPhotos(photos) {
let result = [];
const n = photos.length;
for (let i = 0; i < n; i++) {
result.push(this.fromPhoto(photos[i]));
}
hasId() {
return !!this.getId();
return result;
}
static fromPhoto(photo) {
if (photo.Files) {
return this.fromFile(photo, photo.mainFile());
}
toggleLike() {
this.favorite = !this.favorite;
if (this.favorite) {
return Api.post("photos/" + this.uid + "/like");
} else {
return Api.delete("photos/" + this.uid + "/like");
}
if (!photo || !photo.Hash) {
return this.thumbNotFound();
}
static thumbNotFound() {
const result = {
uid: "",
title: $gettext("Not Found"),
taken: "",
description: "",
favorite: false,
playable: false,
original_w: 0,
original_h: 0,
download_url: "",
};
const result = {
uid: photo.UID,
title: photo.Title,
taken: photo.getDateString(),
description: photo.Description,
favorite: photo.Favorite,
playable: photo.isPlayable(),
download_url: this.downloadUrl(photo),
original_w: photo.Width,
original_h: photo.Height,
};
for (let i = 0; i < thumbs.length; i++) {
let t = thumbs[i];
for (let i = 0; i < thumbs.length; i++) {
let t = thumbs[i];
let size = photo.calculateSize(t.w, t.h);
result[t.size] = {
src: "/api/v1/svg/photo",
w: t.w,
h: t.h,
};
}
return result;
result[t.size] = {
src: photo.thumbnailUrl(t.size),
w: size.width,
h: size.height,
};
}
static fromPhotos(photos) {
let result = [];
const n = photos.length;
return new this(result);
}
for (let i = 0; i < n; i++) {
result.push(this.fromPhoto(photos[i]));
}
return result;
static fromFile(photo, file) {
if (!photo || !file || !file.Hash) {
return this.thumbNotFound();
}
static fromPhoto(photo) {
if (photo.Files) {
return this.fromFile(photo, photo.mainFile());
}
const result = {
uid: photo.UID,
title: photo.Title,
taken: photo.getDateString(),
description: photo.Description,
favorite: photo.Favorite,
playable: photo.isPlayable(),
download_url: this.downloadUrl(file),
original_w: file.Width,
original_h: file.Height,
};
if (!photo || !photo.Hash) {
return this.thumbNotFound();
}
for (let i = 0; i < thumbs.length; i++) {
let t = thumbs[i];
let size = this.calculateSize(file, t.w, t.h);
const result = {
uid: photo.UID,
title: photo.Title,
taken: photo.getDateString(),
description: photo.Description,
favorite: photo.Favorite,
playable: photo.isPlayable(),
download_url: this.downloadUrl(photo),
original_w: photo.Width,
original_h: photo.Height,
};
for (let i = 0; i < thumbs.length; i++) {
let t = thumbs[i];
let size = photo.calculateSize(t.w, t.h);
result[t.size] = {
src: photo.thumbnailUrl(t.size),
w: size.width,
h: size.height,
};
}
return new this(result);
result[t.size] = {
src: this.thumbnailUrl(file, t.size),
w: size.width,
h: size.height,
};
}
static fromFile(photo, file) {
if (!photo || !file || !file.Hash) {
return this.thumbNotFound();
}
return new this(result);
}
const result = {
uid: photo.UID,
title: photo.Title,
taken: photo.getDateString(),
description: photo.Description,
favorite: photo.Favorite,
playable: photo.isPlayable(),
download_url: this.downloadUrl(file),
original_w: file.Width,
original_h: file.Height,
};
static fromFiles(photos) {
let result = [];
for (let i = 0; i < thumbs.length; i++) {
let t = thumbs[i];
let size = this.calculateSize(file, t.w, t.h);
result[t.size] = {
src: this.thumbnailUrl(file, t.size),
w: size.width,
h: size.height,
};
}
return new this(result);
if (!photos || !photos.length) {
return result;
}
static fromFiles(photos) {
let result = [];
const n = photos.length;
if (!photos || !photos.length) {
return result;
for (let i = 0; i < n; i++) {
let p = photos[i];
if (!p.Files || !p.Files.length) {
continue;
}
for (let j = 0; j < p.Files.length; j++) {
let f = p.Files[j];
if (!f || f.Type !== "jpg") {
continue;
}
const n = photos.length;
let thumb = this.fromFile(p, f);
for (let i = 0; i < n; i++) {
let p = photos[i];
if (!p.Files || !p.Files.length) {
continue;
}
for (let j = 0; j < p.Files.length; j++) {
let f = p.Files[j];
if (!f || f.Type !== "jpg") {
continue;
}
let thumb = this.fromFile(p, f);
if (thumb) {
result.push(thumb);
}
}
if (thumb) {
result.push(thumb);
}
return result;
}
}
static calculateSize(file, width, height) {
if (width >= file.Width && height >= file.Height) { // Smaller
return {width: file.Width, height: file.Height};
}
return result;
}
const srcAspectRatio = file.Width / file.Height;
const maxAspectRatio = width / height;
let newW, newH;
if (srcAspectRatio > maxAspectRatio) {
newW = width;
newH = Math.round(newW / srcAspectRatio);
} else {
newH = height;
newW = Math.round(newH * srcAspectRatio);
}
return {width: newW, height: newH};
static calculateSize(file, width, height) {
if (width >= file.Width && height >= file.Height) {
// Smaller
return { width: file.Width, height: file.Height };
}
static thumbnailUrl(file, size) {
if (!file.Hash) {
return "/api/v1/svg/photo";
const srcAspectRatio = file.Width / file.Height;
const maxAspectRatio = width / height;
}
let newW, newH;
return `/api/v1/t/${file.Hash}/${config.previewToken()}/${size}`;
if (srcAspectRatio > maxAspectRatio) {
newW = width;
newH = Math.round(newW / srcAspectRatio);
} else {
newH = height;
newW = Math.round(newH * srcAspectRatio);
}
static downloadUrl(file) {
if (!file || !file.Hash) {
return "";
}
return { width: newW, height: newH };
}
return `/api/v1/dl/${file.Hash}?t=${config.downloadToken()}`;
static thumbnailUrl(file, size) {
if (!file.Hash) {
return "/api/v1/svg/photo";
}
return `/api/v1/t/${file.Hash}/${config.previewToken()}/${size}`;
}
static downloadUrl(file) {
if (!file || !file.Hash) {
return "";
}
return `/api/v1/dl/${file.Hash}?t=${config.downloadToken()}`;
}
}
export default Thumb;

156
frontend/src/model/user.js
View File

@@ -31,90 +31,96 @@ https://docs.photoprism.org/developer-guide/
import RestModel from "model/rest";
import Form from "common/form";
import Api from "common/api";
import {$gettext} from "common/vm";
import { $gettext } from "common/vm";
export class User extends RestModel {
getDefaults() {
return {
UID: "",
Address: {},
MotherUID: "",
FatherUID: "",
GlobalUID: "",
FullName: "",
NickName: "",
MaidenName: "",
ArtistName: "",
UserName: "",
UserStatus: "",
UserDisabled: false,
UserSettings: "",
PrimaryEmail: "",
EmailConfirmed: false,
BackupEmail: "",
PersonURL: "",
PersonPhone: "",
PersonStatus: "",
PersonAvatar: "",
PersonLocation: "",
PersonBio: "",
BusinessURL: "",
BusinessPhone: "",
BusinessEmail: "",
CompanyName: "",
DepartmentName: "",
JobTitle: "",
BirthYear: -1,
BirthMonth: -1,
BirthDay: -1,
TermsAccepted: false,
IsArtist: false,
IsSubject: false,
RoleAdmin: false,
RoleGuest: false,
RoleChild: false,
RoleFamily: false,
RoleFriend: false,
WebDAV: false,
StoragePath: "",
CanInvite: false,
InviteToken: "",
InvitedBy: "",
CreatedAt: "",
UpdatedAt: "",
};
}
getDefaults() {
return {
UID: "",
Address: {},
MotherUID: "",
FatherUID: "",
GlobalUID: "",
FullName: "",
NickName: "",
MaidenName: "",
ArtistName: "",
UserName: "",
UserStatus: "",
UserDisabled: false,
UserSettings: "",
PrimaryEmail: "",
EmailConfirmed: false,
BackupEmail: "",
PersonURL: "",
PersonPhone: "",
PersonStatus: "",
PersonAvatar: "",
PersonLocation: "",
PersonBio: "",
BusinessURL: "",
BusinessPhone: "",
BusinessEmail: "",
CompanyName: "",
DepartmentName: "",
JobTitle: "",
BirthYear: -1,
BirthMonth: -1,
BirthDay: -1,
TermsAccepted: false,
IsArtist: false,
IsSubject: false,
RoleAdmin: false,
RoleGuest: false,
RoleChild: false,
RoleFamily: false,
RoleFriend: false,
WebDAV: false,
StoragePath: "",
CanInvite: false,
InviteToken: "",
InvitedBy: "",
CreatedAt: "",
UpdatedAt: "",
};
}
getEntityName() {
return this.FullName ? this.FullName : this.UserName;
}
getEntityName() {
return this.FullName ? this.FullName : this.UserName;
}
getRegisterForm() {
return Api.options(this.getEntityResource() + "/register").then(response => Promise.resolve(new Form(response.data)));
}
getRegisterForm() {
return Api.options(this.getEntityResource() + "/register").then((response) =>
Promise.resolve(new Form(response.data))
);
}
getProfileForm() {
return Api.options(this.getEntityResource() + "/profile").then(response => Promise.resolve(new Form(response.data)));
}
getProfileForm() {
return Api.options(this.getEntityResource() + "/profile").then((response) =>
Promise.resolve(new Form(response.data))
);
}
changePassword(oldPassword, newPassword) {
return Api.put(this.getEntityResource() + "/password", {
old: oldPassword,
new: newPassword,
}).then((response) => Promise.resolve(response.data));
}
changePassword(oldPassword, newPassword) {
return Api.put(this.getEntityResource() + "/password", {
old: oldPassword,
new: newPassword,
}).then((response) => Promise.resolve(response.data));
}
saveProfile() {
return Api.post(this.getEntityResource() + "/profile", this.getValues()).then((response) => Promise.resolve(this.setValues(response.data)));
}
saveProfile() {
return Api.post(this.getEntityResource() + "/profile", this.getValues()).then((response) =>
Promise.resolve(this.setValues(response.data))
);
}
static getCollectionResource() {
return "users";
}
static getCollectionResource() {
return "users";
}
static getModelName() {
return $gettext("User");
}
static getModelName() {
return $gettext("User");
}
}
export default User;

431
frontend/src/options/options.js
View File

@@ -1,276 +1,279 @@
import {$gettext} from "common/vm";
import { $gettext } from "common/vm";
import moment from "moment-timezone";
import {Info} from "luxon";
import {config} from "../session";
import {TypeVideo,TypeImage,TypeLive,TypeRaw} from "../model/photo";
import { Info } from "luxon";
import { config } from "../session";
import { TypeVideo, TypeImage, TypeLive, TypeRaw } from "../model/photo";
export const TimeZones = () => moment.tz.names();
export const Days = () => {
let result = [];
let result = [];
for (let i = 1; i <= 31; i++) {
result.push({"value": i, "text": i.toString().padStart(2, "0")});
}
for (let i = 1; i <= 31; i++) {
result.push({ value: i, text: i.toString().padStart(2, "0") });
}
result.push({"value": -1, "text": $gettext("Unknown")});
result.push({ value: -1, text: $gettext("Unknown") });
return result;
return result;
};
export const Years = () => {
let result = [];
let result = [];
const currentYear = new Date().getUTCFullYear();
const currentYear = new Date().getUTCFullYear();
for (let i = currentYear; i >= 1750; i--) {
result.push({"value": i, "text": i.toString().padStart(4, "0")});
}
for (let i = currentYear; i >= 1750; i--) {
result.push({ value: i, text: i.toString().padStart(4, "0") });
}
result.push({"value": -1, "text": $gettext("Unknown")});
result.push({ value: -1, text: $gettext("Unknown") });
return result;
return result;
};
export const IndexedYears = () => {
let result = [];
let result = [];
if (config.values.years) {
for (let i = 0; i < config.values.years.length; i++) {
result.push({"value": parseInt(config.values.years[i]), "text": config.values.years[i].toString()});
}
if (config.values.years) {
for (let i = 0; i < config.values.years.length; i++) {
result.push({
value: parseInt(config.values.years[i]),
text: config.values.years[i].toString(),
});
}
}
result.push({"value": -1, "text": $gettext("Unknown")});
result.push({ value: -1, text: $gettext("Unknown") });
return result;
return result;
};
export const Months = () => {
let result = [];
let result = [];
const months = Info.months("long");
const months = Info.months("long");
for (let i = 0; i < months.length; i++) {
result.push({"value": i + 1, "text": months[i]});
}
for (let i = 0; i < months.length; i++) {
result.push({ value: i + 1, text: months[i] });
}
result.push({"value": -1, "text": $gettext("Unknown")});
result.push({ value: -1, text: $gettext("Unknown") });
return result;
return result;
};
export const MonthsShort = () => {
let result = [];
let result = [];
for (let i = 1; i <= 12; i++) {
result.push({"value": i, "text": i.toString().padStart(2, "0")});
}
for (let i = 1; i <= 12; i++) {
result.push({ value: i, text: i.toString().padStart(2, "0") });
}
result.push({"value": -1, "text": $gettext("Unknown")});
result.push({ value: -1, text: $gettext("Unknown") });
return result;
return result;
};
export const Languages = () => [
{
"text": "English",
"translated": $gettext("English"),
"value": "en",
},
{
"text": "Deutsch",
"translated": $gettext("German"),
"value": "de",
},
{
"text": "Español",
"translated": $gettext("Spanish"),
"value": "es",
},
{
"text": "Français",
"translated": $gettext("French"),
"value": "fr",
},
{
"text": "हिन्दी",
"translated": $gettext("Hindi"),
"value": "hi",
},
{
"text": "Nederlands",
"translated": $gettext("Dutch"),
"value": "nl",
},
{
"text": "Polski",
"translated": $gettext("Polish"),
"value": "pl",
},
{
"text": "Português do Brasil",
"translated": $gettext("Brazilian Portuguese"),
"value": "pt_BR",
},
{
"text": "Русский",
"translated": $gettext("Russian"),
"value": "ru",
},
{
"text": "Slovenčina",
"translated": $gettext("Slovak"),
"value": "sk",
},
{
"text": "简体中文",
"translated": $gettext("Chinese Simplified"),
"value": "zh",
},
{
"text": "繁体中文",
"translated": $gettext("Chinese Traditional"),
"value": "zh_TW",
},
{
text: "English",
translated: $gettext("English"),
value: "en",
},
{
text: "Deutsch",
translated: $gettext("German"),
value: "de",
},
{
text: "Español",
translated: $gettext("Spanish"),
value: "es",
},
{
text: "Français",
translated: $gettext("French"),
value: "fr",
},
{
text: "हिन्दी",
translated: $gettext("Hindi"),
value: "hi",
},
{
text: "Nederlands",
translated: $gettext("Dutch"),
value: "nl",
},
{
text: "Polski",
translated: $gettext("Polish"),
value: "pl",
},
{
text: "Português do Brasil",
translated: $gettext("Brazilian Portuguese"),
value: "pt_BR",
},
{
text: "Русский",
translated: $gettext("Russian"),
value: "ru",
},
{
text: "Slovenčina",
translated: $gettext("Slovak"),
value: "sk",
},
{
text: "简体中文",
translated: $gettext("Chinese Simplified"),
value: "zh",
},
{
text: "繁体中文",
translated: $gettext("Chinese Traditional"),
value: "zh_TW",
},
];
export const Themes = () => [
{
"text": $gettext("Default"),
"value": "default",
},
{
"text": $gettext("Cyano"),
"value": "cyano",
},
{
"text": $gettext("Lavender"),
"value": "lavender",
},
{
"text": $gettext("Moonlight"),
"value": "moonlight",
},
{
"text": $gettext("Onyx"),
"value": "onyx",
},
{
"text": $gettext("Raspberry"),
"value": "raspberry",
},
{
"text": $gettext("Seaweed"),
"value": "seaweed",
},
{
text: $gettext("Default"),
value: "default",
},
{
text: $gettext("Cyano"),
value: "cyano",
},
{
text: $gettext("Lavender"),
value: "lavender",
},
{
text: $gettext("Moonlight"),
value: "moonlight",
},
{
text: $gettext("Onyx"),
value: "onyx",
},
{
text: $gettext("Raspberry"),
value: "raspberry",
},
{
text: $gettext("Seaweed"),
value: "seaweed",
},
];
export const MapsAnimate = () => [
{
"text": $gettext("None"),
"value": 0,
},
{
"text": $gettext("Fast"),
"value": 2500,
},
{
"text": $gettext("Medium"),
"value": 6250,
},
{
"text": $gettext("Slow"),
"value": 10000,
},
{
text: $gettext("None"),
value: 0,
},
{
text: $gettext("Fast"),
value: 2500,
},
{
text: $gettext("Medium"),
value: 6250,
},
{
text: $gettext("Slow"),
value: 10000,
},
];
export const MapsStyle = () => [
{
"text": $gettext("Offline"),
"value": "offline",
},
{
"text": $gettext("Streets"),
"value": "streets",
},
{
"text": $gettext("Hybrid"),
"value": "hybrid",
},
{
"text": $gettext("Topographic"),
"value": "topographique",
},
{
"text": $gettext("Outdoor"),
"value": "outdoor",
},
{
text: $gettext("Offline"),
value: "offline",
},
{
text: $gettext("Streets"),
value: "streets",
},
{
text: $gettext("Hybrid"),
value: "hybrid",
},
{
text: $gettext("Topographic"),
value: "topographique",
},
{
text: $gettext("Outdoor"),
value: "outdoor",
},
];
export const PhotoTypes = () => [
{
"text": $gettext("Image"),
"value": TypeImage,
},
{
"text": $gettext("Raw"),
"value": TypeRaw,
},
{
"text": $gettext("Live"),
"value": TypeLive,
},
{
"text": $gettext("Video"),
"value": TypeVideo,
},
{
text: $gettext("Image"),
value: TypeImage,
},
{
text: $gettext("Raw"),
value: TypeRaw,
},
{
text: $gettext("Live"),
value: TypeLive,
},
{
text: $gettext("Video"),
value: TypeVideo,
},
];
export const Intervals = () => [
{"value": 0, "text": $gettext("Never")},
{"value": 3600, "text": $gettext("1 hour")},
{"value": 3600 * 4, "text": $gettext("4 hours")},
{"value": 3600 * 12, "text": $gettext("12 hours")},
{"value": 86400, "text": $gettext("Daily")},
{"value": 86400 * 2, "text": $gettext("Every two days")},
{"value": 86400 * 7, "text": $gettext("Once a week")},
{ value: 0, text: $gettext("Never") },
{ value: 3600, text: $gettext("1 hour") },
{ value: 3600 * 4, text: $gettext("4 hours") },
{ value: 3600 * 12, text: $gettext("12 hours") },
{ value: 86400, text: $gettext("Daily") },
{ value: 86400 * 2, text: $gettext("Every two days") },
{ value: 86400 * 7, text: $gettext("Once a week") },
];
export const Expires = () => [
{"value": 0, "text": $gettext("Never")},
{"value": 86400, "text": $gettext("After 1 day")},
{"value": 86400 * 3, "text": $gettext("After 3 days")},
{"value": 86400 * 7, "text": $gettext("After 7 days")},
{"value": 86400 * 14, "text": $gettext("After two weeks")},
{"value": 86400 * 31, "text": $gettext("After one month")},
{"value": 86400 * 60, "text": $gettext("After two months")},
{"value": 86400 * 365, "text": $gettext("After one year")},
{ value: 0, text: $gettext("Never") },
{ value: 86400, text: $gettext("After 1 day") },
{ value: 86400 * 3, text: $gettext("After 3 days") },
{ value: 86400 * 7, text: $gettext("After 7 days") },
{ value: 86400 * 14, text: $gettext("After two weeks") },
{ value: 86400 * 31, text: $gettext("After one month") },
{ value: 86400 * 60, text: $gettext("After two months") },
{ value: 86400 * 365, text: $gettext("After one year") },
];
export const Colors = () => [
{"Example": "#AB47BC", "Name": $gettext("Purple"), "Slug": "purple"},
{"Example": "#FF00FF", "Name": $gettext("Magenta"), "Slug": "magenta"},
{"Example": "#EC407A", "Name": $gettext("Pink"), "Slug": "pink"},
{"Example": "#EF5350", "Name": $gettext("Red"), "Slug": "red"},
{"Example": "#FFA726", "Name": $gettext("Orange"), "Slug": "orange"},
{"Example": "#D4AF37", "Name": $gettext("Gold"), "Slug": "gold"},
{"Example": "#FDD835", "Name": $gettext("Yellow"), "Slug": "yellow"},
{"Example": "#CDDC39", "Name": $gettext("Lime"), "Slug": "lime"},
{"Example": "#66BB6A", "Name": $gettext("Green"), "Slug": "green"},
{"Example": "#009688", "Name": $gettext("Teal"), "Slug": "teal"},
{"Example": "#00BCD4", "Name": $gettext("Cyan"), "Slug": "cyan"},
{"Example": "#2196F3", "Name": $gettext("Blue"), "Slug": "blue"},
{"Example": "#A1887F", "Name": $gettext("Brown"), "Slug": "brown"},
{"Example": "#F5F5F5", "Name": $gettext("White"), "Slug": "white"},
{"Example": "#9E9E9E", "Name": $gettext("Grey"), "Slug": "grey"},
{"Example": "#212121", "Name": $gettext("Black"), "Slug": "black"},
{ Example: "#AB47BC", Name: $gettext("Purple"), Slug: "purple" },
{ Example: "#FF00FF", Name: $gettext("Magenta"), Slug: "magenta" },
{ Example: "#EC407A", Name: $gettext("Pink"), Slug: "pink" },
{ Example: "#EF5350", Name: $gettext("Red"), Slug: "red" },
{ Example: "#FFA726", Name: $gettext("Orange"), Slug: "orange" },
{ Example: "#D4AF37", Name: $gettext("Gold"), Slug: "gold" },
{ Example: "#FDD835", Name: $gettext("Yellow"), Slug: "yellow" },
{ Example: "#CDDC39", Name: $gettext("Lime"), Slug: "lime" },
{ Example: "#66BB6A", Name: $gettext("Green"), Slug: "green" },
{ Example: "#009688", Name: $gettext("Teal"), Slug: "teal" },
{ Example: "#00BCD4", Name: $gettext("Cyan"), Slug: "cyan" },
{ Example: "#2196F3", Name: $gettext("Blue"), Slug: "blue" },
{ Example: "#A1887F", Name: $gettext("Brown"), Slug: "brown" },
{ Example: "#F5F5F5", Name: $gettext("White"), Slug: "white" },
{ Example: "#9E9E9E", Name: $gettext("Grey"), Slug: "grey" },
{ Example: "#212121", Name: $gettext("Black"), Slug: "black" },
];
export const FeedbackCategories = () => [
{"value": "help", "text": $gettext("Customer Support")},
{"value": "feedback", "text": $gettext("Product Feedback")},
{"value": "feature", "text": $gettext("Feature Request")},
{"value": "bug", "text": $gettext("Bug Report")},
{"value": "donations", "text": $gettext("Donations")},
{"value": "other", "text": $gettext("Other")},
{ value: "help", text: $gettext("Customer Support") },
{ value: "feedback", text: $gettext("Product Feedback") },
{ value: "feature", text: $gettext("Feature Request") },
{ value: "bug", text: $gettext("Bug Report") },
{ value: "donations", text: $gettext("Donations") },
{ value: "other", text: $gettext("Other") },
];

573
frontend/src/routes.js
View File

@@ -44,288 +44,309 @@ import About from "pages/about/about.vue";
import Feedback from "pages/about/feedback.vue";
import License from "pages/about/license.vue";
import Help from "pages/help.vue";
import {$gettext} from "common/vm";
import { $gettext } from "common/vm";
const c = window.__CONFIG__;
export default [
{
name: "home",
path: "/",
redirect: "/photos",
{
name: "home",
path: "/",
redirect: "/photos",
},
{
name: "about",
path: "/about",
component: About,
meta: { title: c.name, auth: false },
},
{
name: "feedback",
path: "/feedback",
component: Feedback,
meta: { title: c.name, auth: true },
},
{
name: "license",
path: "/about/license",
component: License,
meta: { title: c.name, auth: false },
},
{
name: "help",
path: "/help*",
component: Help,
meta: { title: c.name, auth: false },
},
{
name: "login",
path: "/login",
component: Login,
meta: { auth: false },
},
{
name: "photos",
path: "/photos",
component: Photos,
meta: { title: c.name, auth: true },
props: { staticFilter: { photo: "true" } },
},
{
name: "moments",
path: "/moments",
component: Albums,
meta: { title: $gettext("Moments"), auth: true },
props: { view: "moment", staticFilter: { type: "moment" } },
},
{
name: "moment",
path: "/moments/:uid/:slug",
component: AlbumPhotos,
meta: { title: $gettext("Moments"), auth: true },
},
{
name: "albums",
path: "/albums",
component: Albums,
meta: { title: $gettext("Albums"), auth: true },
props: { view: "album", staticFilter: { type: "album" } },
},
{
name: "album",
path: "/albums/:uid/:slug",
component: AlbumPhotos,
meta: { auth: true },
},
{
name: "calendar",
path: "/calendar",
component: Albums,
meta: { title: $gettext("Calendar"), auth: true },
props: { view: "month", staticFilter: { type: "month" } },
},
{
name: "month",
path: "/calendar/:uid/:slug",
component: AlbumPhotos,
meta: { title: $gettext("Calendar"), auth: true },
},
{
name: "folders",
path: "/folders",
component: Albums,
meta: { title: $gettext("Folders"), auth: true },
props: { view: "folder", staticFilter: { type: "folder", order: "default" } },
},
{
name: "folder",
path: "/folders/:uid/:slug",
component: AlbumPhotos,
meta: { title: $gettext("Folders"), auth: true },
},
{
name: "unsorted",
path: "/unsorted",
component: Photos,
meta: { title: $gettext("Unsorted"), auth: true },
props: { staticFilter: { unsorted: true } },
},
{
name: "favorites",
path: "/favorites",
component: Photos,
meta: { title: $gettext("Favorites"), auth: true },
props: { staticFilter: { favorite: true } },
},
{
name: "videos",
path: "/videos",
component: Photos,
meta: { title: $gettext("Videos"), auth: true },
props: { staticFilter: { video: "true" } },
},
{
name: "review",
path: "/review",
component: Photos,
meta: { title: $gettext("Review"), auth: true },
props: { staticFilter: { review: true } },
},
{
name: "private",
path: "/private",
component: Photos,
meta: { title: $gettext("Private"), auth: true },
props: { staticFilter: { private: true } },
},
{
name: "archive",
path: "/archive",
component: Photos,
meta: { title: $gettext("Archive"), auth: true },
props: { staticFilter: { archived: true } },
},
{
name: "places",
path: "/places",
component: Places,
meta: { title: $gettext("Places"), auth: true },
},
{
name: "place",
path: "/places/:q",
component: Places,
meta: { title: $gettext("Places"), auth: true },
},
{
name: "states",
path: "/states",
component: Albums,
meta: { title: $gettext("Places"), auth: true },
props: { view: "state", staticFilter: { type: "state" } },
},
{
name: "state",
path: "/states/:uid/:slug",
component: AlbumPhotos,
meta: { title: $gettext("Places"), auth: true },
},
{
name: "files",
path: "/library/files*",
component: Files,
meta: { title: $gettext("File Browser"), auth: true },
},
{
name: "hidden",
path: "/library/hidden",
component: Photos,
meta: { title: $gettext("Hidden Files"), auth: true },
props: { staticFilter: { hidden: true } },
},
{
name: "errors",
path: "/library/errors",
component: Errors,
meta: { title: c.name, auth: true },
},
{
name: "labels",
path: "/labels",
component: Labels,
meta: { title: $gettext("Labels"), auth: true },
},
{
name: "browse",
path: "/browse",
component: Photos,
meta: { title: $gettext("Search"), auth: true },
props: { staticFilter: { quality: 0 } },
},
{
name: "people",
path: "/people",
component: People,
meta: { title: $gettext("People"), auth: true },
},
{
name: "library",
path: "/library",
component: Library,
meta: { title: $gettext("Library"), auth: true, background: "application-light" },
props: { tab: "library-index" },
},
{
name: "library_import",
path: "/library/import",
component: Library,
meta: { title: $gettext("Library"), auth: true, background: "application-light" },
props: { tab: "library-import" },
},
{
name: "library_logs",
path: "/library/logs",
component: Library,
meta: { title: $gettext("Library"), auth: true, background: "application-light" },
props: { tab: "library-logs" },
},
{
name: "settings",
path: "/settings",
component: Settings,
meta: {
title: $gettext("Settings"),
auth: true,
settings: true,
background: "application-light",
},
{
name: "about",
path: "/about",
component: About,
meta: {title: c.name, auth: false},
props: { tab: "settings-general" },
},
{
name: "settings_library",
path: "/settings/library",
component: Settings,
meta: {
title: $gettext("Settings"),
auth: true,
settings: true,
background: "application-light",
},
{
name: "feedback",
path: "/feedback",
component: Feedback,
meta: {title: c.name, auth: true},
props: { tab: "settings-library" },
},
{
name: "settings_sync",
path: "/settings/sync",
component: Settings,
meta: {
title: $gettext("Settings"),
auth: true,
settings: true,
background: "application-light",
},
{
name: "license",
path: "/about/license",
component: License,
meta: {title: c.name, auth: false},
},
{
name: "help",
path: "/help*",
component: Help,
meta: {title: c.name, auth: false},
},
{
name: "login",
path: "/login",
component: Login,
meta: {auth: false},
},
{
name: "photos",
path: "/photos",
component: Photos,
meta: {title: c.name, auth: true},
props: {staticFilter: {photo: "true"}},
},
{
name: "moments",
path: "/moments",
component: Albums,
meta: {title: $gettext("Moments"), auth: true},
props: {view: "moment", staticFilter: {type: "moment"}},
},
{
name: "moment",
path: "/moments/:uid/:slug",
component: AlbumPhotos,
meta: {title: $gettext("Moments"), auth: true},
},
{
name: "albums",
path: "/albums",
component: Albums,
meta: {title: $gettext("Albums"), auth: true},
props: {view: "album", staticFilter: {type: "album"}},
},
{
name: "album",
path: "/albums/:uid/:slug",
component: AlbumPhotos,
meta: {auth: true},
},
{
name: "calendar",
path: "/calendar",
component: Albums,
meta: {title: $gettext("Calendar"), auth: true},
props: {view: "month", staticFilter: {type: "month"}},
},
{
name: "month",
path: "/calendar/:uid/:slug",
component: AlbumPhotos,
meta: {title: $gettext("Calendar"), auth: true},
},
{
name: "folders",
path: "/folders",
component: Albums,
meta: {title: $gettext("Folders"), auth: true},
props: {view: "folder", staticFilter: {type: "folder", order: "default"}},
},
{
name: "folder",
path: "/folders/:uid/:slug",
component: AlbumPhotos,
meta: {title: $gettext("Folders"), auth: true},
},
{
name: "unsorted",
path: "/unsorted",
component: Photos,
meta: {title: $gettext("Unsorted"), auth: true},
props: {staticFilter: {unsorted: true}},
},
{
name: "favorites",
path: "/favorites",
component: Photos,
meta: {title: $gettext("Favorites"), auth: true},
props: {staticFilter: {favorite: true}},
},
{
name: "videos",
path: "/videos",
component: Photos,
meta: {title: $gettext("Videos"), auth: true},
props: {staticFilter: {video: "true"}},
},
{
name: "review",
path: "/review",
component: Photos,
meta: {title: $gettext("Review"), auth: true},
props: {staticFilter: {review: true}},
},
{
name: "private",
path: "/private",
component: Photos,
meta: {title: $gettext("Private"), auth: true},
props: {staticFilter: {private: true}},
},
{
name: "archive",
path: "/archive",
component: Photos,
meta: {title: $gettext("Archive"), auth: true},
props: {staticFilter: {archived: true}},
},
{
name: "places",
path: "/places",
component: Places,
meta: {title: $gettext("Places"), auth: true},
},
{
name: "place",
path: "/places/:q",
component: Places,
meta: {title: $gettext("Places"), auth: true},
},
{
name: "states",
path: "/states",
component: Albums,
meta: {title: $gettext("Places"), auth: true},
props: {view: "state", staticFilter: {type: "state"}},
},
{
name: "state",
path: "/states/:uid/:slug",
component: AlbumPhotos,
meta: {title: $gettext("Places"), auth: true},
},
{
name: "files",
path: "/library/files*",
component: Files,
meta: {title: $gettext("File Browser"), auth: true},
},
{
name: "hidden",
path: "/library/hidden",
component: Photos,
meta: {title: $gettext("Hidden Files"), auth: true},
props: {staticFilter: {hidden: true}},
},
{
name: "errors",
path: "/library/errors",
component: Errors,
meta: {title: c.name, auth: true},
},
{
name: "labels",
path: "/labels",
component: Labels,
meta: {title: $gettext("Labels"), auth: true},
},
{
name: "browse",
path: "/browse",
component: Photos,
meta: {title: $gettext("Search"), auth: true},
props: {staticFilter: {quality: 0}},
},
{
name: "people",
path: "/people",
component: People,
meta: {title: $gettext("People"), auth: true},
},
{
name: "library",
path: "/library",
component: Library,
meta: {title: $gettext("Library"), auth: true, background: "application-light"},
props: {tab: "library-index"},
},
{
name: "library_import",
path: "/library/import",
component: Library,
meta: {title: $gettext("Library"), auth: true, background: "application-light"},
props: {tab: "library-import"},
},
{
name: "library_logs",
path: "/library/logs",
component: Library,
meta: {title: $gettext("Library"), auth: true, background: "application-light"},
props: {tab: "library-logs"},
},
{
name: "settings",
path: "/settings",
component: Settings,
meta: {title: $gettext("Settings"), auth: true, settings: true, background: "application-light"},
props: {tab: "settings-general"},
},
{
name: "settings_library",
path: "/settings/library",
component: Settings,
meta: {title: $gettext("Settings"), auth: true, settings: true, background: "application-light"},
props: {tab: "settings-library"},
},
{
name: "settings_sync",
path: "/settings/sync",
component: Settings,
meta: {title: $gettext("Settings"), auth: true, settings: true, background: "application-light"},
props: {tab: "settings-sync"},
},
{
name: "settings_account",
path: "/settings/account",
component: Settings,
meta: {title: $gettext("Settings"), auth: true, settings: true, background: "application-light"},
props: {tab: "settings-account"},
},
{
name: "discover",
path: "/discover",
component: Discover,
meta: {title: $gettext("Discover"), auth: true, background: "application-light"},
props: {tab: 0},
},
{
name: "discover_similar",
path: "/discover/similar",
component: Discover,
meta: {title: $gettext("Discover"), auth: true, background: "application-light"},
props: {tab: 1},
},
{
name: "discover_season",
path: "/discover/season",
component: Discover,
meta: {title: $gettext("Discover"), auth: true, background: "application-light"},
props: {tab: 2},
},
{
name: "discover_random",
path: "/discover/random",
component: Discover,
meta: {title: $gettext("Discover"), auth: true, background: "application-light"},
props: {tab: 3},
},
{
path: "*", redirect: "/photos",
props: { tab: "settings-sync" },
},
{
name: "settings_account",
path: "/settings/account",
component: Settings,
meta: {
title: $gettext("Settings"),
auth: true,
settings: true,
background: "application-light",
},
props: { tab: "settings-account" },
},
{
name: "discover",
path: "/discover",
component: Discover,
meta: { title: $gettext("Discover"), auth: true, background: "application-light" },
props: { tab: 0 },
},
{
name: "discover_similar",
path: "/discover/similar",
component: Discover,
meta: { title: $gettext("Discover"), auth: true, background: "application-light" },
props: { tab: 1 },
},
{
name: "discover_season",
path: "/discover/season",
component: Discover,
meta: { title: $gettext("Discover"), auth: true, background: "application-light" },
props: { tab: 2 },
},
{
name: "discover_random",
path: "/discover/random",
component: Discover,
meta: { title: $gettext("Discover"), auth: true, background: "application-light" },
props: { tab: 3 },
},
{
path: "*",
redirect: "/photos",
},
];

88
frontend/src/share.js
View File

@@ -41,8 +41,8 @@ import Log from "common/log";
import PhotoPrism from "share.vue";
import Router from "vue-router";
import Routes from "share/routes";
import {config, session} from "session";
import {Settings} from "luxon";
import { config, session } from "session";
import { Settings } from "luxon";
import Socket from "common/websocket";
import Viewer from "common/viewer";
import Vue from "vue";
@@ -53,13 +53,15 @@ import VueFullscreen from "vue-fullscreen";
import VueInfiniteScroll from "vue-infinite-scroll";
import VueModal from "vue-js-modal";
import Hls from "hls.js";
import {$gettext, Mount} from "common/vm";
import { $gettext, Mount } from "common/vm";
// Initialize helpers
const viewer = new Viewer();
const clipboard = new Clipboard(window.localStorage, "photo_clipboard");
const isPublic = config.get("public");
const isMobile = (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent));
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
navigator.userAgent
);
// HTTP Live Streaming (video support)
window.Hls = Hls;
@@ -77,23 +79,23 @@ Vue.prototype.$clipboard = clipboard;
Vue.prototype.$isMobile = isMobile;
// Register Vuetify
Vue.use(Vuetify, {"theme": config.theme});
Vue.use(Vuetify, { theme: config.theme });
Vue.config.language = config.values.settings.ui.language;
Settings.defaultLocale = Vue.config.language.substring(0, 2);
// Register other VueJS plugins
Vue.use(GetTextPlugin, {
translations: config.translations,
silent: true, // !config.values.debug,
defaultLanguage: Vue.config.language,
autoAddKeyAttributes: true,
translations: config.translations,
silent: true, // !config.values.debug,
defaultLanguage: Vue.config.language,
autoAddKeyAttributes: true,
});
Vue.use(VueLuxon);
Vue.use(VueInfiniteScroll);
Vue.use(VueFullscreen);
Vue.use(VueModal, {dynamic: true, dynamicDefaults: {clickToClose: true}});
Vue.use(VueModal, { dynamic: true, dynamicDefaults: { clickToClose: true } });
Vue.use(VueFilters);
Vue.use(Components);
Vue.use(Dialogs);
@@ -101,52 +103,52 @@ Vue.use(Router);
// Configure client-side routing
const router = new Router({
routes: Routes,
mode: "history",
saveScrollPosition: true,
routes: Routes,
mode: "history",
saveScrollPosition: true,
});
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.settings) && config.values.disable.settings) {
next({name: "home"});
} else if (to.matched.some(record => record.meta.admin)) {
if (isPublic || session.isAdmin()) {
next();
} else {
next({
name: "login",
params: {nextUrl: to.fullPath},
});
}
} else if (to.matched.some(record => record.meta.auth)) {
if (isPublic || session.isUser()) {
next();
} else {
next({
name: "login",
params: {nextUrl: to.fullPath},
});
}
if (to.matched.some((record) => record.meta.settings) && config.values.disable.settings) {
next({ name: "home" });
} else if (to.matched.some((record) => record.meta.admin)) {
if (isPublic || session.isAdmin()) {
next();
} else {
next();
next({
name: "login",
params: { nextUrl: to.fullPath },
});
}
} else if (to.matched.some((record) => record.meta.auth)) {
if (isPublic || session.isUser()) {
next();
} else {
next({
name: "login",
params: { nextUrl: to.fullPath },
});
}
} else {
next();
}
});
router.afterEach((to) => {
if (to.meta.title && config.values.siteTitle !== to.meta.title) {
config.page.title = $gettext(to.meta.title);
window.document.title = config.page.title;
} else {
config.page.title = config.values.siteTitle;
window.document.title = config.values.siteTitle;
}
if (to.meta.title && config.values.siteTitle !== to.meta.title) {
config.page.title = $gettext(to.meta.title);
window.document.title = config.page.title;
} else {
config.page.title = config.values.siteTitle;
window.document.title = config.values.siteTitle;
}
});
// Pull client config every 10 minutes in case push fails (except on mobile to save battery).
if (isMobile) {
document.body.classList.add("mobile");
document.body.classList.add("mobile");
} else {
setInterval(() => config.update(), 600000);
setInterval(() => config.update(), 600000);
}
// Start application.

22
frontend/src/share/components.js
View File

@@ -43,17 +43,17 @@ import PAlbumClipboard from "./album/clipboard.vue";
const components = {};
components.install = (Vue) => {
Vue.component("p-notify", PNotify);
Vue.component("p-navigation", PNavigation);
Vue.component("p-scroll-top", PScrollTop);
Vue.component("p-loading-bar", PLoadingBar);
Vue.component("p-video-player", PVideoPlayer);
Vue.component("p-photo-viewer", PPhotoViewer);
Vue.component("p-photo-cards", PPhotoCards);
Vue.component("p-photo-mosaic", PPhotoMosaic);
Vue.component("p-photo-list", PPhotoList);
Vue.component("p-photo-clipboard", PPhotoClipboard);
Vue.component("p-album-clipboard", PAlbumClipboard);
Vue.component("PNotify", PNotify);
Vue.component("PNavigation", PNavigation);
Vue.component("PScrollTop", PScrollTop);
Vue.component("PLoadingBar", PLoadingBar);
Vue.component("PVideoPlayer", PVideoPlayer);
Vue.component("PPhotoViewer", PPhotoViewer);
Vue.component("PPhotoCards", PPhotoCards);
Vue.component("PPhotoMosaic", PPhotoMosaic);
Vue.component("PPhotoList", PPhotoList);
Vue.component("PPhotoClipboard", PPhotoClipboard);
Vue.component("PAlbumClipboard", PAlbumClipboard);
};
export default components;

46
frontend/src/share/routes.js
View File

@@ -2,28 +2,30 @@ import Albums from "share/albums.vue";
import AlbumPhotos from "share/photos.vue";
const c = window.__CONFIG__;
const shareTitle = c.settings.share.title ? c.settings.share.title : c.siteAuthor ? c.siteAuthor : c.name;
const siteTitle = c.siteAuthor ? c.siteAuthor : c.name;
const shareTitle = c.settings.share.title ? c.settings.share.title : siteTitle;
export default [
{
name: "home",
path: "/",
redirect: {name: "albums"},
},
{
name: "albums",
path: "/s/:token",
component: Albums,
meta: {title: shareTitle, auth: true},
props: {view: "album", staticFilter: {type: "album"}},
},
{
name: "album",
path: "/s/:token/:uid",
component: AlbumPhotos,
meta: {title: shareTitle, auth: true},
},
{
path: "*", redirect: {name: "albums"},
},
{
name: "home",
path: "/",
redirect: { name: "albums" },
},
{
name: "albums",
path: "/s/:token",
component: Albums,
meta: { title: shareTitle, auth: true },
props: { view: "album", staticFilter: { type: "album" } },
},
{
name: "album",
path: "/s/:token/:uid",
component: AlbumPhotos,
meta: { title: shareTitle, auth: true },
},
{
path: "*",
redirect: { name: "albums" },
},
];

354
frontend/webpack.config.js
View File

@@ -36,205 +36,199 @@ const webpack = require("webpack");
const isDev = process.env.NODE_ENV !== "production";
if(isDev) {
console.log("Building frontend in DEVELOPMENT mode. Please wait.");
if (isDev) {
console.log("Building frontend in DEVELOPMENT mode. Please wait.");
} else {
console.log("Building frontend in PRODUCTION mode. Please wait.");
console.log("Building frontend in PRODUCTION mode. Please wait.");
}
const PATHS = {
app: path.join(__dirname, "src/app.js"),
share: path.join(__dirname, "src/share.js"),
js: path.join(__dirname, "src"),
css: path.join(__dirname, "src/css"),
build: path.join(__dirname, "../assets/static/build"),
app: path.join(__dirname, "src/app.js"),
share: path.join(__dirname, "src/share.js"),
js: path.join(__dirname, "src"),
css: path.join(__dirname, "src/css"),
build: path.join(__dirname, "../assets/static/build"),
};
const config = {
mode: isDev ? "development" : "production",
devtool: isDev ? "inline-source-map" : false,
entry: {
app: PATHS.app,
share: PATHS.share,
mode: isDev ? "development" : "production",
devtool: isDev ? "inline-source-map" : false,
entry: {
app: PATHS.app,
share: PATHS.share,
},
output: {
path: PATHS.build,
filename: "[name].js",
},
resolve: {
modules: [path.join(__dirname, "src"), path.join(__dirname, "node_modules")],
alias: {
vue: isDev ? "vue/dist/vue.js" : "vue/dist/vue.min.js",
},
output: {
path: PATHS.build,
filename: "[name].js",
},
resolve: {
modules: [
path.join(__dirname, "src"),
path.join(__dirname, "node_modules"),
],
alias: {
vue: isDev ? "vue/dist/vue.js" : "vue/dist/vue.min.js",
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
node: {
fs: "empty",
},
performance: {
hints: isDev ? false : "error",
maxEntrypointSize: 4000000,
maxAssetSize: 4000000,
},
module: {
rules: [
{
test: /\.js$/,
include: PATHS.app,
exclude: /node_modules/,
enforce: "pre",
loader: "eslint-loader",
options: {
formatter: require("eslint-formatter-pretty"),
},
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
}),
],
node: {
fs: "empty",
},
performance: {
hints: isDev ? false : "error",
maxEntrypointSize: 4000000,
maxAssetSize: 4000000,
},
module: {
rules: [
{
test: /\.js$/,
include: PATHS.app,
exclude: /node_modules/,
enforce: "pre",
loader: "eslint-loader",
options: {
formatter: require("eslint-formatter-pretty"),
},
{
test: /\.vue$/,
loader: "vue-loader",
include: PATHS.js,
options: {
loaders: {
js: "babel-loader",
css: "css-loader",
},
},
},
{
test: /\.js$/,
loader: "babel-loader",
include: PATHS.js,
exclude: (file) => /node_modules/.test(file),
query: {
presets: ["@babel/preset-env"],
compact: false,
},
},
{
test: /\.css$/,
include: PATHS.css,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: false,
fallback: "vue-style-loader",
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: isDev,
},
},
},
{
test: /\.vue$/,
loader: "vue-loader",
include: PATHS.js,
options: {
loaders: {
js: "babel-loader",
css: "css-loader",
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
config: {
path: path.resolve(__dirname, "./postcss.config.js"),
},
},
},
"resolve-url-loader",
],
publicPath: PATHS.build,
},
{
test: /\.js$/,
loader: "babel-loader",
include: PATHS.js,
exclude: file => (
/node_modules/.test(file)
),
query: {
presets: ["@babel/preset-env"],
compact: false,
},
},
{
test: /\.css$/,
include: PATHS.css,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
hmr: false,
fallback: "vue-style-loader",
use: [
"style-loader",
{
loader: "css-loader",
options: {
importLoaders: 1,
sourceMap: isDev,
},
},
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
config: {
path: path.resolve(__dirname, "./postcss.config.js"),
},
},
},
"resolve-url-loader",
],
publicPath: PATHS.build,
},
},
"css-loader",
],
},
{
test: /\.css$/,
include: /node_modules/,
loaders: [
"vue-style-loader",
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 1, sourceMap: isDev },
},
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
config: {
path: path.resolve(__dirname, "./postcss.config.js"),
},
},
},
"resolve-url-loader",
],
},
{
test: /\.s[c|a]ss$/,
use: [
"vue-style-loader",
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 2, sourceMap: isDev },
},
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
config: {
path: path.resolve(__dirname, "./postcss.config.js"),
},
},
},
"resolve-url-loader",
"sass-loader",
],
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: "file-loader",
options: {
name: "[hash].[ext]",
publicPath: "/static/build/img",
outputPath: "img",
},
},
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
options: {
name: "[hash].[ext]",
publicPath: "/static/build/fonts",
outputPath: "fonts",
},
},
{
test: /\.svg/,
use: {
loader: "svg-url-loader",
options: {},
},
},
},
"css-loader",
],
},
},
{
test: /\.css$/,
include: /node_modules/,
loaders: [
"vue-style-loader",
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 1, sourceMap: isDev },
},
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
config: {
path: path.resolve(__dirname, "./postcss.config.js"),
},
},
},
"resolve-url-loader",
],
},
{
test: /\.s[c|a]ss$/,
use: [
"vue-style-loader",
"style-loader",
{
loader: "css-loader",
options: { importLoaders: 2, sourceMap: isDev },
},
{
loader: "postcss-loader",
options: {
sourceMap: isDev,
config: {
path: path.resolve(__dirname, "./postcss.config.js"),
},
},
},
"resolve-url-loader",
"sass-loader",
],
},
{
test: /\.(png|jpg|jpeg|gif)$/,
loader: "file-loader",
options: {
name: "[hash].[ext]",
publicPath: "/static/build/img",
outputPath: "img",
},
},
{
test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
loader: "file-loader",
options: {
name: "[hash].[ext]",
publicPath: "/static/build/fonts",
outputPath: "fonts",
},
},
{
test: /\.svg/,
use: {
loader: "svg-url-loader",
options: {},
},
},
],
},
};
// No sourcemap for production
if (isDev) {
const devToolPlugin = new webpack.SourceMapDevToolPlugin({
filename: "[file].map",
});
const devToolPlugin = new webpack.SourceMapDevToolPlugin({
filename: "[file].map",
});
config.plugins.push(devToolPlugin);
config.plugins.push(devToolPlugin);
}
module.exports = config;