local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Added handling if the user is offline (#35)

Browse source
This commit is contained in:
konrad 2019-10-16 21:27:21 +00:00 committed by Gitea
parent 2a7871cf96
commit 3211e1e8ea
6 changed files with 1167 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/images/llama-nightscape.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 126 KiB

970
public/images/llama-nightscape.svg Normal file
View file

File diff suppressed because one or more lines are too long
Side by side

After

Width:  |  Height:  |  Size: 174 KiB

38
src/App.vue
View file

@ -1,6 +1,8 @@
<template>
<div id="app">
<nav class="navbar main-theme is-fixed-top" role="navigation" aria-label="main navigation" v-if="user.authenticated && user.infos.type === authTypes.USER">
<div>
<div v-if="isOnline">
<nav class="navbar main-theme is-fixed-top" role="navigation" aria-label="main navigation"
v-if="user.authenticated && user.infos.type === authTypes.USER">
<div class="navbar-brand">
<router-link :to="{name: 'home'}" class="navbar-item logo">
<img src="/images/logo-full.svg" alt="Vikunja"/>
@ -32,8 +34,12 @@
</div>
</nav>
<div v-if="user.authenticated && user.infos.type === authTypes.USER">
<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive"><icon icon="bars"></icon></a>
<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive"><icon icon="times"></icon></a>
<a @click="mobileMenuActive = true" class="mobilemenu-show-button" v-if="!mobileMenuActive">
<icon icon="bars"></icon>
</a>
<a @click="mobileMenuActive = false" class="mobilemenu-hide-button" v-if="mobileMenuActive">
<icon icon="times"></icon>
</a>
<div class="app-container">
<div class="namespace-container" :class="{'is-active': mobileMenuActive}">
<div class="menu top-menu">
@ -92,12 +98,16 @@
<div class="spinner" :class="{ 'is-loading': namespaceService.loading}"></div>
<template v-for="n in namespaces">
<div :key="n.id">
<router-link v-tooltip.right="'Settings'" :to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings" v-if="n.id > 0">
<router-link v-tooltip.right="'Settings'"
:to="{name: 'editNamespace', params: {id: n.id} }" class="nsettings"
v-if="n.id > 0">
<span class="icon">
<icon icon="cog"/>
</span>
</router-link>
<router-link v-tooltip="'Add a new list in the ' + n.name + ' namespace'" :to="{ name: 'newList', params: { id: n.id} }" class="nsettings" :key="n.id + 'newList'" v-if="n.id > 0">
<router-link v-tooltip="'Add a new list in the ' + n.name + ' namespace'"
:to="{ name: 'newList', params: { id: n.id} }" class="nsettings"
:key="n.id + 'newList'" v-if="n.id > 0">
<span class="icon">
<icon icon="plus"/>
</span>
@ -108,7 +118,8 @@
</div>
<ul class="menu-list" :key="n.id + 'child'">
<li v-for="l in n.lists" :key="l.id">
<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}</router-link>
<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}
</router-link>
</li>
</ul>
</template>
@ -151,6 +162,13 @@
</div>
<notifications position="bottom left"/>
</div>
<div class="app offline" v-else>
<div class="offline-message">
<h1>You are offline.</h1>
<p>Please check your network connection and try again.</p>
</div>
</div>
</div>
</template>
<script>
@ -174,9 +192,15 @@
currentDate: new Date(),
userMenuActive: false,
authTypes: authTypes,
isOnline: true,
}
},
beforeMount() {
// Check if the user is offline, show a message then
this.isOnline = navigator.onLine
window.addEventListener('online', () => this.isOnline = navigator.onLine);
window.addEventListener('offline', () => this.isOnline = navigator.onLine);
// Password reset
if (this.$route.query.userPasswordReset !== undefined) {
localStorage.removeItem('passwordResetToken') // Delete an eventually preexisting old token

19
src/ServiceWorker/sw.js
View file

@ -1,4 +1,21 @@
/* eslint-disable no-console */
/* eslint-disable no-undef */
console.log('Hello from the service worker');
// Cache assets
workbox.routing.registerRoute(
// This regexp matches all files in precache-manifest
new RegExp('.+\\.(css|json|js|eot|svg|ttf|woff|woff2|png|html|txt)$'),
new workbox.strategies.StaleWhileRevalidate()
);
// Always send api reqeusts through the network
workbox.routing.registerRoute(
new RegExp('(\\/)?api\\/v1\\/.*$'),
new workbox.strategies.NetworkOnly()
);
// Cache everything else
workbox.routing.registerRoute(
new RegExp('.*'),
new workbox.strategies.StaleWhileRevalidate()
);

25
src/styles/theme.scss
View file

@ -315,3 +315,28 @@ h1,h2,h3,h4,h5,h6{
text-align: right;
}
}
.offline {
background: url('../public/images/llama-nightscape.png') no-repeat center;
-webkit-background-size: cover;
background-size: cover;
height: 100vh;
.offline-message {
text-align: center;
position: absolute;
width: 100vw;
bottom: 5vh;
color: $white;
padding: 0 1em;
h1 {
font-weight: bold;
font-size: 1.5em;
text-align: center;
color: $white;
font-weight: 700 !important;
font-size: 1.5em;
}
}
}

4
todo.md
View file

@ -156,4 +156,8 @@
## Fancy stuff
* [ ] PWA
* [x] Basics
* [ ] Should only show a small notification somewhere when offline
* [ ] Cache even api requests, but show a notification on lists "content may be outdated"
* [ ] Need a strategy to show all of this if the page is offline
* [ ] Vuex