dox-sequence-diagram-ui/src/main/webapp/lib/ecomp/asdc/sequencer/components/editor/components/toolbar/Toolbar.jsx

   1 /*!
   2  * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
   3  *
   4  * Licensed under the Apache License, Version 2.0 (the "License");
   5  * you may not use this file except in compliance with the License.
   6  * You may obtain a copy of the License at
   7  *
   8  * http://www.apache.org/licenses/LICENSE-2.0
   9  *
  10  * Unless required by applicable law or agreed to in writing, software
  11  * distributed under the License is distributed on an "AS IS" BASIS,
  12  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
  13  * or implied. See the License for the specific language governing
  14  * permissions and limitations under the License.
  15  */
  16
  17 import React from 'react';
  18
  19 import Common from '../../../../common/Common';
  20
  21 import iconPlus from '../../../../../../../../res/ecomp/asdc/sequencer/sprites/icons/plus.svg';
  22 import iconOpen from '../../../../../../../../res/ecomp/asdc/sequencer/sprites/icons/open.svg';
  23
  24 /**
  25  * Toolbar view. Buttons offered in the toolbar depend on the mode. Unless in demo mode,
  26  * all you get are the buttons for toggling between JSON/YAML/Designer.
  27  */
  28 export default class Toolbar extends React.Component {
  29
  30   // ///////////////////////////////////////////////////////////////////////////////////////////////
  31
  32   /**
  33    * Construct view.
  34    */
  35   constructor(props, context) {
  36     super(props, context);
  37     this.application = Common.assertType(this.props.application, 'Object');
  38     this.editor = Common.assertType(this.props.editor, 'Object');
  39     this.mode = 'design';
  40   }
  41
  42   // ///////////////////////////////////////////////////////////////////////////////////////////////
  43
  44   /**
  45    * Set editor mode, one of {design, json, yaml}.
  46    * @param mode
  47    */
  48   setMode(mode = 'design') {
  49     this.mode = mode;
  50   }
  51
  52   // ///////////////////////////////////////////////////////////////////////////////////////////////
  53
  54   /**
  55    * Render into the DOM.
  56    */
  57   render() {
  58
  59     const demo = this.application.getOptions().demo;
  60     const demoCss = demo ? '' : 'asdc-hide';
  61
  62     return (
  63       <div className={`asdcs-editor-toolbar ${demoCss}`}>
  64         <div className="asdcs-editor-toolbar-demo">
  65           <button className="asdcs-button-new" data-title="New sequence">
  66             <svg>
  67               <use xlinkHref={iconPlus} className="asdcs-icon" />
  68             </svg>
  69           </button>
  70           <button className="asdcs-button-open" data-title="Open sequence">
  71             <svg>
  72               <use xlinkHref={iconOpen} className="asdcs-icon" />
  73             </svg>
  74           </button>
  75           <button className="asdcs-button-save" data-title="Save checkpoint">
  76             <svg>
  77               <use xlinkHref="#icon--save" className="asdcs-icon" />
  78             </svg>
  79           </button>
  80           <button className="asdcs-button-validate" data-title="Validate">
  81             <svg>
  82               <use xlinkHref="#icon--validate" className="asdcs-icon" />
  83             </svg>
  84           </button>
  85           <button className="asdcs-button-download" data-title="Download">
  86             <svg>
  87               <use xlinkHref="#icon--download" className="asdcs-icon" />
  88             </svg>
  89           </button>
  90           <button className="asdcs-button-upload" data-title="Upload">
  91             <svg>
  92               <use xlinkHref="#icon--upload" className="asdcs-icon" />
  93             </svg>
  94           </button>
  95         </div>
  96         <div className="asdcs-editor-toolbar-toggle">
  97           <button className="asdcs-button-design asdcs-button-mode asdcs-button-toggle-left">
  98             Design
  99           </button>
 100           <button className="asdcs-button-json asdcs-button-mode asdcs-button-toggle-center">
 101             JSON
 102           </button>
 103           <button className="asdcs-button-yaml asdcs-button-mode asdcs-button-toggle-right">
 104             YAML
 105           </button>
 106         </div>
 107       </div>
 108     );
 109   }
 110
 111   // ///////////////////////////////////////////////////////////////////////////////////////////////
 112   // ///////////////////////////////////////////////////////////////////////////////////////////////
 113   // ///////////////////////////////////////////////////////////////////////////////////////////////
 114   // ///////////////////////////////////////////////////////////////////////////////////////////////
 115   // ///////////////////////////////////////////////////////////////////////////////////////////////
 116   // ///////////////////////////////////////////////////////////////////////////////////////////////
 117   // ///////////////////////////////////////////////////////////////////////////////////////////////
 118   // ///////////////////////////////////////////////////////////////////////////////////////////////
 119   // ///////////////////////////////////////////////////////////////////////////////////////////////
 120   // ///////////////////////////////////////////////////////////////////////////////////////////////
 121
 122   /**
 123    * Initialize eventhandlers.
 124    * @private
 125    *
 126   _initEvents() {
 127
 128     $('button.asdcs-button-open', this.$el).click(() => {
 129       this._doDemoOpen();
 130     });
 131
 132     $('button.asdcs-button-new', this.$el).click(() => {
 133       this._doDemoNew();
 134     });
 135
 136     $('button.asdcs-button-save', this.$el).click(() => {
 137       this._doDemoSave();
 138     });
 139
 140     $('button.asdcs-button-upload', this.$el).click(() => {
 141       this._doDemoUpload();
 142     });
 143
 144     $('button.asdcs-button-download', this.$el).click(() => {
 145       this._doDemoDownload();
 146     });
 147
 148     $('button.asdcs-button-validate', this.$el).click(() => {
 149       this._doDemoValidate();
 150     });
 151
 152     $('button.asdcs-button-json', this.$el).click((e) => {
 153       if ($(e.target).hasClass('asdcs-active')) {
 154         return;
 155       }
 156       this.editor.toggleToJSON();
 157     });
 158
 159     $('button.asdcs-button-yaml', this.$el).click((e) => {
 160       if ($(e.target).hasClass('asdcs-active')) {
 161         return;
 162       }
 163       this.editor.toggleToYAML();
 164     });
 165
 166     $('button.asdcs-button-design', this.$el).click((e) => {
 167       if ($(e.target).hasClass('asdcs-active')) {
 168         return;
 169       }
 170       this.editor.toggleToDesign();
 171     });
 172   }
 173   */
 174
 175   // ///////////////////////////////////////////////////////////////////////////////////////////////
 176
 177   /**
 178    * Demo action.
 179    *
 180   _doDemoOpen() {
 181     const complete = function complete() {
 182       const sequencer = this.application.getSequencer();
 183       const scenarios = sequencer.getDemoScenarios();
 184       sequencer.setModel(scenarios.getECOMP());
 185     };
 186     this.application.showConfirmDialog('[DEMO MODE] Open a canned DEMO sequence ' +
 187       'via the public #setModel() API?', complete);
 188
 189   }
 190   */
 191
 192   // ///////////////////////////////////////////////////////////////////////////////////////////////
 193
 194   /**
 195    * Demo action.
 196    *
 197   _doDemoNew() {
 198     const complete = function complete() {
 199       const sequencer = this.application.getSequencer();
 200       sequencer.newModel();
 201     };
 202     this.application.showConfirmDialog('[DEMO MODE] Create an empty sequence via the ' +
 203       'public #newModel() API?', complete);
 204   }
 205   */
 206
 207   // ///////////////////////////////////////////////////////////////////////////////////////////////
 208
 209   /**
 210    * Demo action.
 211    *
 212   _doDemoSave() {
 213     const sequencer = this.application.getSequencer();
 214     Logger.info(`[DEMO MODE] model:\n${JSON.stringify(sequencer.getModel(), null, 4)}`);
 215     this.application.showInfoDialog('[DEMO MODE] Retrieved model via the public #getModel ' +
 216       'API and logged its JSON to the console.');
 217   }
 218   */
 219
 220   // ///////////////////////////////////////////////////////////////////////////////////////////////
 221
 222   /**
 223    * Demo action.
 224    *
 225   _doDemoUpload() {
 226     const sequencer = this.application.getSequencer();
 227     const svg = sequencer.getSVG();
 228     // console.log(`[DEMO MODE] SVG:\n${svg}`);
 229     const $control = this.$el.closest('.asdcs-control');
 230     Logger.info(`parent: ${$control.length}`);
 231     const $form = $('form.asdcs-export', $control);
 232     Logger.info(`form: ${$form.length}`);
 233     $('input[name=svg]', $form).val(svg);
 234     try {
 235       $form.submit();
 236     } catch (e) {
 237       Logger.error(e);
 238       this.application.showErrorDialog('[DEMO MODE] Export service not available. Retrieved ' +
 239         'SVG via the public #getSVG API and dumped it to the console.');
 240     }
 241   }
 242   */
 243
 244   // ///////////////////////////////////////////////////////////////////////////////////////////////
 245
 246   /**
 247    * Demo action.
 248    *
 249   _doDemoDownload() {
 250     const json = JSON.stringify(this.application.getSequencer().getModel());
 251     const $control = this.$el.closest('.asdcs-control');
 252     const $a = $('<a download="model.json" style="display:none">').appendTo($control);
 253     $a.attr('href', `data:application/json;charset=utf-8,${encodeURIComponent(json)}`);
 254     $a[0].click();
 255     $a.remove();
 256   }
 257   */
 258
 259   // ///////////////////////////////////////////////////////////////////////////////////////////////
 260
 261   /**
 262    * Demo action.
 263    *
 264   _doDemoValidate() {
 265     this.application.showInfoDialog('[DEMO MODE] Dumping validation result to the console.');
 266     const errors = this.application.getModel().validate();
 267     Logger.info(`[DEMO MODE] Validation: ${JSON.stringify(errors, null, 4)}`);
 268   }
 269   */
 270 }
 271
 272 Toolbar.propTypes = {
 273   application: React.PropTypes.object.isRequired,
 274   editor: React.PropTypes.object.isRequired,
 275 };