From a313f42b12fd58ae2db4561454c91eaf3b776c42 Mon Sep 17 00:00:00 2001
From: Jules Laplace <julescarbon@gmail.com>
Date: Sun, 28 Apr 2019 16:20:29 +0200
Subject: stuff working

---
 client/app.css                         | 48 +++++++++++++++++--
 client/components/query.component.js   | 87 +++++++++++++++++++++-------------
 client/components/results.component.js |  9 ++--
 client/components/timing.component.js  |  2 +-
 4 files changed, 104 insertions(+), 42 deletions(-)

(limited to 'client')

diff --git a/client/app.css b/client/app.css
index a437c90..aa525da 100644
--- a/client/app.css
+++ b/client/app.css
@@ -1,14 +1,52 @@
+/* query */
+
 .query {
   margin: 10px 0;
 }
-.query label {
+.query > div,
+.query span {
+  user-select: none;
+}
+label {
+  cursor: pointer;
+}
+.query > label,
+.query > div {
   display: flex;
   flex-direction: row;
+  margin-bottom: 5px;
 }
+.query > div span,
 .query label span {
   display: inline-block;
   width: 100px;
 }
+.query > div label {
+  margin-left: 5px;
+}
+.query > div label:first-of-type {
+  margin-left: 0;
+}
+.query .image {
+  width: 200px; height: 200px;
+  background-repeat: no-repeat;
+  background-size: contain;
+  background-position: top left;
+}
+.query input[type=number] {
+  border: 1px solid transparent;
+  margin-left: 5px;
+  transition: all 0.1s;
+}
+.query input[type=number]:focus {
+  border: 1px solid #000;
+}
+.query > div.activeQuery {
+  margin-top: 10px;
+  flex-direction: column;
+}
+
+/* results */
 
 .results {
   margin: 10px 0;
@@ -21,7 +59,7 @@
   color: #333;
 }
 .results .result .img {
-  text-align: center;
+  text-align: left;
   height: 300px;
 }
 .results .result img {
@@ -31,9 +69,11 @@
 .sha256 {
   display: inline-block;
   overflow: hidden;
+  text-overflow: ellipsis;
   white-space: pre;
   max-width: 100%;
 }
 .results .result {
-  padding: 10px;
-}
\ No newline at end of file
+  margin-bottom: 10px;
+  margin-right: 10px;
+}
diff --git a/client/components/query.component.js b/client/components/query.component.js
index bd98ce8..715ea92 100644
--- a/client/components/query.component.js
+++ b/client/components/query.component.js
@@ -5,12 +5,15 @@ import { connect } from 'react-redux'
 import * as actions from '../actions'
 
 import UploadImage from './uploadImage.component'
+
 class Query extends Component {
   state = {
     image: null,
     blob: null,
     url: "",
     threshold: 20,
+    searchType: 'file',
+    thresholdChanged: false,
   }
 
   handleUpload(blob) {
@@ -19,14 +22,14 @@ class Query extends Component {
       URL.revokeObjectURL(image)
     }
     const url = URL.createObjectURL(blob)
-    this.setState({ image: url, blob })
+    this.setState({ image: url, blob, thresholdChanged: false })
     this.props.actions.upload(blob, threshold)
   }
 
   handleURL() {
     const { url, threshold } = this.state
     if (!url || url.indexOf('http') !== 0) return
-    this.setState({ image: url, blob: null })
+    this.setState({ image: url, blob: null, thresholdChanged: false })
     this.props.actions.submit(url, threshold)
   }
 
@@ -40,62 +43,82 @@ class Query extends Component {
   }
 
   render() {
-    const { url, image, threshold } = this.state
+    const { url, image, threshold, thresholdChanged, searchType } = this.state
     const style = {}
     if (image) {
-      style.maxWidth = 200
-      style.maxHeight = 200
       style.backgroundImage = 'url(' + image + ')'
-      style.backgroundSize = 'cover'
-      style.opacity = 1
     }
     return (
       <div className='query'>
-        <label>
-          <span>Query image</span>
-          <UploadImage onUpload={this.handleUpload.bind(this)} />
-        </label>
-      {/*
-        <label>
-          <span>Add a URL</span>
-          <input
-            type='text'
-            value={url}
-            onChange={e => this.setState({ url: e.target.value })}
-            onKeyDown={e => e.keyCode === 13 && this.handleURL()}
-            placeholder='https://'
-          />
-        </label>
-      */}
+        <div>
+          <span>Search by</span>
+          <label>
+            <input
+              type='radio'
+              name='searchType'
+              value='file'
+              checked={searchType === 'file'}
+              onChange={e => this.setState({ searchType: e.target.value })}
+            /> File
+          </label>
+          <label>
+            <input
+              type='radio'
+              name='searchType'
+              value='url'
+              checked={searchType === 'url'}
+              onChange={e => this.setState({ searchType: e.target.value })}
+            /> URL
+          </label>
+        </div>
+        {searchType === 'file'
+          ? <label>
+              <span>Upload image</span>
+              <UploadImage onUpload={this.handleUpload.bind(this)} />
+            </label>
+          : <label>
+              <span>Fetch URL</span>
+              <input
+                type='text'
+                value={url}
+                onChange={e => this.setState({ url: e.target.value })}
+                onKeyDown={e => e.keyCode === 13 && this.handleURL()}
+                placeholder='https://'
+              />
+            </label>
+        }
         <label>
           <span>Threshold</span>
           <input
-            type='number'
+            type='range'
             value={threshold}
             min={0}
             max={64}
             step={1}
-            onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
+            onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
           />
           <input
-            type='range'
+            type='number'
             value={threshold}
             min={0}
             max={64}
             step={1}
-            onChange={e => this.setState({ threshold: parseInt(e.target.value) }) }
+            onChange={e => this.setState({ threshold: parseInt(e.target.value), thresholdChanged: true }) }
           />
-          <button onClick={this.resubmit}>Update</button>
+          {thresholdChanged && <button onClick={this.resubmit.bind(this)}>Update</button>}
         </label>
-        {image && <div className='image' style={style} />}
+        {image &&
+          <div className='activeQuery'>
+            <b>Query image</b>
+            <div className='image' style={style} />
+          </div>
+        }
       </div>
     )
   }
 }
 
-const mapStateToProps = state => ({
-  ...state.api,
-})
+const mapStateToProps = state => ({})
 const mapDispatchToProps = dispatch => ({
   actions: bindActionCreators({ ...actions }, dispatch),
 })
diff --git a/client/components/results.component.js b/client/components/results.component.js
index a6f3052..6332135 100644
--- a/client/components/results.component.js
+++ b/client/components/results.component.js
@@ -1,8 +1,8 @@
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 
-function Results({ loading, res }) {
-  if (!res) {
+function Results({ loading, success, error, match, results }) {
+  if (!success && !error) {
     return (
       <div className='results'>
       </div>
@@ -16,8 +16,7 @@ function Results({ loading, res }) {
     )
   }
 
-  const { success, error, match, results } = res
-  if (!success) {
+  if (error) {
     return (
       <div className='results'>
         <b>Error: {error.replace(/_/g, ' ')}</b>
@@ -51,6 +50,6 @@ function Results({ loading, res }) {
   )
 }
 
-const mapStateToProps = state => state.api
+const mapStateToProps = state => (state.api.similar || {})
 
 export default connect(mapStateToProps)(Results)
diff --git a/client/components/timing.component.js b/client/components/timing.component.js
index 7473a51..f536c22 100644
--- a/client/components/timing.component.js
+++ b/client/components/timing.component.js
@@ -8,6 +8,6 @@ function Timing({ timing }) {
   return null
 }
 
-const mapStateToProps = state => state.api
+const mapStateToProps = state => (state.api.similar || {})
 
 export default connect(mapStateToProps)(Timing)
-- 
cgit v1.2.3-70-g09d2