luisgulo/photoprism
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Frontend: Move connection failed info to navigation and add help page #330 #376

Browse source 
Signed-off-by: Michael Mayer <michael@liquidbytes.net>
This commit is contained in:
Michael Mayer 2020-07-03 13:45:23 +02:00
parent 06bcfbd915
commit 64676af55c
15 changed files with 274 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
docker-compose.yml
View file

@ -1,20 +1,14 @@
version: '3.5'
services:
# Uncomment to test with Caddy as proxy:
#
# caddy:
# image: abiosoft/caddy:1.0.3-no-stats
# depends_on:
# - photoprism
# ports:
# - 80:80
# - 443:443
# - 2015:2015
# volumes:
# - ./docker/development/Caddyfile:/etc/Caddyfile
# environment:
# ACME_AGREE: "true"
caddy:
image: abiosoft/caddy:1.0.3-no-stats
depends_on:
- photoprism
ports:
- 2015:2015
volumes:
- ./docker/development/Caddyfile:/etc/Caddyfile
photoprism:
build: .

3
docker/development/Caddyfile
View file

@ -3,7 +3,8 @@
gzip
proxy / photoprism:2342 {
websocket
# Test broken websocket connection.
# websocket
transparent
}
}

12
frontend/src/app.vue
View file

@ -1,16 +1,5 @@
<template>
<div id="photoprism">
<v-snackbar top :timeout="0" v-model="config.disconnected" color="warning">
<a href="https://github.com/photoprism/photoprism/issues/330" target="_blank" class="text-link">Connecting...</a>
<v-spacer></v-spacer>
<v-progress-circular
indeterminate
color="black"
:size="16"
:width="2"
></v-progress-circular>
</v-snackbar>
<p-loading-bar height="4"></p-loading-bar>
<p-notify></p-notify>
@ -36,7 +25,6 @@
name: 'photoprism',
data() {
return {
config: this.$config,
touchStart: 0,
};
},

2
frontend/src/component/components.js
View file

@ -43,6 +43,7 @@ import PAlbumClipboard from "./album/clipboard.vue";
import PAlbumToolbar from "./album/toolbar.vue";
import PLabelClipboard from "./label/clipboard.vue";
import PFileClipboard from "./file/clipboard.vue";
import PAboutFooter from "./footer.vue";
const components = {};
@ -62,6 +63,7 @@ components.install = (Vue) => {
Vue.component("p-album-toolbar", PAlbumToolbar);
Vue.component("p-label-clipboard", PLabelClipboard);
Vue.component("p-file-clipboard", PFileClipboard);
Vue.component("p-about-footer", PAboutFooter);
};
export default components;

34
frontend/src/component/footer.vue Normal file
View file

@ -0,0 +1,34 @@
<template>
<v-card flat tile class="ma-0 pa-0 application p-about-footer">
<v-card-actions class="px-4 py-2">
<v-layout wrap align-top>
<v-flex xs12 sm6 class="px-0 pb-2 body-1">
<router-link to="/about">
PhotoPrism™
{{$config.get("version")}}
<br>© 2018-2020 Michael Mayer
</router-link>
</v-flex>
<v-flex xs12 sm6 class="px-0 pb-2 body-1 text-xs-left text-sm-right">
<a href="https://docs.photoprism.org/credits/" class="secondary-dark--text"
target="_blank">Thank you</a> to everyone who made this possible!
<br>
<a href="https://raw.githubusercontent.com/photoprism/photoprism/develop/NOTICE"
class="secondary-dark--text" target="_blank">
3rd-party software packages</a>
</v-flex>
</v-layout>
</v-card-actions>
</v-card>
</template>
<script>
export default {
name: 'p-about-footer',
data() {
return {};
},
methods: {},
};
</script>

12
frontend/src/component/navigation.vue
View file

@ -342,6 +342,18 @@
</v-list-group>
</template>
<v-list-tile to="/help/websockets" @click="" class="nav-connecting" v-show="$config.disconnected">
<v-list-tile-action>
<v-icon color="warning">wifi_off</v-icon>
</v-list-tile-action>
<v-list-tile-content>
<v-list-tile-title class="text--warning">
<translate key="Connecting">Connecting...</translate>
</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
<v-list-tile @click="logout" class="nav-logout" v-show="!public && auth">
<v-list-tile-action>
<v-icon>power_settings_new</v-icon>

1
frontend/src/css/app.css
View file

