Commit 8808eeb2 authored by Hermann's avatar Hermann Committed by Sandro Lutz
Browse files

Use Tabs for event edit view

parent 2d8fcac9
import m from 'mithril';
import { RaisedButton, RadioGroup, Switch, Dialog, Button } from 'polythene-mithril';
import { RadioGroup, Switch, Dialog, Button, Tabs, Icon } from 'polythene-mithril';
import { FileInput } from 'amiv-web-ui-components';
import { styler } from 'polythene-core-css';
import { TabsCSS, ButtonCSS } from 'polythene-css';
// eslint-disable-next-line import/extensions
import { apiUrl, ownUrl } from 'networkConfig';
import { colors } from '../style';
import { icons } from '../views/elements';
import EditView from '../views/editView';
const style = [
{
'.mywrapper': {
padding: '10px',
},
},
];
styler.add('event-add', style);
ButtonCSS.addStyle('.nav-button', {
color_light_border: 'rgba(0, 0, 0, 0.09)',
color_light_disabled_background: 'rgba(0, 0, 0, 0.09)',
color_light_disabled_border: 'transparent',
});
TabsCSS.addStyle('.edit-tabs', {
color_light: '#555555',
// no hover effect
color_light_hover: '#555555',
color_light_selected: colors.amiv_blue,
color_light_tab_indicator: colors.amiv_blue,
});
export default class newEvent extends EditView {
constructor(vnode) {
......@@ -160,26 +167,28 @@ export default class newEvent extends EditView {
const titles = ['Event Description', 'When and Where?', 'Signups', 'Advertisement'];
if (this.rightSubmit) titles.push('Images');
const buttonRight = m(RaisedButton, {
label: 'next',
const buttonRight = m(Button, {
label: m('div.pe-button__label', m(Icon, {
svg: { content: m.trust(icons.ArrowRight) },
style: { top: '-5px', float: 'right' },
}), 'next'),
disabled: this.currentpage === titles.length,
ink: false,
events: {
onclick: () => {
this.currentpage = Math.min(this.currentpage + 1, 5);
},
},
border: true,
className: 'nav-button',
events: { onclick: () => { this.currentpage = Math.min(this.currentpage + 1, 5); } },
});
const buttonLeft = m(RaisedButton, {
label: 'previous',
const buttonLeft = m(Button, {
label: m('div.pe-button__label', m(Icon, {
svg: { content: m.trust(icons.ArrowLeft) },
style: { top: '-5px', float: 'left' },
}), 'previous'),
disabled: this.currentpage === 1,
ink: false,
events: {
onclick: () => {
this.currentpage = Math.max(1, this.currentpage - 1);
},
},
border: true,
className: 'nav-button',
events: { onclick: () => { this.currentpage = Math.max(1, this.currentpage - 1); } },
});
const radioButtonSelectionMode = m(RadioGroup, {
......@@ -224,171 +233,173 @@ export default class newEvent extends EditView {
// navigation bar
// all pages are displayed, current is highlighted,
// validation errors are shown per page by red icon-background
m('div', {
style: { display: 'flex', 'justify-content': 'space-around', 'flex-wrap': 'wrap' },
}, [...titles.entries()].map(numAndTitle => m('div', m('div', {
style: {
border: (this.currentpage === numAndTitle[0] + 1) ?
'2px solid black' :
'2px solid #888888',
color: (this.currentpage === numAndTitle[0] + 1) ? 'black' : '#888888',
'background-color': errorPages[numAndTitle[0]] ? '#ff7a56' : 'white',
'border-radius': '20px',
height: '40px',
'margin-bottom': '7px',
padding: '12px',
'font-size': '20px',
'line-height': '11px',
},
onclick: () => { this.currentpage = numAndTitle[0] + 1; },
}, numAndTitle[1])))),
// page 1: title & description
m('div', {
style: { display: (this.currentpage === 1) ? 'block' : 'none' },
}, this.form.renderPage({
title_en: { type: 'text', label: 'English Event Title' },
catchphrase_en: { type: 'text', label: 'English Catchphrase' },
description_en: {
type: 'text',
label: 'English Description',
multiLine: true,
rows: 5,
},
title_de: { type: 'text', label: 'German Event Title' },
catchphrase_de: { type: 'text', label: 'German Catchphrase' },
description_de: {
type: 'text',
label: 'German Description',
multiLine: true,
rows: 5,
},
})),
// page 2: when & where
m('div', {
style: { display: (this.currentpage === 2) ? 'block' : 'none' },
}, this.form.renderPage({
time_start: { type: 'datetime', label: 'Event Start Time' },
time_end: { type: 'datetime', label: 'Event End Time' },
location: { type: 'text', label: 'Location' },
m(Tabs, {
className: 'edit-tabs',
// it would be too easy if we could set the background color in the theme class
style: { backgroundColor: colors.orange },
onChange: ({ index }) => { this.currentpage = index + 1; },
centered: true,
selectedTabIndex: this.currentpage - 1,
}, [...titles.entries()].map((numAndTitle) => {
const buttonAttrs = { label: numAndTitle[1] };
if (errorPages[numAndTitle[0]]) {
// in case of an error, put an error icon before the tab label
buttonAttrs.label = m('div', m(Icon, {
svg: { content: m.trust(icons.error) },
style: { top: '-2px', 'margin-right': '4px' },
}), numAndTitle[1]);
}
return buttonAttrs;
})),
// page 3: registration
m('div', {
style: { display: (this.currentpage === 3) ? 'block' : 'none' },
}, [
m(Switch, {
label: 'people have to pay something to attend this event',
style: { 'margin-bottom': '5px' },
checked: this.hasprice,
onChange: ({ checked }) => {
this.hasprice = checked;
if (!checked) {
// if it originally had a price, set to null, otherwise delete
if (this.controller.data.price) this.form.data.price = null;
else delete this.form.data.price;
}
},
}),
...this.hasprice && this.form.renderPage({
price: { type: 'number', label: 'Price', min: 0, step: 0.01 },
}),
m('br'),
m(Switch, {
label: 'people have to register to attend this event',
checked: this.hasregistration,
onChange: ({ checked }) => {
this.hasregistration = checked;
if (!checked) {
delete this.form.data.spots;
delete this.form.data.time_register_start;
delete this.form.data.time_register_end;
delete this.form.data.add_fields_sbb;
delete this.form.data.add_fields_food;
delete this.form.data.allow_email_signup;
delete this.form.data.selection_strategy;
}
},
}),
...this.hasregistration && this.form.renderPage({
spots: {
type: 'number',
label: 'Number of Spots',
help: '0 for open event',
focusHelp: true,
min: 0,
},
time_register_start: { type: 'datetime', label: 'Start of Registration' },
time_register_end: { type: 'datetime', label: 'End of Registration' },
add_fields_food: { type: 'checkbox', label: 'Food limitations' },
add_fields_sbb: { type: 'checkbox', label: 'SBB Abbonement' },
}),
m('br'),
...this.hasregistration && this.form.renderPage({
allow_email_signup: { type: 'checkbox', label: 'Allow Email Signup' },
}),
this.hasregistration && radioButtonSelectionMode,
]),
// page 4: advertisement
m('div', {
style: { display: (this.currentpage === 4) ? 'block' : 'none' },
}, [
...this.form.renderPage({
time_advertising_start: {
type: 'datetime',
label: 'Start of Advertisement',
required: true,
m('div.maincontainer', { style: { height: 'calc(100vh - 180px)', 'overflow-y': 'auto' } }, [
// page 1: title & description
m('div', {
style: { display: (this.currentpage === 1) ? 'block' : 'none' },
}, this.form.renderPage({
title_en: { type: 'text', label: 'English Event Title' },
catchphrase_en: { type: 'text', label: 'English Catchphrase' },
description_en: {
type: 'text',
label: 'English Description',
multiLine: true,
rows: 5,
},
time_advertising_end: {
type: 'datetime',
label: 'End of Advertisement',
required: true,
title_de: { type: 'text', label: 'German Event Title' },
catchphrase_de: { type: 'text', label: 'German Catchphrase' },
description_de: {
type: 'text',
label: 'German Description',
multiLine: true,
rows: 5,
},
}),
// TODO is deactivated now
/*
m.trust('Priority<br>'),
m(Slider, {
min: 1,
max: 10,
stepSize: 1,
})),
// page 2: when & where
m('div', {
style: { display: (this.currentpage === 2) ? 'block' : 'none' },
}, this.form.renderPage({
time_start: { type: 'datetime', label: 'Event Start Time' },
time_end: { type: 'datetime', label: 'Event End Time' },
location: { type: 'text', label: 'Location' },
})),
// page 3: registration
m('div', {
style: { display: (this.currentpage === 3) ? 'block' : 'none' },
}, [
m(Switch, {
label: 'people have to pay something to attend this event',
style: { 'margin-bottom': '5px' },
checked: this.hasprice,
onChange: ({ checked }) => {
this.hasprice = checked;
if (!checked) {
// if it originally had a price, set to null, otherwise delete
if (this.controller.data.price) this.form.data.price = null;
else delete this.form.data.price;
}
},
}),
...this.hasprice && this.form.renderPage({
price: { type: 'number', label: 'Price', min: 0, step: 0.01 },
}),
m('br'),
m(Switch, {
label: 'people have to register to attend this event',
checked: this.hasregistration,
onChange: ({ checked }) => {
this.hasregistration = checked;
if (!checked) {
delete this.form.data.spots;
delete this.form.data.time_register_start;
delete this.form.data.time_register_end;
delete this.form.data.add_fields_sbb;
delete this.form.data.add_fields_food;
delete this.form.data.allow_email_signup;
delete this.form.data.selection_strategy;
}
},
}),
...this.hasregistration && this.form.renderPage({
spots: {
type: 'number',
label: 'Number of Spots',
help: '0 for open event',
focusHelp: true,
min: 0,
},
time_register_start: { type: 'datetime', label: 'Start of Registration' },
time_register_end: { type: 'datetime', label: 'End of Registration' },
add_fields_food: { type: 'checkbox', label: 'Food limitations' },
add_fields_sbb: { type: 'checkbox', label: 'SBB Abbonement' },
}),
m('br'),
...this.hasregistration && this.form.renderPage({
allow_email_signup: { type: 'checkbox', label: 'Allow Email Signup' },
}),
this.hasregistration && radioButtonSelectionMode,
]),
// page 4: advertisement
m('div', {
style: { display: (this.currentpage === 4) ? 'block' : 'none' },
}, [
...this.form.renderPage({
time_advertising_start: {
type: 'datetime',
label: 'Start of Advertisement',
required: true,
},
time_advertising_end: {
type: 'datetime',
label: 'End of Advertisement',
required: true,
},
}),
// TODO is deactivated now
/*
m.trust('Priority<br>'),
m(Slider, {
min: 1,
max: 10,
stepSize: 1,
// value: this.data.priority || 1,
// onChange: ({ value }) => { this.data.priority = value; },
}),
*/
...this.form.renderPage({
show_website: { type: 'checkbox', label: 'Advertise on Website' },
show_announce: { type: 'checkbox', label: 'Advertise in Announce' },
show_infoscreen: {
type: 'checkbox',
label: 'Advertise on Infoscreen',
},
}),
]),
// page 5: images
m('div', {
style: { display: (this.currentpage === 5) ? 'block' : 'none' },
}, [
['thumbnail', 'banner', 'poster', 'infoscreen'].map(key => [
this.form.data[`img_${key}`] ? m('img', {
src: `${apiUrl}${this.form.data[`img_${key}`].file}`,
style: { 'max-height': '50px', 'max-width': '100px' },
}) : m('div', `currently no ${key} image set`),
m(FileInput, this.form.bind({
name: `new_${key}`,
label: `New ${key} Image`,
accept: 'image/png, image/jpeg',
})),
// value: this.data.priority || 1,
// onChange: ({ value }) => { this.data.priority = value; },
}),
*/
...this.form.renderPage({
show_website: { type: 'checkbox', label: 'Advertise on Website' },
show_announce: { type: 'checkbox', label: 'Advertise in Announce' },
show_infoscreen: {
type: 'checkbox',
label: 'Advertise on Infoscreen',
},
}),
]),
// page 5: images
m('div', {
style: { display: (this.currentpage === 5) ? 'block' : 'none' },
}, [
['thumbnail', 'banner', 'poster', 'infoscreen'].map(key => [
this.form.data[`img_${key}`] ? m('img', {
src: `${apiUrl}${this.form.data[`img_${key}`].file}`,
style: { 'max-height': '50px', 'max-width': '100px' },
}) : m('div', `currently no ${key} image set`),
m(FileInput, this.form.bind({
name: `new_${key}`,
label: `New ${key} Image`,
accept: 'image/png, image/jpeg',
})),
]),
]),
// bottom back & forth
m('div', {
style: {
display: 'flex',
'justify-content': 'space-between',
padding: '35px',
'padding-top': '20px',
},
}, [buttonLeft, buttonRight]),
]),
// bottom back & forth
m('div', {
style: {
display: 'flex',
'justify-content': 'space-between',
padding: '35px',
'padding-top': '20px',
},
}, [buttonLeft, buttonRight]),
], this.rightSubmit ? 'submit' : 'propose');
], this.rightSubmit ? 'submit' : 'propose', false);
}
}
......@@ -84,7 +84,7 @@ export default class EditView extends ItemView {
this.submit();
}
layout(children, buttonLabel = 'submit') {
layout(children, buttonLabel = 'submit', wrapInContainer = true) {
return m('div', { style: { 'background-color': 'white' } }, [
m(Toolbar, { style: { 'background-color': colors.orange } }, [
m(IconButton, {
......@@ -101,9 +101,10 @@ export default class EditView extends ItemView {
events: { onclick: () => { this.beforeSubmit(); } },
}),
]),
m('div.maincontainer', {
wrapInContainer && m('div.maincontainer', {
style: { height: 'calc(100vh - 130px)', 'overflow-y': 'scroll', padding: '10px' },
}, children),
!wrapInContainer && children,
]);
}
}
......@@ -20,6 +20,7 @@ export const icons = {
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>',
menu: '<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="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>',
studydoc: '<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="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>',
error: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>',
};
// Property as specified by material design: small, grey title and larger
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment