2 * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
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
8 * http://www.apache.org/licenses/LICENSE-2.0
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.
17 import React from 'react';
19 import Common from '../../../../common/Common';
21 import iconPlus from '../../../../../../../../res/ecomp/asdc/sequencer/sprites/icon/plus.svg';
22 import iconOpen from '../../../../../../../../res/ecomp/asdc/sequencer/sprites/icon/open.svg';
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.
28 export default class Toolbar extends React.Component {
30 // ///////////////////////////////////////////////////////////////////////////////////////////////
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');
42 // ///////////////////////////////////////////////////////////////////////////////////////////////
45 * Set editor mode, one of {design, json, yaml}.
48 setMode(mode = 'design') {
52 // ///////////////////////////////////////////////////////////////////////////////////////////////
55 * Render into the DOM.
59 const demo = this.application.getOptions().demo;
60 const demoCss = demo ? '' : 'asdc-hide';
63 <div className={`asdcs-editor-toolbar ${demoCss}`}>
64 <div className="asdcs-editor-toolbar-demo">
65 <button className="asdcs-button-new" data-title="New sequence">
67 <use xlinkHref={iconPlus} className="asdcs-icon" />
70 <button className="asdcs-button-open" data-title="Open sequence">
72 <use xlinkHref={iconOpen} className="asdcs-icon" />
75 <button className="asdcs-button-save" data-title="Save checkpoint">
77 <use xlinkHref="#icon--save" className="asdcs-icon" />
80 <button className="asdcs-button-validate" data-title="Validate">
82 <use xlinkHref="#icon--validate" className="asdcs-icon" />
85 <button className="asdcs-button-download" data-title="Download">
87 <use xlinkHref="#icon--download" className="asdcs-icon" />
90 <button className="asdcs-button-upload" data-title="Upload">
92 <use xlinkHref="#icon--upload" className="asdcs-icon" />
96 <div className="asdcs-editor-toolbar-toggle">
97 <button className="asdcs-button-design asdcs-button-mode asdcs-button-toggle-left">
100 <button className="asdcs-button-json asdcs-button-mode asdcs-button-toggle-center">
103 <button className="asdcs-button-yaml asdcs-button-mode asdcs-button-toggle-right">
111 // ///////////////////////////////////////////////////////////////////////////////////////////////
112 // ///////////////////////////////////////////////////////////////////////////////////////////////
113 // ///////////////////////////////////////////////////////////////////////////////////////////////
114 // ///////////////////////////////////////////////////////////////////////////////////////////////
115 // ///////////////////////////////////////////////////////////////////////////////////////////////
116 // ///////////////////////////////////////////////////////////////////////////////////////////////
117 // ///////////////////////////////////////////////////////////////////////////////////////////////
118 // ///////////////////////////////////////////////////////////////////////////////////////////////
119 // ///////////////////////////////////////////////////////////////////////////////////////////////
120 // ///////////////////////////////////////////////////////////////////////////////////////////////
123 * Initialize eventhandlers.
128 $('button.asdcs-button-open', this.$el).click(() => {
132 $('button.asdcs-button-new', this.$el).click(() => {
136 $('button.asdcs-button-save', this.$el).click(() => {
140 $('button.asdcs-button-upload', this.$el).click(() => {
141 this._doDemoUpload();
144 $('button.asdcs-button-download', this.$el).click(() => {
145 this._doDemoDownload();
148 $('button.asdcs-button-validate', this.$el).click(() => {
149 this._doDemoValidate();
152 $('button.asdcs-button-json', this.$el).click((e) => {
153 if ($(e.target).hasClass('asdcs-active')) {
156 this.editor.toggleToJSON();
159 $('button.asdcs-button-yaml', this.$el).click((e) => {
160 if ($(e.target).hasClass('asdcs-active')) {
163 this.editor.toggleToYAML();
166 $('button.asdcs-button-design', this.$el).click((e) => {
167 if ($(e.target).hasClass('asdcs-active')) {
170 this.editor.toggleToDesign();
175 // ///////////////////////////////////////////////////////////////////////////////////////////////
181 const complete = function complete() {
182 const sequencer = this.application.getSequencer();
183 const scenarios = sequencer.getDemoScenarios();
184 sequencer.setModel(scenarios.getECOMP());
186 this.application.showConfirmDialog('[DEMO MODE] Open a canned DEMO sequence ' +
187 'via the public #setModel() API?', complete);
192 // ///////////////////////////////////////////////////////////////////////////////////////////////
198 const complete = function complete() {
199 const sequencer = this.application.getSequencer();
200 sequencer.newModel();
202 this.application.showConfirmDialog('[DEMO MODE] Create an empty sequence via the ' +
203 'public #newModel() API?', complete);
207 // ///////////////////////////////////////////////////////////////////////////////////////////////
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.');
220 // ///////////////////////////////////////////////////////////////////////////////////////////////
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);
238 this.application.showErrorDialog('[DEMO MODE] Export service not available. Retrieved ' +
239 'SVG via the public #getSVG API and dumped it to the console.');
244 // ///////////////////////////////////////////////////////////////////////////////////////////////
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)}`);
259 // ///////////////////////////////////////////////////////////////////////////////////////////////
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)}`);
272 Toolbar.propTypes = {
273 application: React.PropTypes.object.isRequired,
274 editor: React.PropTypes.object.isRequired,