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

   1 /*!
   2  * Copyright © 2016-2017 European Support Limited
   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 import PropTypes from 'prop-types';
  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      * Construct view.
  33      */
  34     constructor(props, context) {
  35         super(props, context);
  36         this.application = Common.assertType(this.props.application, 'Object');
  37         this.editor = Common.assertType(this.props.editor, 'Object');
  38         this.mode = 'design';
  39     }
  40
  41     // ///////////////////////////////////////////////////////////////////////////////////////////////
  42
  43     /**
  44      * Set editor mode, one of {design, json, yaml}.
  45      * @param mode
  46      */
  47     setMode(mode = 'design') {
  48         this.mode = mode;
  49     }
  50
  51     // ///////////////////////////////////////////////////////////////////////////////////////////////
  52
  53     /**
  54      * Render into the DOM.
  55      */
  56     render() {
  57         const demo = this.application.getOptions().demo;
  58         const demoCss = demo ? '' : 'asdc-hide';
  59
  60         return (
  61             <div className={`asdcs-editor-toolbar ${demoCss}`}>
  62                 <div className="asdcs-editor-toolbar-demo">
  63                     <button
  64                         className="asdcs-button-new"
  65                         data-title="New sequence">
  66                         <svg>
  67                             <use xlinkHref={iconPlus} className="asdcs-icon" />
  68                         </svg>
  69                     </button>
  70                     <button
  71                         className="asdcs-button-open"
  72                         data-title="Open sequence">
  73                         <svg>
  74                             <use xlinkHref={iconOpen} className="asdcs-icon" />
  75                         </svg>
  76                     </button>
  77                     <button
  78                         className="asdcs-button-save"
  79                         data-title="Save checkpoint">
  80                         <svg>
  81                             <use
  82                                 xlinkHref="#icon--save"
  83                                 className="asdcs-icon"
  84                             />
  85                         </svg>
  86                     </button>
  87                     <button
  88                         className="asdcs-button-validate"
  89                         data-title="Validate">
  90                         <svg>
  91                             <use
  92                                 xlinkHref="#icon--validate"
  93                                 className="asdcs-icon"
  94                             />
  95                         </svg>
  96                     </button>
  97                     <button
  98                         className="asdcs-button-download"
  99                         data-title="Download">
 100                         <svg>
 101                             <use
 102                                 xlinkHref="#icon--download"
 103                                 className="asdcs-icon"
 104                             />
 105                         </svg>
 106                     </button>
 107                     <button className="asdcs-button-upload" data-title="Upload">
 108                         <svg>
 109                             <use
 110                                 xlinkHref="#icon--upload"
 111                                 className="asdcs-icon"
 112                             />
 113                         </svg>
 114                     </button>
 115                 </div>
 116                 <div className="asdcs-editor-toolbar-toggle">
 117                     <button className="asdcs-button-design asdcs-button-mode asdcs-button-toggle-left">
 118                         Design
 119                     </button>
 120                     <button className="asdcs-button-json asdcs-button-mode asdcs-button-toggle-center">
 121                         JSON
 122                     </button>
 123                     <button className="asdcs-button-yaml asdcs-button-mode asdcs-button-toggle-right">
 124                         YAML
 125                     </button>
 126                 </div>
 127             </div>
 128         );
 129     }
 130
 131     // ///////////////////////////////////////////////////////////////////////////////////////////////
 132     // ///////////////////////////////////////////////////////////////////////////////////////////////
 133     // ///////////////////////////////////////////////////////////////////////////////////////////////
 134     // ///////////////////////////////////////////////////////////////////////////////////////////////
 135     // ///////////////////////////////////////////////////////////////////////////////////////////////
 136     // ///////////////////////////////////////////////////////////////////////////////////////////////
 137     // ///////////////////////////////////////////////////////////////////////////////////////////////
 138     // ///////////////////////////////////////////////////////////////////////////////////////////////
 139     // ///////////////////////////////////////////////////////////////////////////////////////////////
 140     // ///////////////////////////////////////////////////////////////////////////////////////////////
 141
 142     /**
 143    * Initialize eventhandlers.
 144    * @private
 145    *
 146   _initEvents() {
 147
 148     $('button.asdcs-button-open', this.$el).click(() => {
 149       this._doDemoOpen();
 150     });
 151
 152     $('button.asdcs-button-new', this.$el).click(() => {
 153       this._doDemoNew();
 154     });
 155
 156     $('button.asdcs-button-save', this.$el).click(() => {
 157       this._doDemoSave();
 158     });
 159
 160     $('button.asdcs-button-upload', this.$el).click(() => {
 161       this._doDemoUpload();
 162     });
 163
 164     $('button.asdcs-button-download', this.$el).click(() => {
 165       this._doDemoDownload();
 166     });
 167
 168     $('button.asdcs-button-validate', this.$el).click(() => {
 169       this._doDemoValidate();
 170     });
 171
 172     $('button.asdcs-button-json', this.$el).click((e) => {
 173       if ($(e.target).hasClass('asdcs-active')) {
 174         return;
 175       }
 176       this.editor.toggleToJSON();
 177     });
 178
 179     $('button.asdcs-button-yaml', this.$el).click((e) => {
 180       if ($(e.target).hasClass('asdcs-active')) {
 181         return;
 182       }
 183       this.editor.toggleToYAML();
 184     });
 185
 186     $('button.asdcs-button-design', this.$el).click((e) => {
 187       if ($(e.target).hasClass('asdcs-active')) {
 188         return;
 189       }
 190       this.editor.toggleToDesign();
 191     });
 192   }
 193   */
 194
 195     // ///////////////////////////////////////////////////////////////////////////////////////////////
 196
 197     /**
 198    * Demo action.
 199    *
 200   _doDemoOpen() {
 201     const complete = function complete() {
 202       const sequencer = this.application.getSequencer();
 203       const scenarios = sequencer.getDemoScenarios();
 204       sequencer.setModel(scenarios.getECOMP());
 205     };
 206     this.application.showConfirmDialog('[DEMO MODE] Open a canned DEMO sequence ' +
 207       'via the public #setModel() API?', complete);
 208
 209   }
 210   */
 211
 212     // ///////////////////////////////////////////////////////////////////////////////////////////////
 213
 214     /**
 215    * Demo action.
 216    *
 217   _doDemoNew() {
 218     const complete = function complete() {
 219       const sequencer = this.application.getSequencer();
 220       sequencer.newModel();
 221     };
 222     this.application.showConfirmDialog('[DEMO MODE] Create an empty sequence via the ' +
 223       'public #newModel() API?', complete);
 224   }
 225   */
 226
 227     // ///////////////////////////////////////////////////////////////////////////////////////////////
 228
 229     /**
 230    * Demo action.
 231    *
 232   _doDemoSave() {
 233     const sequencer = this.application.getSequencer();
 234     Logger.info(`[DEMO MODE] model:\n${JSON.stringify(sequencer.getModel(), null, 4)}`);
 235     this.application.showInfoDialog('[DEMO MODE] Retrieved model via the public #getModel ' +
 236       'API and logged its JSON to the console.');
 237   }
 238   */
 239
 240     // ///////////////////////////////////////////////////////////////////////////////////////////////
 241
 242     /**
 243    * Demo action.
 244    *
 245   _doDemoUpload() {
 246     const sequencer = this.application.getSequencer();
 247     const svg = sequencer.getSVG();
 248     // console.log(`[DEMO MODE] SVG:\n${svg}`);
 249     const $control = this.$el.closest('.asdcs-control');
 250     Logger.info(`parent: ${$control.length}`);
 251     const $form = $('form.asdcs-export', $control);
 252     Logger.info(`form: ${$form.length}`);
 253     $('input[name=svg]', $form).val(svg);
 254     try {
 255       $form.submit();
 256     } catch (e) {
 257       Logger.error(e);
 258       this.application.showErrorDialog('[DEMO MODE] Export service not available. Retrieved ' +
 259         'SVG via the public #getSVG API and dumped it to the console.');
 260     }
 261   }
 262   */
 263
 264     // ///////////////////////////////////////////////////////////////////////////////////////////////
 265
 266     /**
 267    * Demo action.
 268    *
 269   _doDemoDownload() {
 270     const json = JSON.stringify(this.application.getSequencer().getModel());
 271     const $control = this.$el.closest('.asdcs-control');
 272     const $a = $('<a download="model.json" style="display:none">').appendTo($control);
 273     $a.attr('href', `data:application/json;charset=utf-8,${encodeURIComponent(json)}`);
 274     $a[0].click();
 275     $a.remove();
 276   }
 277   */
 278
 279     // ///////////////////////////////////////////////////////////////////////////////////////////////
 280
 281     /**
 282    * Demo action.
 283    *
 284   _doDemoValidate() {
 285     this.application.showInfoDialog('[DEMO MODE] Dumping validation result to the console.');
 286     const errors = this.application.getModel().validate();
 287     Logger.info(`[DEMO MODE] Validation: ${JSON.stringify(errors, null, 4)}`);
 288   }
 289   */
 290 }
 291
 292 Toolbar.propTypes = {
 293     application: PropTypes.object.isRequired,
 294     editor: PropTypes.object.isRequired
 295 };