printer socket io and stuff

2 files changed, 88 insertions, 9 deletions

diff --git a/lib/awprint/client/components/App.jsx b/lib/awprint/client/components/App.jsx
index 46886a3..4c4f9be 100644
--- a/lib/awprint/client/components/App.jsx
+++ b/lib/awprint/client/components/App.jsx
@@ -1,34 +1,99 @@
 import React from 'react'
 
+import Modal from './Modal.jsx'
+
+const MAX_JOB_SIZE = 120
+
 export default class App extends React.Component {
   constructor(props) {
     super()
     this.state = {
-      prints: []
+      jobs: [],
+      modalVisible: false,
     }
+    this.load()
+    this.socket = io()
+    this.socket.on('job', (job) => this.prepend(job))
+  }
+  
+  load() {
     fetch('/_services/awprint/index')
     .then( res => {
       return res.json()
-    }).then( prints => {
-      this.setState({ prints })
+    }).then( jobs => {
+      this.setState({ jobs })
     }).catch( e => {
       console.error(e)
     })
   }
+  
+  prepend(job) {
+    let jobs = this.state.jobs
+    if (this.state.jobs.length > MAX_JOB_SIZE) this.state.jobs.pop()
+    jobs.unshift(job)
+    console.log(job)
+    this.setState({ jobs })
+  }
+  
+  print(job) {
+    job.printed = true
+    this.setState({ modalVisible: true })
+
+    // first request updates database
+    fetch('/_services/awprint/print', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        _id: job._id,
+      })
+    })
+    .then( res => {
+      setTimeout( () => {
+        this.setState({ modalVisible: false })
+      }, 1500)
+    })
+  /*
+    // second request actually prints it?
+    fetch('/_services/awprint/print', {
+      method: 'POST',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        url: job.url,
+      })
+    })
+    .then( res => {
+      this.setState({ modalVisible: false })
+    })
+  */
+  }
   render() {
-    const prints = this.state.prints.map( (print,i) => {
-      const className = print.printed ? 'print printed' : 'print'
-      const date = print.date.replace(/T/,' - ').replace(/:\d\d\..*/,'')
+    const jobs = this.state.jobs.map( (job,i) => {
+      const className = job.printed ? 'print printed' : 'print'
+      const datePartz = job.date.split('T')
+      const timePartz = datePartz[1].split(':')
+      const hour = Number(timePartz[0]) - 4
+      const mins = timePartz[1]
+      const date = datePartz[0] + ' - ' + hour + ':' + mins
       return (
-        <div key={i} className={className} onClick={() => this.print(print)}>
-          <img src={print.url} />
+        <div key={i} className={className} onClick={() => this.print(job)}>
+          <img src={job.url} />
           <div className='date'>{date}</div>
         </div>
       )
     })
     return (
       <div>
-        {prints}
+        {jobs}
+        <Modal visible={this.state.modalVisible}>
+          <img src='public/spinner.svg' />
+          <div>PRINTING YOUR PICTURE</div>
+        </Modal>
       </div>
     )
   }
diff --git a/lib/awprint/client/components/Modal.jsx b/lib/awprint/client/components/Modal.jsx
new file mode 100644
index 0000000..d3cac86
--- /dev/null
+++ b/lib/awprint/client/components/Modal.jsx
@@ -0,0 +1,14 @@
+import React, { Component } from 'react'
+
+export default class Modal extends Component {
+  render() {
+    let className = this.props.visible ? 'modal visible' : 'modal'
+    return (
+      <div className={className}>
+        <div className='inner'>
+          {this.props.children}
+        </div>
+      </div>
+    )
+  }
+}