andi/perfdb
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Activity

show rendered image

Browse Source 
added loading icon
image is scaled to available space
This commit is contained in:
Andreas Huber
2016-12-21 20:06:11 +01:00
parent d1e39513f3
commit bc5d1b0b7b
19 changed files with 461 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
pdb-ui/src/main/resources/config.system.properties
View File

@@ -1 +1,4 @@
db.base=/tmp/db
db.base=/tmp/db
path.tmp=/tmp/pdb/tmp
path.output=/tmp/pdb/out

2
pdb-ui/src/main/resources/config.user.properties
View File

@@ -1 +1 @@
db.base=/home/andi/ws/performanceDb/db
db.base=/home/andi/ws/performanceDb/db

30
pdb-ui/src/main/resources/resources/css/design.css
View File

@@ -1,4 +1,5 @@
body {
html, body {
height: 100%;
margin:0;
padding:0;
}
@@ -11,11 +12,19 @@ body {
font-style: normal;
}
#content{
display: flex;
flex-flow: column;
height: 100%;
}
#top-menu-bar {
background-color: black;
color: white;
padding: 3px;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
#logo {
@@ -26,6 +35,9 @@ body {
background-color: #aaa;
text-align: right;
padding-bottom:3px;
flex-grow: 0;
flex-shrink: 1;
flex-basis: auto;
}
#search-bar #search-query {
@@ -42,8 +54,13 @@ body {
}
#result-view {
background: red;
font-size: 32px;
background: #eee;
bottom: 0;
left:0;
right: 0;
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
}
#result-view i {
@@ -53,3 +70,10 @@ body {
line-height: 1.2em;
}
.center
{
display: flex;
justify-content: center;
align-items: center;
}

189
pdb-ui/src/main/resources/resources/css/loading.css Normal file
View File

@@ -0,0 +1,189 @@
.uil-cube-css {
background: none;
position: relative;
width: 200px;
height: 200px;
}
width: 100%;
@-webkit-keyframes uil-cube-css {
0% {
-ms-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes uil-cube-css {
0% {
-ms-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes uil-cube-css {
0% {
-ms-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-ms-keyframes uil-cube-css {
0% {
-ms-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-moz-keyframes uil-cube-css {
0% {
-ms-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes uil-cube-css {
0% {
-ms-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@-o-keyframes uil-cube-css {
0% {
-ms-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
@keyframes uil-cube-css {
0% {
-ms-transform: scale(1.4);
-moz-transform: scale(1.4);
-webkit-transform: scale(1.4);
-o-transform: scale(1.4);
transform: scale(1.4);
}
100% {
-ms-transform: scale(1);
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.uil-cube-css > div {
position: absolute;
width: 80px;
height: 80px;
-ms-animation: uil-cube-css 1s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite;
-moz-animation: uil-cube-css 1s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite;
-webkit-animation: uil-cube-css 1s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite;
-o-animation: uil-cube-css 1s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite;
animation: uil-cube-css 1s cubic-bezier(0.2, 0.8, 0.2, 0.8) infinite;
}
.uil-cube-css > div:nth-of-type(1) {
top: 10px;
left: 10px;
background: #cec9c9;
opacity: 0.9;
-ms-animation-delay: 0s;
-moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
-o-animation-delay: 0s;
animation-delay: 0s;
}
.uil-cube-css > div:nth-of-type(2) {
top: 10px;
left: 110px;
background: #cec9c9;
opacity: 0.8;
-ms-animation-delay: 0.1s;
-moz-animation-delay: 0.1s;
-webkit-animation-delay: 0.1s;
-o-animation-delay: 0.1s;
animation-delay: 0.1s;
}
.uil-cube-css > div:nth-of-type(3) {
top: 110px;
left: 10px;
background: #cec9c9;
opacity: 0.7;
-ms-animation-delay: 0.3s;
-moz-animation-delay: 0.3s;
-webkit-animation-delay: 0.3s;
-o-animation-delay: 0.3s;
animation-delay: 0.3s;
}
.uil-cube-css > div:nth-of-type(4) {
top: 110px;
left: 110px;
background: #cec9c9;
opacity: 0.6;
-ms-animation-delay: 0.2s;
-moz-animation-delay: 0.2s;
-webkit-animation-delay: 0.2s;
-o-animation-delay: 0.2s;
animation-delay: 0.2s;
}

19
pdb-ui/src/main/resources/resources/index.html
View File

@@ -6,16 +6,19 @@
<link rel="stylesheet" type="text/css" href="css/typography.css">
<link rel="stylesheet" type="text/css" href="css/design.css">
<link rel="stylesheet" type="text/css" href="css/icons.css">
<link rel="stylesheet" type="text/css" href="css/loading.css">
</head>
<body>
<div id="top-menu-bar">
<div id="logo">LOGO</div>
</div>
<div id="search-bar">
<textarea id="search-query"></textarea>
<button id="search-submit"><i class="fa fa-search"> Search</i></button>
</div>
<div id="result-view">
<div id="content">
<div id="top-menu-bar">
<div id="logo">LOGO</div>
</div>
<div id="search-bar">
<textarea id="search-query">method=AuditService.logEvent</textarea>
<button id="search-submit"><i class="fa fa-search"> Search</i></button>
</div>
<div id="result-view">
</div>
</div>
</body>
</html>

10
pdb-ui/src/main/resources/resources/js/search.js
View File

@@ -4,12 +4,15 @@ $(document).ready(function(){
$('#search-submit').click(function(event){
event.preventDefault(); // prevent submit of form which would reload the page
showLoadingIcon();
var request = {};
request['query'] = $('#search-query').val();
request['height'] = $('#result-view').height()-10;
request['width'] = $('#result-view').width()-10;
var success = function(response){
$('#result-view').text("SUCCESS: "+response.imageUrls);
$('#result-view').html('<img src=\"'+response.imageUrls+'" />');
};
var error = function(e) {
//var response = JSON.parse(e.responseText);
@@ -22,6 +25,11 @@ $(document).ready(function(){
});
});
function showLoadingIcon()
{
$('#result-view').html("<div class='center'><div class='uil-cube-css' style='-webkit-transform:scale(0.41)'><div /><div></div><div></div><div></div></div></div>");
}
function postJson(url, requestData, successCallback, errorCallback) {