feature (add): form file

client/helpers/mimetype.js

@@ -22,11 +22,13 @@ export function opener(file){
         return 'editor';
     }else if(['audio/wav', 'audio/mp3', 'audio/flac', 'audio/ogg'].indexOf(mime) !== -1){
         return 'audio';
+    }else if(mime === "application/x-form"){
+        return 'form';
     }else if(mime.split('/')[0] === 'video' || mime === "application/ogg"){
         return 'video';
-    }else if(mime.split('/')[0] === "application")
+    }else if(mime.split('/')[0] === "application"){
         return 'download';
-    else{
+    }else{
         return 'editor';
     }
 }

client/pages/viewerpage.js

@@ -6,7 +6,7 @@ import './error.scss';
 import { Files } from '../model/';
 import { BreadCrumb, Bundle, NgIf, Loader, Container, EventReceiver, EventEmitter, LoggedInOnly , ErrorPage } from '../components/';
 import { debounce, opener, notify } from '../helpers/';
-import { AudioPlayer, FileDownloader, ImageViewer, PDFViewer } from './viewerpage/';
+import { AudioPlayer, FileDownloader, ImageViewer, PDFViewer, FormViewer } from './viewerpage/';
 
 const VideoPlayer = (props) => (
     <Bundle loader={import(/* webpackChunkName: "video" */"../pages/viewerpage/videoplayer")} symbol="VideoPlayer">
@@ -61,13 +61,12 @@ export class ViewerPage extends React.Component {
             });
         };
         const data_fetch = (app) => {
-            if(app === 'editor'){
+            if(app === "editor" || app === "form"){
                 return Promise.all([
                     Files.cat(this.state.path),
                     Files.options(this.state.path)
                 ]).then((d) => {
                     const [content, options] = d;
-                    options.allowed
                     this.setState({
                         content: content,
                         loading: false,
@@ -154,6 +153,10 @@ export class ViewerPage extends React.Component {
                   <NgIf cond={this.state.opener === 'video'}>
                     <VideoPlayer data={this.state.url} filename={this.state.filename} path={this.state.path} />
                   </NgIf>
+                  <NgIf cond={this.state.opener === 'form'}>
+                    <FormViewer filename={this.state.filename}
+                             content={this.state.content || ""} />
+                  </NgIf>
                   <NgIf cond={this.state.opener === 'audio'}>
                     <AudioPlayer data={this.state.url} filename={this.state.filename} />
                   </NgIf>

client/pages/viewerpage/formbuilder.scss

@@ -1,35 +0,0 @@
-.component_page_viewerpage .page_container > div{
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;
-}
-.component_formbuilder{
-    height: 100%;
-
-    .component_container{
-        margin-top: 10px;
-        margin-bottom: 40px;
-        label{ font-size: 0.94em; }
-    }
-    .component_input, .component_textarea, select{
-        font-size: 1.1em;
-        border-radius: 2px;
-        background: white;
-        padding-left: 5px;
-        border: 1px solid rgba(70, 99, 114, 0.1);
-        transition: 0.1s ease border;
-        &:hover{ border: 1px solid rgba(70, 99, 114, 0.2); }
-        &:focus{ border: 1px solid var(--primary); }
-    }
-    .component_button{
-        margin-top: 10px;
-        border: 1px solid var(--emphasis-primary);
-    }
-
-    select{
-        width: 100%;
-        margin: 0 0 8px 0;
-        padding: 5px 0px 5px 0px;
-        color: inherit;
-        &:hover, &:focus, &:active{outline: none;}
-    }
-}

client/pages/viewerpage/formviewer.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { MenuBar } from './menubar';
+import { Container, FormBuilder } from '../../components/';
+import './formviewer.scss';
+
+export class FormViewer extends React.Component {
+    constructor(props){
+        super(props);
+        this.state = {
+            form: {
+                "test": {label: "test", type: "text", "value": null, default: "polo", placeholder: "test"},
+                "something": {label: "test", type: "text", "value": null, default: "polo", placeholder: "test"}
+            }
+        };
+    }
+
+    componentDidMount(){
+        this.setState({form: JSON.parse(this.props.content)});
+    }
+
+    onChange(){
+        this.setState({refresh: Math.random()});
+    }
+
+    render(){
+        console.log(this.state.form);
+        return (
+            <div className="component_formviewer">
+              <MenuBar title={this.props.filename} download={this.props.data} />
+              <div className="formviewer_container">
+                <Container>
+                  <form className="sticky">
+                    <FormBuilder form={this.state.form} onChange={this.onChange.bind(this)} render={ ($input, props, struct, onChange) => {
+                          return (
+                              <label className={"no-select"}>
+                                <div>
+                                  <span>
+                                    { struct.label }:
+                                  </span>
+                                  <div style={{width: '100%'}}>
+                                    { $input }
+                                  </div>
+                                </div>
+                              </label>
+                          );
+                    }}/>
+                </form>
+                </Container>
+                </div>
+            </div>
+        );
+    }
+}

client/pages/viewerpage/formviewer.scss

@@ -0,0 +1,32 @@
+.component_formviewer{
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    width: 100%;
+
+    > .formviewer_container {
+        padding-top: 20px;
+        padding-bottom: 50px;
+        overflow-y: auto;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        width: 100%;
+
+        .formbuilder{
+            label.no-select > div {
+                display: flex;
+                line-height: 30px;
+
+                > span {
+                    display: inline-block;
+                    width: 150px;
+                    max-width: 150px;
+                    text-align: right;
+                    padding-right: 15px;
+                    color: var(--emphasis);
+                }
+            }
+        }
+    }
+}

client/pages/viewerpage/index.js

@@ -3,5 +3,6 @@ export { FileDownloader } from './filedownloader';
 export { ImageViewer } from './imageviewer';
 export { PDFViewer } from './pdfviewer';
 export { IDE } from './ide';
+export { FormViewer } from './formviewer';
 // Those are commented because they will be delivered as a separate chunk
 //export { VideoPlayer } from './videoplayer';

config/mime.json

@@ -39,6 +39,7 @@
 	"exe": "application/octet-stream",
 	"flac": "audio/flac",
 	"flv": "video/x-flv",
+    "form": "application/x-form",
 	"gif": "image/gif",
 	"gz": "application/x-gzip",
 	"hqx": "application/mac-binhex40",