validate UI done?

application/endpoints.py

@@ -49,11 +49,21 @@ class PersonList(Resource):
 
             session = Session()
 
+            # this indicates that the captured face should be use for identification / validation
             if "useFace" in args and args["useFace"]:
-                
-                # replace by Biometric function
-                data = list(session.query(Person).all())[1].serialize()
-                return flask.make_response(flask.jsonify({'data': data}), 200)
+                if id is not None:
+                    # validate
+                    data = list(session.query(Person).filter_by(person_id=id))[0].serialize()
+                    data["matching_score"] = 0.95
+                    # return identified person object + matching score
+                    return flask.make_response(flask.jsonify({'data': data}), 200)
+                else:
+                    # replace by Biometric function
+                    # identify
+                    # return identified person object + matching score
+                    data = list(session.query(Person).all())[1].serialize()
+                    data["matching_score"] = 0.95
+                    return flask.make_response(flask.jsonify({'data': data}), 200)
 
             if id is None:
                 data = list(session.query(Person).all())

application/static/main.js

@@ -19,8 +19,6 @@ function focusPerson(id) {
     renderPersonRight()
 }
 
-
-
 function loadPersonList(data) {
     console.log(data)
     data = data["data"]
@@ -38,6 +36,7 @@ function loadPersonList(data) {
                         Gender: ${item["gender"]} <br>
                         YoB: ${item["yob"]} <br>
                         Available FP: ${item["fingerprints"].length} <br>
+                        
                     </div>
                     
                 </p>
@@ -61,10 +60,12 @@ function renderPersonRight(data){
         <img src="${data["face"]}" id="image-right"> </img>
 
         <h4 class="heroInfo">
-        Gender: ${data["gender"]} <br>
-        YoB: ${data["yob"]} <br>
-        Available FP: ${data["fingerprints"].length} <br>
-        </div>
+            Gender: ${data["gender"]} <br>
+            YoB: ${data["yob"]} <br>
+            Available FP: ${data["fingerprints"].length} <br>
+            <h3>Score: ${data["matching_score"]} </h3>
+        </h4>
+        
     `
     mr.innerHTML = string;
 }
@@ -81,7 +82,7 @@ function identify(){
 
 function validate(){
     snapShot()
-    getJSON(rootKontext + "/api/v1/person/?useFace=True&?validateId="+selected,
+    getJSON(rootKontext + "/api/v1/person/" + selected + "?useFace=True",
         function (error, data) {
             data = data["data"]
             renderPersonRight(data)
@@ -89,33 +90,6 @@ function validate(){
     );
 }
 
-function renderValidate(){
-    string = `
-    <img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>
-    
-    <button onclick="validate()" class="btn btn-primary float-right middle-controls">Validate</button>
-    <button onclick="renderValidate()" class="btn btn-warning float-right middle-controls">Retry</button>
-    `
-    ml.innerHTML = string;
-}
-
-function renderChange(){
-    console.log("change")
-}
-function renderEnrole(){
-    console.log("enrole")
-}
-function renderIdentify(){
-    string = `
-    <img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>
-    
-    <button onclick="identify()" class="btn btn-primary float-right middle-controls">Identify</button>
-    <button onclick="renderIdentify()" class="btn btn-warning float-right middle-controls">Retry</button>
-    `
-    ml.innerHTML = string;
-}
-
-
 function loadStream() {
     string = `
     <img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>

application/static/render.js

@@ -1,4 +1,10 @@
+function clearMiddle(){
+    ml.innerHTML = ""
+    mr.innerHTML = ""
+}
+
 function renderValidate(){
+    clearMiddle()
     string = `
     <img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>
     
@@ -9,12 +15,15 @@ function renderValidate(){
 }
 
 function renderChange(){
+    clearMiddle()
     console.log("change")
 }
 function renderEnrole(){
+    clearMiddle()
     console.log("enrole")
 }
 function renderIdentify(){
+    clearMiddle()
     string = `
     <img src="${rootKontext + "/api/v1/camera/stream"}" id="image-left"> </img>
     

application/templates/index.html

@@ -22,6 +22,7 @@
 
 
     <script src="/static/coms.js"></script>
+    <script src="/static/render.js"></script>
     <script src="/static/main.js"></script>
 </head>