dpaw-qweb-app/src/admin.js

Simple viewer app to interface with QGIS/monorail

/**
 * @fileOverview
 * @name admin.js
 * @author Gavin Coombes
 * @license BSD-3-Clause
 *
 * Control the flow of messages through Brocket.
 *
 * props = {
 *   active: 5, disabled: [0, 1, 2], text: [
 *  
 ]
 }
 */


let Cycle = require('@cycle/core');
let CycleDOM = require('@cycle/dom');
let Rx = require('rx');
let u = require('dpaw-brocket-utility');

let h = CycleDOM.h;
let log = u.log;

const INIT_STATE = {
  commsGrid: {
    buttons: [
      {key: 0, value: 0, active: false, disabled: true , text: 'Ignore - Silent'},
      {key: 1, value: 1, active: false, disabled: true , text: 'Ignore - Update'},
      {key: 2, value: 2, active: false, disabled: false, text: 'Ignore - Send'},
      {key: 3, value: 3, active: false, disabled: false, text: 'Listen - Silent'},
      {key: 4, value: 4, active: false, disabled: false, text: 'Listen - Update'},
      {key: 5, value: 5, active: true , disabled: false, text: 'Listen - Send'},
      {key: 6, value: 6, active: false, disabled: false, text: 'Apply - Silent'},
      {key: 7, value: 7, active: false, disabled: false, text: 'Apply - Update'},
      {key: 8, value: 8, active: false, disabled: false, text: 'Apply - Send'},
    ],
    active: 5,
    disabled: [0, 1]
  } };

function intent(DOM) {
  let buttonClicked$ = DOM.select('.comms-button')
        .events('click')
        .map( ev => ev.target.value )
        .startWith(4);
  let sendClicked$ = DOM.select('#send-feature')
        .events('click')
        .map(() => true)
        .startWith(false);
  return {
    buttonClicked$,
    sendClicked$
  };
}

function model(state$, actions) {
  // We need to take initial state and props and combine with new clicks
  let newState$ = state$.combineLatest(
    actions.buttonClicked$, mergeState)
        .do( s => log('dialogue.model: state is ', s));
  // let newState$ = state$.combineLatest(
  //   actions.buttonClicked$, (state, click) => state)
  //       .do( s => log('dialogue.model: state is ', s));
  return newState$;
}

function mergeState(state, click) {
  log(click);
  let active = click;
  let {commsGrid, ...rest} = state;
  let buttons = updateActive(active, commsGrid.buttons);
  let newGrid = {active, buttons, disabled: commsGrid.disabled};
  let newState = {commsGrid: newGrid, ...rest};
  // let newState = state;
  return newState;
}

function updateActive(active, _buttons) {
  // This does build a full set of new objects each loop.
  let newButtons = _buttons.map( b => u.defaults({}, {active: b.value == active}, b) );
  return newButtons;
}

function view(state$) {
  let vtree$ = state$.map(render);
  return vtree$;
}

function render(state) {
  let _view = h('div.admin-container', [
    h('button#send-feature', {type: 'button'}, 'Send it'),
     h('div.comms-grid', [
      state.commsGrid.buttons.map(u.partial(commsButton, state.commsGrid.active))
    ])
  ]);
  return _view;
}

function commsButton(activeValue, state) {
  let isActive = activeValue == state.value;
  let tag = 'button.comms-button' + (isActive ? '.active' : '');
  let button = h(tag, {type: 'button', disabled: state.disabled, value: state.value}, state.text);
  return button;
}

function AdminDialogue({DOM, incoming$}) {
  let initState$ = Rx.Observable.just(INIT_STATE);
  let actions = intent(DOM);
  let outgoing$ = dispatch(actions);
  let state$ = model(initState$, actions);
  let vtree$ = view(state$);
  return { state$, vtree$, outgoing$};
}

function dispatch(actions) {
  let gdata = {
    "type": "Feature",
    "geometry": {
      "type": "Polygon",
      "coordinates": [
        [
          [113.3, -26.5],
          [114.3, -26.5],
          [114.3, -25.5],
          [113.3, -25.5],
          [113.3, -26.5]]]}};
  let click$ = actions.sendClicked$.map(
    () => ({tag: 'qweb:map:add_feature', payload: gdata}));
  return click$;
}



function AdminSimple(DOM) {

  let clicked$ = DOM.select('.comm-button')
        .events('click')
        .map(() => true)
        .startWith(false);
  let state$ = clicked$
        .map( v => ({active: v}));
  let vtree$ = state$ .map(state => h('button', {type: 'button', active: true}, 'hit me'));
  return {vtree$};
};


module.exports = AdminDialogue;