Merge branch 'fix-save-sessionstorage' into 'firstSteps'

Fix save sessionstorage

See merge request !2

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 {

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;
 }

src/view/home.js

 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),
       }),
     ]);
   }

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
       )
     );