diff --git a/client/helpers/mimetype.js b/client/helpers/mimetype.js index b6a520e2..cb70a010 100644 --- a/client/helpers/mimetype.js +++ b/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'; } } diff --git a/client/pages/viewerpage.js b/client/pages/viewerpage.js index 91d4be23..b98523d1 100644 --- a/client/pages/viewerpage.js +++ b/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) => ( @@ -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 { + + + diff --git a/client/pages/viewerpage/formbuilder.scss b/client/pages/viewerpage/formbuilder.scss deleted file mode 100644 index ff761244..00000000 --- a/client/pages/viewerpage/formbuilder.scss +++ /dev/null @@ -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;} - } -} diff --git a/client/pages/viewerpage/formviewer.js b/client/pages/viewerpage/formviewer.js new file mode 100644 index 00000000..1268f52f --- /dev/null +++ b/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 ( +
+ +
+ +
+ { + return ( + + ); + }}/> + +
+
+
+ ); + } +} diff --git a/client/pages/viewerpage/formviewer.scss b/client/pages/viewerpage/formviewer.scss new file mode 100644 index 00000000..e584e578 --- /dev/null +++ b/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); + } + } + } + } +} diff --git a/client/pages/viewerpage/index.js b/client/pages/viewerpage/index.js index 4158ce33..7c7bbb99 100644 --- a/client/pages/viewerpage/index.js +++ b/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'; diff --git a/config/mime.json b/config/mime.json index c56b1afa..1c0d7ff4 100644 --- a/config/mime.json +++ b/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",