askill
/
FacialRecognition-Demo
mirror of https://github.com/Askill/FacialRecognition-Demo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

more layout

This commit is contained in:
Askill 2020-03-16 19:51:17 +01:00
parent f061fd3b49
commit 7313fbd58d
3 changed files with 98 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
application/static/main.css
View File

@ -3,8 +3,8 @@
right: 0; right: 0;
top:0; top:0;
width: 20rem; width: 20rem;
height: 100%; min-height: 100%;
background-color: aqua;
} }
#switch{ #switch{
@ -13,7 +13,7 @@
position: relative; position: relative;
top: 0; top: 0;
left: -50%; left: -50%;
background-color: aqua;
} }
#main{ #main{
@ -22,5 +22,28 @@
position: relative; position: relative;
top: 10rem; top: 10rem;
left: -50%; left: -50%;
background-color: aqua;
}
.listIMG{
width: 5rem;
float: left;
}
.navi{
margin-left: 1.5rem;
}
.personalInfo{
float: right;
width: 9rem;
margin:0;
padding:0;
}
.card{
margin-top:2rem;
}
.card-text{
padding: 0;
height: 0;
} }

167
application/static/main.js
View File

@ -1,137 +1,70 @@
var rootKontext = "/od1";
//var rootKontext = "";
var customeStyle = false;
function loadOD1(){ rootKontext = ""
try{
let ksession = $.cookie("KSESSIONID");
var xmlHttp = new XMLHttpRequest();
xmlHttp.open( "GET", rootKontext, false );
xmlHttp.send();
document.getElementById("od1").innerHTML = xmlHttp.responseText;
$('link[title="custom"]').prop('disabled', true);
loadData();
}
catch(e){
document.getElementById("od1").innerHTML = "Ein Fehler ist beim Laden des Dienstes aufgetreten, bitte versuchen Sie es später erneut.";
}
}
function nextTab(){
$('#navMenu1 a').removeClass("disabled");
$('#navMenu1 a').tab('show');
}
function getJSON (url, callback) {
let ksession = $.cookie("KSESSIONID");
function getJSON(url, callback) {
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('GET', url + "?session_id=" + ksession, true); xhr.open('GET', url, true);
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.onload = function() { xhr.onload = function () {
var status = xhr.status; var status = xhr.status;
if (status < 400) { if (status < 400) {
callback(null, xhr.response); callback(null, xhr.response);
} else { } else {
console.log("failed getting"); console.log("failed getting");
console.log(status); console.log(status);
} }
}; };
xhr.send(); xhr.send();
}; };
function putJSON (url, data, callback) { function putJSON(url, data, callback) {
let ksession = $.cookie("KSESSIONID");
var xhr = new XMLHttpRequest(); var xhr = new XMLHttpRequest();
xhr.open('PUT', url + "?session_id=" + ksession, true); xhr.open('PUT', url, true);
xhr.responseType = 'json'; xhr.responseType = 'json';
xhr.setRequestHeader('Content-Type', 'application/json'); xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function() { xhr.onload = function () {
var status = xhr.status; var status = xhr.status;
if (status < 400) { if (status < 400) {
callback(null, xhr.response); callback(null, xhr.response);
} else { } else {
console.log("failed posting"); console.log("failed posting");
console.log(status); console.log(status);
} }
}; };
xhr.send(data); xhr.send(data);
}; };
function sendVorhaben(){
let data = document.getElementById("form1");
data = {}; function loadData() {
data["name"] = document.getElementById("form1")["name"].value; getJSON(rootKontext + "/api/v1/person/",
data["reason"] = document.getElementById("form1")["reason"].value; function (error, data) {
data["note"] = document.getElementById("form1")["note"].value;
data["partial_application_id"] = document.getElementById("form1")["partial_application_id"].value;
putJSON(rootKontext + "/api/v1/vorhaben/" + data["partial_application_id"], JSON.stringify(data), function(error, data){
document.getElementById("status").innerHTML = "Daten erfolgreich erneuert";
loadData();
nextTab();
});
}
function queryString(string)
{
let queryString = window.location.search;
let varArray = queryString.split("&");
for (let i=0;i<varArray.length;i++) {
let param = varArray[i].split("=");
if(param[0] == string ){
return param[1]
}
}
}
function loadData(){
let encodedID = queryString("?partialApplicationId");
//encodedID = "d05e6d3a-1774-46a0-abb0-89abfe2ff5a3";
getJSON(rootKontext + "/api/v1/vorhaben/" + encodedID,
function(error, data){
console.log(data) console.log(data)
populateForm(data["data"], "form1") data = data["data"]
populateForm(data["data"], "form2") let el = document.getElementById('list');
data.forEach(function (item) {
string = `
<div class="card border-light">
<div class="card-body">
<h4 class="card-title">${item["fname"]} ${item["lname"]}</h4>
<h6 class="card-subtitle mb-2 text-muted">${item["timestamp"]}</h6>
<p class="card-text container">
<img class="listImg" src="${item["face"]}"></img>
<div class="personalInfo">
${item["gender"]} <br>
${item["yob"]} <br>
${item["fingerprints"].length} <br>
</div>
</p>
</div>
</div>
`
el.innerHTML += string;
})
} }
); );
} }
function populateForm(data, formId){
console.log(data)
inputs = document.forms[formId];
for(var i = 0; i < 8; i++){
if(inputs[i] !== undefined && data[inputs[i].name] !== undefined){
inputs[i].value = data[inputs[i].name];
}
else{
console.log(inputs);
}
}
}
function loadNewStyle(){
customeStyle = !customeStyle;
if(customeStyle){
$('link[title="custom"]').prop('disabled', false);
$('link[title="default"]').prop('disabled', true);
console.log("StyleSheet: Custom");
alert("StyleSheet: Custom");
}
else{
$('link[title="default"]').prop('disabled', false);
$('link[title="custom"]').prop('disabled', true);
console.log("StyleSheet: Default");
alert("StyleSheet: Default");
}
}

28
application/templates/index.html
View File

@ -6,6 +6,7 @@
<!--Bootstrap--> <!--Bootstrap-->
<!-- Latest compiled and minified CSS --> <!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link href="https://bootswatch.com/4/superhero/bootstrap.css" rel="stylesheet" id="bootstrap-css3">
<link rel="stylesheet" title="default" href="/static/main.css"> <link rel="stylesheet" title="default" href="/static/main.css">
<!-- jQuery library --> <!-- jQuery library -->
@ -16,6 +17,7 @@
<!-- Latest compiled JavaScript --> <!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
@ -24,20 +26,32 @@
<body> <body>
<div style="position: fixed; left: 50%;"> <div style="position: fixed; left: 50%; z-index: 9999;">
<div class="container" id="switch"> <div class="navbar navbar-expand-lg navbar-dark bg-dark" id="switch">
hi <div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-primary active navi">
<input type="radio" name="options" id="option1" autocomplete="off" checked=""> Identify
</label>
<label class="btn btn-primary navi">
<input type="radio" name="options" id="option2" autocomplete="off"> Validate
</label>
<label class="btn btn-primary navi">
<input type="radio" name="options" id="option3" autocomplete="off"> Enrole
</label>
<label class="btn btn-primary navi">
<input type="radio" name="options" id="option4" autocomplete="off"> Change
</label>
</div>
</div> </div>
</div> </div>
<div style="position: fixed; left: 50%;"> <div style="position: fixed; left: 50%;">
<div class="container" id="main"> <div class="container bg-dark" id="main">
hi hi
</div> </div>
</div> </div>
<div class="container" id="list"> <div class="container bg-dark" id="list">
hi
</div> </div>