QuickTemplates 3/3

app/actions/layout.js

@@ -20,6 +20,11 @@ export const CLOSE_TOOLBOX = 'CLOSE_TOOLBOX';
 export const TOGGLE_PHYSICS = 'TOGGLE_PHYSICS';
 export const ADD_RESOURCE = 'ADD_RESOURCE';
 export const DELETE_RESOURCE = 'DELETE_RESOURCE';
+export const OPEN_QUICKTEMPLATE = 'OPEN_QUICKTEMPLAT';
+export const CLOSE_QUICKTEMPLATE = 'CLOSE_QUICKTEMPLATE';
+export const OPEN_TEMPLATE = 'OPEN_TEMPLATE';
+export const INCREMENT = 'INCREMENT';
+export const DECREMENT = 'DECREMENT';
 
 type actionType = {
   type: string
@@ -135,3 +140,27 @@ export function deleteResource(id: string) {
     dispatch({ type: DELETE_RESOURCE, id });
   };
 }
+
+export function openTemplateWindow() {
+  return {
+    type: OPEN_QUICKTEMPLATE
+  };
+}
+
+export function openTemplate(deployPath: string) {
+  return (dispatch: (action: actionType) => void) => {
+    dispatch({
+      type: OPEN_TEMPLATE,
+      deployPath
+    });
+  };
+}
+
+export function changePage(action: string) {
+  return (dispatch: (action: actionType) => void) => {
+    dispatch({
+      type: action
+    });
+  };
+}
+

app/components/App.js

@@ -12,6 +12,7 @@ import RightSidebar from './RightSidebar';
 import Toolbox from './Toolbox';
 import CustomWindow from './Window';
 import { Resource } from '../types/template';