@ -42,6 +42,7 @@ https://docs.photoprism.org/developer-guide/
@import url("photos.css");
@import url("labels.css");
@import url("files.css");
@import url("help.css");
html,
body {

17
frontend/src/css/help.css Normal file
View file

@ -0,0 +1,17 @@
#photoprism-help h3 {
margin: 1em 0 1em 0;
padding: 0;
}
#photoprism-help p {
margin: 0 0 1em 0;
padding: 0;
}
#photoprism p a.highlight,
#photoprism #photoprism-help p a{
color: #222;
text-decoration: none;
text-shadow: -3px 0px 3px rgba(84, 226, 255, 0.15), 3px 0px 3px rgba(84, 226, 255, 0.15), 6px 0px 6px rgba(84, 226, 255, 0.15), -6px 0px 6px rgba(84, 226, 255, 0.15);
/* text-shadow: -3px 0px 3px rgba(255, 255, 0, 0.5), 3px 0px 3px rgba(255, 255, 0, 0.5), 6px 0px 6px rgba(255, 255, 0, 0.5), -6px 0px 6px rgba(255, 255, 0, 0.5); */
}

32
frontend/src/pages/about/about.vue
View file

@ -7,8 +7,8 @@
</v-toolbar>
<v-container fluid class="pa-4">
<p class="body-1">Feel free to use the
<a target="_blank" href="https://gitter.im/browseyourlife/community">chat</a>
or send an e-mail to <a target="_blank" href="mailto:hello@photoprism.org">hello@photoprism.org</a>
<a target="_blank" href="https://gitter.im/browseyourlife/community" class="highlight">chat</a>
or send an e-mail to <a target="_blank" href="mailto:hello@photoprism.org" class="highlight">hello@photoprism.org</a>
if you have questions, want to support our work, or just want to say hello.</p>
<p>
@ -31,43 +31,43 @@
learning.
He holds a PhD in Computer Science from the Leibniz University of Hannover (L3S Research Center) and wrote
numerous papers on topics such as
<a target="_blank" href="https://www.researchgate.net/profile/Andrea_Ceroni/publication/323222448_Personal_Photo_Management_and_Preservation/links/5a995f8da6fdcc3cbac8fa59/Personal-Photo-Management-and-Preservation.pdf">Personal
<a target="_blank" href="https://www.researchgate.net/profile/Andrea_Ceroni/publication/323222448_Personal_Photo_Management_and_Preservation/links/5a995f8da6fdcc3cbac8fa59/Personal-Photo-Management-and-Preservation.pdf" class="highlight">Personal
Photo Management and Preservation</a>
and <a target="_blank" href="https://www.iti.gr/~bmezaris/publications/hmmp@icme2015_2_preprint.pdf">Photo Selection Models for
and <a target="_blank" href="https://www.iti.gr/~bmezaris/publications/hmmp@icme2015_2_preprint.pdf" class="highlight">Photo Selection Models for
Personal Photo Collections</a>.</p>
<p class="body-1">You can find him on <a target="_blank"
href="https://scholar.google.de/citations?user=JHsQY5YAAAAJ&amp;hl=en">Google Scholar</a> and <a target="_blank"
href="https://www.linkedin.com/in/andrea-ceroni/">LinkedIn</a></p>
href="https://scholar.google.de/citations?user=JHsQY5YAAAAJ&amp;hl=en" class="highlight">Google Scholar</a> and <a target="_blank"
href="https://www.linkedin.com/in/andrea-ceroni/" class="highlight">LinkedIn</a></p>
<h3 class="py-2 body-2">Theresa Gresch</h3>
<p class="body-1">Theresa works as a freelance product manager and developer in Berlin. She has a Master's in
Neurobiology
and aims to dive deeper into machine learning while working on this project.</p>
<p class="body-1">You can find her on <a target="_blank" href="https://github.com/graciousgrey">GitHub</a> and <a
target="_blank" href="https://www.linkedin.com/in/theresa-gresch-886924103/">LinkedIn</a></p>
<p class="body-1">You can find her on <a target="_blank" href="https://github.com/graciousgrey" class="highlight">GitHub</a> and <a
target="_blank" href="https://www.linkedin.com/in/theresa-gresch-886924103/" class="highlight">LinkedIn</a></p>
<h3 class="py-2 body-2">Michael Mayer</h3>
<p class="body-1">Michael learned coding on an Atari 1040 ST and started his first open-source projects in
the 90s. He has more than 20 years of experience in building Web applications.
His motivation is to explore the latest technologies and build an amazing product outside the constraints of a
corporate environment.</p>
<p class="body-1">You can find him on <a target="_blank" href="https://github.com/lastzero">GitHub</a>, <a target="_blank"
href="https://www.linkedin.com/in/lastzero/">LinkedIn</a>
and <a target="_blank" href="https://twitter.com/lastzero">Twitter</a>
<p class="body-1">You can find him on <a target="_blank" href="https://github.com/lastzero" class="highlight">GitHub</a>,
<a target="_blank" href="https://www.linkedin.com/in/lastzero/" class="highlight">LinkedIn</a>
and <a target="_blank" href="https://twitter.com/lastzero" class="highlight">Twitter</a>
</p>
<h3 class="py-2 body-2">Guy Sheffer</h3>
<p class="body-1">Known as <a target="_blank" href="https://github.com/guysoft">GuySoft</a> on the web. Active
developer in
the Free Software and Maker community.
Creator of <a target="_blank" href="https://github.com/guysoft/OctoPi">OctoPi</a> and <a target="_blank"
href="https://github.com/guysoft/FullPageOS">FullPageOS</a>,
Creator of <a target="_blank" href="https://github.com/guysoft/OctoPi" class="highlight">OctoPi</a> and
<a target="_blank" href="https://github.com/guysoft/FullPageOS" class="highlight">FullPageOS</a>,
which have hundreds of thousands of downloads. Raspberry Pi distro expert.
Currently VP R&amp;D and Co-Founder at <a target="_blank" href="https://shapedo.com/">ShapeDo</a>.</p>
Currently VP R&amp;D and Co-Founder at <a target="_blank" href="https://shapedo.com/" class="highlight">ShapeDo</a>.</p>
<h3 class="pb-1 body-2">...and many more</h3>
<p class="body-1">Thank you to <a target="_blank"
href="https://github.com/photoprism/photoprism/graphs/contributors">everyone who
<p class="body-1">Thank you to
<a target="_blank" href="https://github.com/photoprism/photoprism/graphs/contributors" class="highlight">everyone who
contributed</a> to this project!</p>

