diff --git a/src/index.js b/src/index.js index 70e063bf29b28da8a7c9a79252989e55e84ab753..154500848e283362413fc3b5a3a011f7bb7da235 100644 --- a/src/index.js +++ b/src/index.js @@ -8,7 +8,6 @@ import home from './view/home'; import './style/base.less'; import layout from './view/layout'; import { mainNavigation } from './models/mainNavigation'; -import testing from "./view/testing"; function layoutWith(view) { return { diff --git a/src/style/sortable.less b/src/style/sortable.less index 97314a984b136602ef45c699c476386f98912edd..a6f129591ba6d1e0576b6383dc2864f930b8c898 100644 --- a/src/style/sortable.less +++ b/src/style/sortable.less @@ -11,14 +11,28 @@ border-top-left-radius: .25rem; border-top-right-radius: .25rem; } + + &:last-child { + border-bottom-left-radius: .25rem; + border-bottom-right-radius: .25rem; + } +} + +.list-group{ + border-radius: .5rem; + border-color: #e8462b !important ; + padding: 1rem; + border: 3px solid; } ul.right-list { width: 45%; float: left; + margin: 1rem; } ul.left-list { width: 45%; float: left; + margin: 1rem; } diff --git a/src/view/home.js b/src/view/home.js index c2304c713af47279b0906b123d35b5ba3947c171..f0ff056f26fa050a52b6ef3f5ca8727b1389287c 100644 --- a/src/view/home.js +++ b/src/view/home.js @@ -1,47 +1,41 @@ import m from 'mithril'; -import { IconButton, Button } from 'polythene-mithril'; import mithrilSortable from '../wrappers/mithril-sortable'; import { apiUrl } from '../../config'; import Ev from '../controller/ev'; -import save from "save-file"; -/* const ex1 = []; -retrieveEvents(); -const ex2 = []; -let ex3 = []; -*/ - -const ex1 = []; // Liste nur mit Eventtiteln -const ex2 = []; // Liste nur mit Eventtiteln -const ex3 = []; // Liste mit ev (Events) id, titelde und ort -retrieveEvents(); +const non_selected_events = []; // List of non-selected events +const selected_events = []; // List of selected events // Abfrage an die AMIV API retrieve - async function retrieveEvents() { - let events = []; const result = await m.request({ method: 'GET', url: `${apiUrl}/events/`, }); - events = result._items; - events.forEach(i => { - ex3.push(new Ev({ i: i._id }, i.title_de, i.location)); - ex1.push(i.title_de); + + // add the already selected from previous page load to the selected list + const selected = window.sessionStorage.getItem('selected_events'); + result._items.forEach(i => { + if (selected.includes(i._id)) { + selected_events.push({ id: i._id, content: i.title_de }); + } + non_selected_events.push({ id: i._id, content: i.title_de }); }); + + // if in 'selected' were events that are not in the api anymore, remove. + const new_selected = selected_events.map(element => element.id); + window.sessionStorage.setItem('selected_events', new_selected); } -function saveSelection() { - let items = []; - items = window.sessionStorage.getItem('items'); - const events = []; - //items.forEach(item => events.push(ex3[item])); - //window.sessionStorage.setItem('events', events); - window.sessionStorage.setItem('ex1', ex1); - //window.sessionStorage.setItem('ex3', ex3); +function saveSelection(items) { + window.sessionStorage.setItem('selected_events', items); } export default class Main { + static oninit() { + retrieveEvents(); + } + static view() { return m('div', [ m('ul.left-list', m('h1', 'Zukünftige Events')), @@ -51,36 +45,21 @@ export default class Main { className: 'list-group col', group: 'shared', component: 'li.list-group-item', - items: ex1, + items: non_selected_events, options: { animation: 150, }, - onChange: items => { - console.log('LOG 1'); - }, }), m(mithrilSortable, { wrapperTag: 'ul.right-list', className: 'list-group col', group: 'shared', component: 'li.list-group-item', - items: ex2, + items: selected_events, options: { animation: 150, }, - onChange: items => { - console.log('LOG 2'); - }, - }), - m(Button, { - label: 'Bestätigen', - className: 'button button:hover', - events: { - onclick: event => { - console.log('knopf wurde gedrueckt'); - saveSelection(); - }, - }, + onChange: items => saveSelection(items), }), ]); } diff --git a/src/wrappers/mithril-sortable.js b/src/wrappers/mithril-sortable.js index 52cb57ae9fdcb14c54c38d32e8067c574b15f187..cdc7925aeb6839b8a4884631be40874977321f6a 100644 --- a/src/wrappers/mithril-sortable.js +++ b/src/wrappers/mithril-sortable.js @@ -16,16 +16,6 @@ const store = { activeComponent: null, }; -function itemsByIndexes(items = [], indexes = []) { - const newItems = []; - indexes - .map(idx => parseInt(idx, 10)) - .forEach(idx => { - newItems.push(items[idx]); - }); - return newItems; -} - const mithrilSortable = { oninit() { this._sortable = null; @@ -54,17 +44,17 @@ const mithrilSortable = { if (name === 'onChoose') { store.nextSibling = e.item.nextElementSibling; store.activeComponent = vnode; - } else if (name === 'onAdd' || name === 'onUpdate') { + } else if (name === 'onAdd' || name === 'onUpdate' || name === 'onRemove') { const items = this._sortable.toArray(); const remote = store.activeComponent; const remoteItems = remote.state._sortable.toArray(); if (remote !== vnode) { - console.log(items, remoteItems); + // console.log(items, remoteItems); window.sessionStorage.setItem('items', items); window.sessionStorage.setItem('remoteItems', remoteItems); } if (vnode.attrs.onChange) { - vnode.attrs.onChange(itemsByIndexes(vnode.attrs.items, remoteItems)); + vnode.attrs.onChange(items); } } }; @@ -82,9 +72,9 @@ const mithrilSortable = { m( attrs.component, { - 'data-id': i, + 'data-id': item.id || i, }, - item + item.content ) );