2 files changed, 114 insertions, 0 deletions
diff --git a/lib/awprint/client/components/App.jsx b/lib/awprint/client/components/App.jsx
new file mode 100644
index 0000000..4c4f9be
--- /dev/null
+++ b/lib/awprint/client/components/App.jsx
@@ -0,0 +1,100 @@
+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 = {
+      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( 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 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(job)}>
+          <img src={job.url} />
+          <div className='date'>{date}</div>
+        </div>
+      )
+    })
+    return (
+      <div>
+        {jobs}
+        <Modal visible={this.state.modalVisible}>
+          <img src='public/spinner.svg' />
+          <div>PRINTING YOUR PICTURE</div>
+        </Modal>
+      </div>
+    )
+  }
+}
+\ No newline at end of file
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>
+    )
+  }
+}