2
frontend/src/pages/about/license.vue
View file

@ -707,6 +707,8 @@
&lt;<a target="_blank" href="https://www.gnu.org/licenses/">https://www.gnu.org/licenses/</a>&gt;.</p>
</v-container>
<p-about-footer></p-about-footer>
</div>
</template>

42
frontend/src/pages/help.vue Normal file
View file

@ -0,0 +1,42 @@
<template>
<div class="p-page p-page-help" id="photoprism-help">
<v-toolbar flat color="secondary">
<v-toolbar-title>
<translate>Help</translate>
</v-toolbar-title>
<v-spacer></v-spacer>
<v-btn icon @click.stop="bugReport" class="action-support">
<v-icon>bug_report</v-icon>
</v-btn>
</v-toolbar>
<v-container fluid class="px-4 py-2">
<p-help-websockets></p-help-websockets>
</v-container>
<p-about-footer></p-about-footer>
</div>
</template>
<script>
import PHelpWebsockets from "./help/websockets.vue"
export default {
name: 'p-page-help',
components: {
PHelpWebsockets
},
data() {
return {
topic: this.$route.params.pathMatch,
};
},
methods: {
bugReport() {
console.log("BUG REPORT");
}
},
};
</script>

127
frontend/src/pages/help/websockets.vue Normal file
View file