+import QuickTemplate from './QuickTemplate';
 import styles from './App.css'; // eslint-disable-line flowtype-errors/show-errors
 
 export default class App extends Component {
@@ -31,7 +32,9 @@ export default class App extends Component {
     layout: Object,
     isSettingsWindowOpen: boolean,
     currentView: string,
-    fileDialog: Object
+    fileDialog: Object,
+    openTemplate: (deployPath: string) => void,
+    changePage: (action: string) => void
   };
 
   render() {
@@ -51,6 +54,13 @@ export default class App extends Component {
             openVisualization={this.props.openVisualization}
             openToolbox={this.props.openToolbox}
             />
+          <QuickTemplate
+            dispatchButtonClick={(action) => this.props.dispatchButtonClick(action)}
+            openTemplate={(deployPath) => this.props.openTemplate(deployPath)}
+            isQuickTemplateOpen={this.props.layout.isQuickTemplateOpen}
+            changePage={(action) => this.props.changePage(action)}
+            quickViewSettings={this.props.layout.quickViewSettings}
+            />
           <ProgressBar progress={this.props.layout.progress} />
           <CustomWindow
             activeWindow={this.props.layout.activeWindow}

app/components/QuickTemplate.css

@@ -0,0 +1,19 @@
+.quicktemplate {
+    position: relative;
+  }
+
+  .row {
+    padding-top: 2px !important;
+    padding-bottom: 2px !important;
+  }
+
+  .buttonRight {
+    position: absolute;
+    right: 20px;
+  }
+
+  .buttonLeft {
+    position: absolute;
+    left: 20px;
+  }
+

app/components/QuickTemplate.js

@@ -0,0 +1,74 @@
+// @flow
+import React, { Component } from 'react';
+import { Button, Form, Header, Icon, Grid, Modal, Divider } from 'semantic-ui-react';
+
+import styles from './QuickTemplate.css';
+
+const fs = require('fs');
+
+const dirMetadata = 'app/data/aqt';
+export default class QuickTemplate extends Component {
+  props: {
+    dispatchButtonClick: (action: string) => void,
+    openTemplate: (deployPath: string) => void,
+    isQuickTemplateOpen: boolean,
+    changePage: (action: string) => void,
+    quickViewSettings: Object
+  }
+
+  openTemplate(deployPath: string) {
+    this.props.openTemplate(deployPath);
+    this.props.dispatchButtonClick('CLOSE_QUICKTEMPLATE');
+  }
+
+  generateGrid() {
+    const templates = JSON.parse(fs.readFileSync(`./${dirMetadata}/output_${this.props.quickViewSettings.currentPage}.json`, 'utf8'));
+
+    const grid = [];
+    for (let i = 0; i < templates.length - 1; i += 2) {
+      grid.push(<Grid.Row columns={2} key={i}>
+        <Grid.Column>
+          <Form.Field><Button className="ui blue basic button" type="button" fluid onClick={() => this.openTemplate(templates[i].deployPath)}>{templates[i].itemDisplayName}</Button></Form.Field>
+        </Grid.Column>
+        <Grid.Column>
+          <Form.Field><Button className="ui green basic button" type="button" fluid onClick={() => this.openTemplate(templates[i].deployPath)}>{templates[i + 1].itemDisplayName}</Button></Form.Field>
+        </Grid.Column>
+      </Grid.Row>);
+    }
+
+    return grid;
+  }
+
+  isLeftButtonDisabled() {
+    return this.props.quickViewSettings.currentPage === 1;
+  }
+
+  isRightButtonDisabled() {
+    return this.props.quickViewSettings.currentPage === this.props.quickViewSettings.totalPages;
+  }
+
+  render() {
+    return (
+      <Modal open={this.props.isQuickTemplateOpen} onClose={() => this.props.dispatchButtonClick('CLOSE_QUICKTEMPLATE')} closeIcon="close">
+        <Modal.Content className={styles.quicktemplate}>
+          <Header as="h2" icon textAlign="center">
+            <Icon name="key" />
+            Sample templates
+            <Header.Subheader>
+            Select quick template to load.
+            </Header.Subheader>
+          </Header>
+          <Divider />
+          <br />
+          <Grid>
+            {this.generateGrid()}
+          </Grid>
+          <br />
+          <Button color="blue" disabled={this.isLeftButtonDisabled()} className={styles.buttonLeft} onClick={() => this.props.changePage('DECREMENT')}><Icon name="arrow left" /></Button>
+          <Button color="green" disabled={this.isRightButtonDisabled()} className={styles.buttonRight} onClick={() => this.props.changePage('INCREMENT')}><Icon name="arrow right" /></Button>
+          <br />
+          <br />
+        </Modal.Content>
+      </Modal>);
+  }
+}

app/index.js

@@ -96,3 +96,7 @@ ipcRenderer.on('update-progress', (event, progress) => {
 ipcRenderer.on('open-window', (event, data) => {
   store.dispatch(layoutActions.openWindow(data.name, data.title, data.content));
 });
+
+ipcRenderer.on('open-quicktemplate', () => {
+  store.dispatch(layoutActions.openTemplateWindow());
+});

app/menu.js

@@ -56,6 +56,12 @@ export default class MenuBuilder {
           });
         }
       },
+      {
+        label: '&Open from a template',
+        click: () => {
+          this.mainWindow.webContents.send('open-quicktemplate');
+        }
+      },
       {
         label: '&Save a template',
         accelerator: 'Ctrl+S',

app/reducers/fileDialog.js

@@ -1,7 +1,7 @@
 // @flow
 import { OPEN_FILE, SAVE_FILE, GENERATE_IMAGE } from '../actions/fileDialog';
 import { SET_TEMPLATE } from '../actions/editor';
-import { OPEN_VISUALIZATION, CLEAR_ERRORS, ADD_RESOURCE, DELETE_RESOURCE } from '../actions/layout';
+import { OPEN_VISUALIZATION, CLEAR_ERRORS, ADD_RESOURCE, OPEN_TEMPLATE, DELETE_RESOURCE } from '../actions/layout';
 import TemplateParser from '../parsers/templateParser';
 import { Template } from '../types/template';
 import Uuid from '../utils/uuid';
@@ -121,6 +121,20 @@ export default function fileDialog(state: fileDialogStateType = initialState, ac
         rawJson: JSON.stringify(rawJson, null, '\t')
       });
     }
+    case OPEN_TEMPLATE: {
+      const jsonstring = fs.readFileSync(action.deployPath, 'utf8');
+      const templateParser = new TemplateParser(jsonstring);
+      const parsedTemplate = templateParser.parseTemplate();
+
+      TemplateParser.normalizeNames(parsedTemplate);
+
+      return Object.assign({}, state, {
+        selectedFilename: action.deployPath,
+        fileData: parsedTemplate,
+        hierarchicalLayout: false,
+        rawJson: jsonstring
+      });
+    }
     case DELETE_RESOURCE: {
       const resources = [];
       state.fileData.resources.find((r) => {

app/reducers/layout.js

@@ -14,11 +14,17 @@ import {
   CLOSE_WINDOW,
   TOGGLE_PHYSICS,
   OPEN_TOOLBOX,
-  CLOSE_TOOLBOX
+  CLOSE_TOOLBOX,
+  OPEN_QUICKTEMPLATE,
+  CLOSE_QUICKTEMPLATE,
+  INCREMENT,
+  DECREMENT
 } from '../actions/layout';
 import Window from '../types/window';
 import {MARK_EDITED, MARK_IDLE, MARK_SAVED} from '../actions/editor';
 
+const fs = require('fs');
+
 type actionType = {
   type: string
 };
@@ -38,8 +44,13 @@ type layoutStateType = {
   window: Window,
   physicsEnabled: boolean,
   isToolboxOpen: boolean,
+  isQuickTemplateOpen: boolean,
   isEdited: boolean,
-  isSaved: boolean
+  isSaved: boolean,
+  quickViewSettings: {
+    currentPage: number,
+    totalPages: number
+  }
 };
 
 const initialState = {
@@ -57,6 +68,11 @@ const initialState = {
   window: {},
   physicsEnabled: true,
   isToolboxOpen: false,
+  isQuickTemplateOpen: false,
+  quickViewSettings: {
+    currentPage: 1,
+    totalPages: fs.readdirSync('app/data/aqt').length
+  },
   isEdited: false,
   isSaved: false
 };
@@ -137,6 +153,34 @@ export default function layout(state: layoutStateType = initialState, action: ac
       return Object.assign({}, state, {
         isToolboxOpen: false
       });
+    case OPEN_QUICKTEMPLATE:
+      return Object.assign({}, state, {
+        isQuickTemplateOpen: true
+      });
+    case CLOSE_QUICKTEMPLATE:
+      return Object.assign({}, state, {
+        isQuickTemplateOpen: false
+      });
+    case INCREMENT:
+      if (state.quickViewSettings.currentPage === state.quickViewSettings.totalPages) {
+        return Object.assign({}, state, { });
+      }
+      return Object.assign({}, state, {
+        quickViewSettings: {
+          currentPage: state.quickViewSettings.currentPage + 1,
+          totalPages: state.quickViewSettings.totalPages
+        }
+      });
+    case DECREMENT:
+      if (state.quickViewSettings.currentPage === 1) {
+        return Object.assign({}, state, {});
+      }
+      return Object.assign({}, state, {
+        quickViewSettings: {
+          currentPage: state.quickViewSettings.currentPage - 1,
+          totalPages: state.quickViewSettings.totalPages
+        }
+      });
     case MARK_EDITED:
       return Object.assign({}, state, {
         isEdited: true,