From 5126f9cab437bd841cfdb7f7742ec4f7219e1427 Mon Sep 17 00:00:00 2001
From: Hermann <blumh@ethz.ch>
Date: Sun, 10 Jun 2018 22:16:54 +0200
Subject: [PATCH] return of the spinning amiv wheel: add a loading screen
---
index.html | 5 +++++
src/events/item.js | 3 ++-
src/groups/item.js | 3 ++-
src/groups/list.js | 3 ++-
src/groups/viewGroup.js | 2 +-
src/index.js | 2 +-
src/jobs/item.js | 3 ++-
src/layout.js | 33 +++++++++++++++++++++++++++++++--
src/users/userTool.js | 3 ++-
src/views/elements.js | 1 +
src/views/itemView.js | 3 ++-
11 files changed, 51 insertions(+), 10 deletions(-)
diff --git a/index.html b/index.html
index 31e5d82..dcc59a3 100644
--- a/index.html
+++ b/index.html
@@ -21,6 +21,11 @@
<link rel="icon" type="image/png" sizes="16x16" href="res/favicon/favicon-16x16.png">
<!--link href="lib/cust/main.css" rel="stylesheet"-->
+ <style>
+ @keyframes spin {
+ from { transform:rotate(0deg); }
+ to { transform:rotate(360deg); }
+} </style>
</head>
<body>
diff --git a/src/events/item.js b/src/events/item.js
index f543856..1ea3647 100644
--- a/src/events/item.js
+++ b/src/events/item.js
@@ -2,6 +2,7 @@ import m from 'mithril';
import viewEvent from './viewEvent';
import editEvent from './editEvent';
import ItemController from '../itemcontroller';
+import { loadingScreen } from '../layout';
export default class EventItem {
constructor() {
@@ -9,7 +10,7 @@ export default class EventItem {
}
view() {
- if (!this.controller || !this.controller.data) return '';
+ if (!this.controller || !this.controller.data) return m(loadingScreen);
if (this.controller.modus !== 'view') return m(editEvent, { controller: this.controller });
return m(viewEvent, { controller: this.controller });
}
diff --git a/src/groups/item.js b/src/groups/item.js
index 7489982..6ad640c 100644
--- a/src/groups/item.js
+++ b/src/groups/item.js
@@ -2,6 +2,7 @@ import m from 'mithril';
import viewGroup from './viewGroup';
import editGroup from './editGroup';
import ItemController from '../itemcontroller';
+import { loadingScreen } from '../layout';
export default class GroupItem {
constructor() {
@@ -9,7 +10,7 @@ export default class GroupItem {
}
view() {
- if (!this.controller || !this.controller.data) return '';
+ if (!this.controller || !this.controller.data) return m(loadingScreen);
if (this.controller.modus !== 'view') return m(editGroup, { controller: this.controller });
return m(viewGroup, { controller: this.controller });
}
diff --git a/src/groups/list.js b/src/groups/list.js
index 347f43c..a91f2f1 100644
--- a/src/groups/list.js
+++ b/src/groups/list.js
@@ -1,6 +1,7 @@
import m from 'mithril';
import { Card } from 'polythene-mithril';
import DatalistController from '../listcontroller';
+import { loadingScreen } from '../layout';
class GroupListItem {
@@ -27,7 +28,7 @@ export default class GroupList {
}
view() {
- if (!this.data) return '';
+ if (!this.data) return m(loadingScreen);
return m(
'div.maincontainer', { style: { display: 'flex', 'flex-wrap': 'wrap', 'margin-top': '5px' } },
diff --git a/src/groups/viewGroup.js b/src/groups/viewGroup.js
index 4a864b0..adf27fc 100644
--- a/src/groups/viewGroup.js
+++ b/src/groups/viewGroup.js
@@ -61,6 +61,7 @@ class MembersTable {
this.addmode ? m(SelectList, {
controller: this.userController,
listTileAttrs: user => Object.assign({}, { title: `${user.firstname} ${user.lastname}` }),
+ selectedText: user => `${user.firstname} ${user.lastname}`,
onSubmit: (user) => {
this.addmode = false;
this.ctrl.handler.post({
@@ -72,7 +73,6 @@ class MembersTable {
});
},
onCancel: () => { this.addmode = false; m.redraw(); },
- selectedText: user => `${user.firstname} ${user.lastname}`,
}) : '',
m(Toolbar, { compact: true }, [
m(ToolbarTitle, { text: 'Members' }),
diff --git a/src/index.js b/src/index.js
index 8d730a0..6d3d4fe 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,7 +10,7 @@ import eventDraft from './events/eventDraft';
import eventWithExport from './events/eventWithExport';
import JobTable from './jobs/table';
import JobItem from './jobs/item';
-import Layout from './layout';
+import { Layout } from './layout';
import './style';
const root = document.body;
diff --git a/src/jobs/item.js b/src/jobs/item.js
index 7c78df7..a8ab52b 100644
--- a/src/jobs/item.js
+++ b/src/jobs/item.js
@@ -2,6 +2,7 @@ import m from 'mithril';
import viewJob from './viewJob';
import editJob from './editJob';
import ItemController from '../itemcontroller';
+import { loadingScreen } from '../layout';
export default class jobModal {
constructor() {
@@ -9,7 +10,7 @@ export default class jobModal {
}
view() {
- if (!this.controller || !this.controller.data) return '';
+ if (!this.controller || !this.controller.data) return m(loadingScreen);
if (this.controller.modus !== 'view') return m(editJob, { controller: this.controller });
return m(viewJob, { controller: this.controller });
}
diff --git a/src/layout.js b/src/layout.js
index e2859a1..75e701c 100644
--- a/src/layout.js
+++ b/src/layout.js
@@ -1,6 +1,6 @@
import m from 'mithril';
import '@material/drawer';
-import { List, ListTile, Icon, Toolbar, ToolbarTitle, Dialog } from 'polythene-mithril';
+import { List, ListTile, Icon, Toolbar, ToolbarTitle, Dialog, SVG } from 'polythene-mithril';
import { styler } from 'polythene-core-css';
import { icons } from './views/elements';
import { resetSession } from './auth';
@@ -54,7 +54,7 @@ class Menupoint {
}
}
-export default class Layout {
+export class Layout {
view({ children }) {
return m('div', [
m('div.wrapper-main.smooth', [
@@ -105,3 +105,32 @@ export default class Layout {
]);
}
}
+
+export class loadingScreen {
+ view() {
+ return m('div', {
+ style: {
+ height: '100%',
+ width: '100%',
+ display: 'flex',
+ 'flex-direction': 'column',
+ 'justify-content': 'center',
+ 'align-items': 'center',
+ },
+ }, m('div', { style: { height: '5vh', 'font-size': '4em' } }, 'Loading...'), m('div', {
+ style: {
+ height: '20vh',
+ width: '20vh',
+ 'animation-name': 'spin',
+ 'animation-duration': '2500ms',
+ 'animation-iteration-count': 'infinite',
+ 'animation-timing-function': 'linear',
+ },
+ }, m('div', {
+ style: { height: '20vh', width: '20vh', display: 'inline-block' },
+ }, m(SVG, {
+ style: { width: 'inherit', height: 'inherit' },
+ content: m.trust(icons.amivWheel),
+ }))));
+ }
+}
diff --git a/src/users/userTool.js b/src/users/userTool.js
index 38355e3..903f1da 100644
--- a/src/users/userTool.js
+++ b/src/users/userTool.js
@@ -5,6 +5,7 @@ import TableView from '../views/tableView';
import { users as config } from '../resourceConfig.json';
import DatalistController from '../listcontroller';
import ItemController from '../itemcontroller';
+import { loadingScreen } from '../layout';
export class UserItem {
constructor() {
@@ -12,7 +13,7 @@ export class UserItem {
}
view() {
- if (!this.controller || !this.controller.data) return '';
+ if (!this.controller || !this.controller.data) return m(loadingScreen);
if (this.controller.modus !== 'view') return m(EditUser, { controller: this.controller });
return m(ViewUser, { controller: this.controller });
}
diff --git a/src/views/elements.js b/src/views/elements.js
index 9251eca..f43aea8 100644
--- a/src/views/elements.js
+++ b/src/views/elements.js
@@ -24,6 +24,7 @@ export const icons = {
star: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
email: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z"/><path d="M0 0h24v24H0z" fill="none"/></svg>',
department: '<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M0 0h48v48H0z" fill="none"/><path d="M24 14V6H4v36h40V14H24zM12 38H8v-4h4v4zm0-8H8v-4h4v4zm0-8H8v-4h4v4zm0-8H8v-4h4v4zm8 24h-4v-4h4v4zm0-8h-4v-4h4v4zm0-8h-4v-4h4v4zm0-8h-4v-4h4v4zm20 24H24v-4h4v-4h-4v-4h4v-4h-4v-4h16v20zm-4-16h-4v4h4v-4zm0 8h-4v4h4v-4z"/></svg>',
+ amivWheel: '<svg width="81.059502" height="80.056625" viewBox="0 0 82 82" id="svg2"><metadata id="metadata8"><rdf:RDF><cc:Work rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title></dc:title></cc:Work></rdf:RDF></metadata><defs id="defs6"><clipPath id="clipPath18"><path d="m 0,849.563 1960.52,0 L 1960.52,0 0,0 0,849.563 z" id="path20" /></clipPath></defs><g transform="matrix(1.25,0,0,-1.25,-16.34525,92.96925)" id="g10"><g transform="scale(0.1,0.1)" id="g12"><g clip-path="url(#clipPath18)" id="g16"><path d="m 566.012,342.883 c -44.453,-61.184 -130.383,-74.797 -191.563,-30.344 -3.969,2.891 -7.719,5.957 -11.289,9.18 l 41.192,29.922 40.945,-56.375 51.351,117.707 37.684,-51.848 44.727,32.5 -40.387,55.598 41.469,30.132 c 19.257,-43.32 15.679,-95.437 -14.129,-136.472 m -235.504,23.465 c -19.887,43.554 -16.5,96.32 13.601,137.75 44.45,61.179 130.383,74.789 191.559,30.336 4.352,-3.161 8.391,-6.579 12.254,-10.125 l -41.762,-30.344 -40.558,55.82 -44.735,-32.5 40.563,-55.828 -0.067,-0.051 -127.726,-12.449 38.203,-52.578 -41.332,-30.031 z m 366.523,24.668 c 1.41,10.644 2.207,21.48 2.207,32.511 0,11.028 -0.797,21.86 -2.207,32.508 l -57.468,8.922 c -2.571,11.469 -6.196,22.711 -10.864,33.57 l 41.211,40.961 c -5.109,9.438 -10.828,18.676 -17.312,27.598 -6.481,8.922 -13.496,17.223 -20.899,25 l -51.679,-26.52 c -4.372,3.84 -8.93,7.532 -13.731,11.02 -4.84,3.512 -9.801,6.73 -14.84,9.719 l 9.258,57.351 c -9.676,4.641 -19.734,8.75 -30.238,12.16 -10.481,3.407 -21.039,5.993 -31.586,7.938 l -26.262,-51.918 c -11.742,1.07 -23.519,1.031 -35.199,-0.066 l -26.293,51.984 c -10.559,-1.945 -21.109,-4.531 -31.598,-7.938 -10.492,-3.41 -20.551,-7.519 -30.23,-12.148 l 9.269,-57.434 c -10.039,-5.925 -19.582,-12.859 -28.511,-20.707 l -51.746,26.559 c -7.407,-7.777 -14.422,-16.07 -20.903,-25 -6.492,-8.922 -12.211,-18.16 -17.32,-27.598 l 41.258,-41.011 c -4.715,-10.922 -8.36,-22.137 -10.887,-33.512 l -57.481,-8.93 c -1.421,-10.64 -2.218,-21.48 -2.218,-32.508 0,-11.031 0.797,-21.855 2.218,-32.511 l 57.563,-8.934 c 2.559,-11.445 6.168,-22.668 10.82,-33.496 L 240.09,307.57 c 5.109,-9.445 10.828,-18.683 17.32,-27.597 6.481,-8.926 13.488,-17.227 20.903,-25 l 51.675,26.523 c 4.41,-3.867 9,-7.59 13.84,-11.105 4.801,-3.485 9.723,-6.688 14.723,-9.657 l -9.258,-57.336 c 9.687,-4.636 19.746,-8.75 30.238,-12.156 10.489,-3.418 21.039,-5.996 31.598,-7.929 l 26.219,51.843 c 11.773,-1.093 23.57,-1.062 35.285,0.039 l 26.238,-51.894 c 10.559,1.945 21.117,4.523 31.598,7.941 10.504,3.406 20.551,7.52 30.238,12.149 l -9.246,57.285 c 10.078,5.957 19.648,12.898 28.617,20.789 l 51.621,-26.492 c 7.403,7.773 14.41,16.074 20.899,25 6.484,8.914 12.203,18.152 17.312,27.597 l -41.148,40.907 c 4.73,10.957 8.379,22.207 10.929,33.644 l 57.34,8.895" id="path30" style="fill:#f03d30;fill-opacity:1;fill-rule:nonzero;stroke:none" /></g></g></g></svg>',
};
export class textInput {
diff --git a/src/views/itemView.js b/src/views/itemView.js
index 13c4503..7be090e 100644
--- a/src/views/itemView.js
+++ b/src/views/itemView.js
@@ -2,6 +2,7 @@ import m from 'mithril';
import { Toolbar, Dialog, Button } from 'polythene-mithril';
import { ButtonCSS } from 'polythene-css';
import { colors } from '../style';
+import { loadingScreen } from '../layout';
ButtonCSS.addStyle('.itemView-edit-button', {
color_light_background: colors.light_blue,
@@ -50,7 +51,7 @@ export default class ItemView {
}
layout(children) {
- if (!this.controller || !this.controller.data) return '';
+ if (!this.controller || !this.controller.data) return m(loadingScreen);
// update the reference to the controller data, as this may be refreshed
// in between
this.data = this.controller.data;
--
GitLab