@ -0,0 +1,127 @@
<template>
<div class="p-help-websockets">
<h3>PhotoPrism uses <a target="_blank" href="https://en.wikipedia.org/wiki/WebSocket">WebSockets</a>
for two-way interactive communication between your browser and the server</h3>
<p>If the connection fails and can't be reestablished, your browser won't receive photo counts, log messages, or metadata updates.</p>
<p>To fix this issue, please make sure you didn't block WebSocket connections in your browser or firewall and check the
configuration of any Web server that is in front of PhotoPrism:</p>
<v-expansion-panel class="elevation-0">
<v-expansion-panel-content class="secondary-light mb-1">
<template v-slot:header>
<div>How to reverse proxy WebSockets with Apache 2.4</div>
</template>
<v-card class="white">
<v-card-text>
<p>
In this <a target="_blank" href="https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-reverse-proxy-websockets-with-apache-2-4/">tutorial</a>, you will learn how to configure Apache Web Server 2.4 to reverse proxy WebSockets.
</p>
<p>
Example configuration:
</p>
<pre>
RewriteEngine on
RewriteCond ${HTTP:Upgrade} websocket [NC]
RewriteCond ${HTTP:Connection} upgrade [NC]
RewriteRule .* "ws:/photoprism:2342/$1" [P,L]
ProxyPass / http://photoprism:2342/
ProxyPassReverse / http://photoprism:2342/
ProxyRequests off
</pre>
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content class="secondary-light mb-1">
<template v-slot:header>
<div>How to configure NGINX to proxy WebSockets</div>
</template>
<v-card class="white">
<v-card-text>
<p>
In this <a target="_blank" href="https://www.serverlab.ca/tutorials/linux/web-servers-linux/how-to-configure-nginx-for-websockets/">tutorial</a>, you will learn how to configure NGINX WebSocket connections between your client and backend services.
</p>
<p>
Example configuration:
</p>
<pre>
http {
server {
server_mame example.com
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $host;
proxy_pass http://photoprism:2342;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}
}
</pre>
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content class="secondary-light mb-1">
<template v-slot:header>
<div>How to configure Caddy 1 to proxy WebSockets</div>
</template>
<v-card class="white">
<v-card-text>
<p>
Example configuration:
</p>
<pre>
example.com {
proxy / photoprism:2342 {
websocket
transparent
}
}
</pre>
<p>
See <a target="_blank" href="https://caddyserver.com/v1/docs/websocket">documentation</a> for details.
</p>
</v-card-text>
</v-card>
</v-expansion-panel-content>
<v-expansion-panel-content class="secondary-light mb-1">
<template v-slot:header>
<div>How to configure Caddy 2 to proxy WebSockets</div>
</template>
<v-card class="white">
<v-card-text>
<p>
WebSocket proxying &quot;just works&quot; in Caddy 2; there is no need to &quot;enable&quot; websockets like for Caddy 1.
</p>
<p>
Example configuration:
</p>
<pre>
example.com {
reverse_proxy photoprism:2342
}
</pre>
<p>
See <a target="_blank" href="https://caddyserver.com/docs/v2-upgrade#proxy">documentation</a> for details.
</p>
</v-card-text>
</v-card>
</v-expansion-panel-content>
</v-expansion-panel>
</div>
</template>
<script>
export default {
name: 'p-help-websockets',
data() {
return {
};
},
methods: {
},
};
</script>

2
frontend/src/pages/settings/account.vue
View file

@ -64,6 +64,8 @@
</v-card-actions>
</v-card>
</v-form>
<p-about-footer></p-about-footer>
</div>
</template>

25
frontend/src/pages/settings/general.vue
View file

@ -340,30 +340,9 @@
</v-layout>
</v-card-actions>
</v-card>
<v-card flat tile class="mt-0 px-1 application">
<v-card-actions>
<v-layout wrap align-top>
<v-flex xs12 sm6 class="px-2 pb-2 body-1">
<router-link to="/about">
PhotoPrism™
{{$config.get("version")}}
<br>© 2018-2020 Michael Mayer
</router-link>
</v-flex>
<v-flex xs12 sm6 class="px-2 pb-2 body-1 text-xs-left text-sm-right">
<a href="https://docs.photoprism.org/credits/" class="secondary-dark--text"
target="_blank">Thank you</a> to everyone who made this possible!
<br>
<a href="https://raw.githubusercontent.com/photoprism/photoprism/develop/NOTICE"
class="secondary-dark--text" target="_blank">
3rd-party software packages</a>
</v-flex>
</v-layout>
</v-card-actions>
</v-card>
</v-form>
<p-about-footer></p-about-footer>
</div>
</template>

7
frontend/src/routes.js
View file

@ -42,6 +42,7 @@ import Login from "pages/login.vue";
import Discover from "pages/discover.vue";
import About from "pages/about/about.vue";
import License from "pages/about/license.vue";
import Help from "pages/help.vue";
import {$gettext} from "common/vm";
const c = window.__CONFIG__;
@ -64,6 +65,12 @@ export default [
component: License,
meta: {title: c.name, auth: false},
},
{
name: "help",
path: "/help*",
component: Help,
meta: {title: c.name, auth: false},
},
{
name: "login",
path: "/login",