make uploads like animism. start audio stuff

8 files changed, 54 insertions, 10 deletions

diff --git a/frontend/app/api/crud.upload.js b/frontend/app/api/crud.upload.js
index 8c1b265..2837dd4 100644
--- a/frontend/app/api/crud.upload.js
+++ b/frontend/app/api/crud.upload.js
@@ -1,4 +1,5 @@
 import { as_type } from 'app/api/crud.types'
+import { session } from 'app/session'
 
 export function crud_upload(type, data, dispatch) {
   return new Promise( (resolve, reject) => {
@@ -6,9 +7,17 @@ export function crud_upload(type, data, dispatch) {
     const { id } = data
     
     const fd = new FormData()
+    if (!data.tag) {
+      data.tag = 'misc'
+    }
 
     Object.keys(data).forEach(key => {
-      if (key !== 'id') {
+      if (key.indexOf('__') !== -1) return
+      if (key === 'id') return
+      const fn_key = `__${key}_filename`
+      if (fn_key in data) {
+        fd.append(key, data[key], data[fn_key])
+      } else {
         fd.append(key, data[key])
       }
     })
@@ -23,12 +32,11 @@ export function crud_upload(type, data, dispatch) {
     xhr.addEventListener("error", uploadFailed, false)
     xhr.addEventListener("abort", uploadCancelled, false)
     xhr.open("POST", url)
+    xhr.setRequestHeader("Authorization", "Bearer " + session.get("access_token"))
     xhr.send(fd)
 
     dispatch && dispatch({ type: as_type(type, 'upload_loading')})
 
-    let complete = false
-
     function uploadProgress (e) {
       if (e.lengthComputable) {
         const percent = Math.round(e.loaded * 100 / e.total) || 0
diff --git a/frontend/app/common/app.css b/frontend/app/common/app.css
index d9f9946..2e9dc4e 100644
--- a/frontend/app/common/app.css
+++ b/frontend/app/common/app.css
@@ -147,6 +147,16 @@ header a:active {
 header a.navbar-brand {
   font-size: .8rem;
 }
+header .arrow {
+  padding: 0.5rem 0.5rem 0.5rem 0.5rem;
+  margin-left: -0.5rem;
+  margin-right: 0.25rem;
+  transition: background 0.2s;
+  border-radius: 4px;
+}
+header .arrow:hover {
+  background: rgba(0,0,255,0.5);
+}
 
 header .username {
   cursor: pointer;
diff --git a/frontend/app/common/form.component.js b/frontend/app/common/form.component.js
index cf3e466..927b89d 100644
--- a/frontend/app/common/form.component.js
+++ b/frontend/app/common/form.component.js
@@ -76,7 +76,7 @@ export const Checkbox = props => (
       type="checkbox"
       name={props.name}
       value={1}
-      checked={props.checked}
+      checked={!!props.checked}
       onChange={(e) => props.onChange(props.name, e.target.checked)}
     />
     <span>{props.label}</span>
diff --git a/frontend/app/views/graph/components/graph.header.js b/frontend/app/views/graph/components/graph.header.js
index 46ad962..b969400 100644
--- a/frontend/app/views/graph/components/graph.header.js
+++ b/frontend/app/views/graph/components/graph.header.js
@@ -9,7 +9,8 @@ function GraphHeader(props) {
   return (
     <header>
       <div>
-        <Link to="/" className="logo"><b>{props.site.siteTitle}</b></Link>
+        <Link to="/" className="logo arrow">{"◁ "}</Link>
+        <b>{props.site.siteTitle}</b>
       </div>
       <div>
         <button onClick={() => props.graphActions.toggleAddPageForm()}>+ Add page</button>
diff --git a/frontend/app/views/graph/components/page.form.js b/frontend/app/views/graph/components/page.form.js
index 8fc00b0..2c283aa 100644
--- a/frontend/app/views/graph/components/page.form.js
+++ b/frontend/app/views/graph/components/page.form.js
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
 
 import { session } from 'app/session'
 
-import { TextInput, ColorInput, LabelDescription, TextArea, Checkbox, SubmitButton, Loader } from 'app/common'
+import { TextInput, ColorInput, Checkbox, LabelDescription, TextArea, SubmitButton, Loader } from 'app/common'
 
 const newPage = (data) => ({
   path: '',
@@ -14,6 +14,8 @@ const newPage = (data) => ({
     x: 0.05,
     y: 0.05,
     background_color: '#000000',
+    audio: "",
+    restartAudio: false,
   },
   ...data,
 })
@@ -76,6 +78,10 @@ export default class PageForm extends Component {
 
   handleSettingsChange(e) {
     const { name, value } = e.target
+    this.handleSettingsSelect(name, value)
+  }
+
+  handleSettingsSelect(name, value) {
     this.setState({
       data: {
         ...this.state.data,
@@ -147,7 +153,7 @@ export default class PageForm extends Component {
             autoComplete="off"
           />
           <ColorInput
-            title='BG'
+            title='BG Color'
             name='background_color'
             data={data.settings}
             onChange={this.handleSettingsChange.bind(this)}
@@ -159,6 +165,23 @@ export default class PageForm extends Component {
             data={data}
             onChange={this.handleChange.bind(this)}
           />
+
+          <TextInput
+            title="Background Audio URL"
+            name="audio"
+            required
+            data={data.settings}
+            onChange={this.handleSettingsChange.bind(this)}
+            autoComplete="off"
+          />
+          <Checkbox
+            label="Restart audio on load"
+            name="restartAudio"
+            checked={data.settings.restartAudio}
+            onChange={this.handleSettingsSelect.bind(this)}
+            autoComplete="off"
+          />
+
           <div className='row buttons'>
             <SubmitButton
               title={submitTitle}
diff --git a/frontend/app/views/page/components/page.header.js b/frontend/app/views/page/components/page.header.js
index eb1c3b9..998572a 100644
--- a/frontend/app/views/page/components/page.header.js
+++ b/frontend/app/views/page/components/page.header.js
@@ -10,7 +10,8 @@ function PageHeader(props) {
   return (
     <header>
       <div>
-        <Link to={props.graph.show.res ? "/" + props.graph.show.res.path : "/"} className="logo"><b>{props.site.siteTitle}</b></Link>
+        <Link to={props.graph.show.res ? "/" + props.graph.show.res.path : "/"} className="logo arrow">{"◁"}</Link>
+        <b>{props.site.siteTitle}</b>
       </div>
       <div>
         <button onClick={() => props.pageActions.toggleAddTileForm()}>+ Add tile</button>
diff --git a/frontend/app/views/page/components/tile.edit.js b/frontend/app/views/page/components/tile.edit.js
index 2ea09d1..cae9f73 100644
--- a/frontend/app/views/page/components/tile.edit.js
+++ b/frontend/app/views/page/components/tile.edit.js
@@ -29,7 +29,9 @@ class TileEdit extends Component {
 
   load() {
     const { currentEditTileId } = this.props.page.editor
-    const tile = this.props.page.show.res.tiles.filter(tile => tile.id === currentEditTileId)[0]
+    const { tiles } = this.props.page.show.res
+    if (!tiles) return
+    const tile = tiles.filter(tile => tile.id === currentEditTileId)[0]
     console.log('edit', currentEditTileId)
     this.setState({ tile })
   }
diff --git a/frontend/app/views/page/components/tile.handle.js b/frontend/app/views/page/components/tile.handle.js
index 9331cb3..f47c3cd 100644
--- a/frontend/app/views/page/components/tile.handle.js
+++ b/frontend/app/views/page/components/tile.handle.js
@@ -151,7 +151,6 @@ const generateTransform = (tile, box) => {
   if (xalign === 'center') {
     transform.push('translateX(-50%)')
   }
-  console.log(units)
   // if (x % 2 == 1) x += 0.5
   // if (y % 2 == 1) y += 0.5
   transform.push('translateX(' + x + units + ')')