Add badge to notify when a new result is found and fix some styles

front/index.html

@@ -24,7 +24,7 @@
 				<div class="tabs">
 					<ul>
 						<li ng-class="{active:isActiveTab('SEARCH')}" ng-click="changeTab('SEARCH')">Search</li>
-						<li ng-class="{active:isActiveTab('RESULTS')}" ng-click="changeTab('RESULTS')">Results</li>
+						<li ng-class="{active:isActiveTab('RESULTS')}" ng-click="changeTab('RESULTS'); newElement(false)">Results <label ng-show="new" class="new-item">&#x21;</label></li>
 					</ul>
 				</div>
 				<div class="tab-content">
@@ -46,6 +46,7 @@
 									<td> <label class="{{l.STATUS}}">{{l.STATUS}}</label> </td>
 									<td> <p ng-hide="l.STATUS=='DISCONNECTED'|| l.STATUS=='TIMED OUT'">{{l.ELAPSED}}</p> </td>
 									<td>
+										<i>Found {{l.OUT.length}} matches:</i>
 										<ul>
 											<li ng-repeat="o in l.OUT | limitTo:limit[l.ID]||5">
 												<a ng-click="download(o)">{{o}}</a>
@@ -62,16 +63,21 @@
 								<tr>
 									<th>Title</th>
 									<th>Status</th>
+									<th>Progress</th>
 									<th>Elapsed</th>
 									<th>Output</th>
 								</tr>
 							</thead>
 							<tbody>
-								<tr ng-repeat="l in list | filter:{TYPE:'BOOK'} track by l.ID">
+								<tr ng-repeat="l in list | filter:{TYPE:'BOOK'} track by l.ID" class="expanded">
 									<td> <span>{{l.QUERY}}<span> </td>
 									<td> <label class="{{l.STATUS}}">{{l.STATUS}}</label> </td>
+									<td>
+									<progress-bar progress="l.PROGRESS"></progress-bar>
+									</td>
 									<td> <p ng-hide="l.STATUS=='DISCONNECTED'|| l.STATUS=='TIMED OUT'">{{l.ELAPSED}}</p> </td>
 									<td>
+										<i>Found {{l.OUT.length}} file{{l.OUT.length == 1 ? '' : 's'}}:</i>
 										<ul>
 											<li ng-repeat="o in l.OUT">
 												<a ng-href="/test/{{o}}" target="_blank">{{o}}  &#8675;</a>

front/js/app.js

@@ -28,6 +28,7 @@ app.controller('main', function($scope,$http,$interval) {
 	$scope.download = function(book) {
 		$http.post("http://192.168.1.7/test/?adasasd",{"type":"BOOK","book":book}).then(
 		function(data) {
+			$scope.newElement(true);
 			$scope.getList();
 		},
 		function(data){
@@ -35,6 +36,10 @@ app.controller('main', function($scope,$http,$interval) {
 			console.log(data);
 		});
 	};
+
+	$scope.newElement = function(bool){
+		$scope.new = bool;
+	}
 	$scope.searchBook = function(book,extension){
 		$http.post("http://192.168.1.7/test/?ewqewqewq", {"type":"search","book":book,"extension":extension}).then(
 		function(data) {
@@ -60,3 +65,16 @@ app.controller('main', function($scope,$http,$interval) {
 	}
 	$interval($scope.getList, 1000);
 });
+
+app.directive('progressBar', function(){
+	return {
+		template: '<div id="progress-bar"><div id="progress" style="width:{{progress}}%"><div id="label">{{progress}}%</div></div></div>',
+		restrict: 'E',
+		scope: {
+			progress: '='
+		},
+		link: function(scope, elem, attrs){
+			console.log('progress', scope.progress, elem, attrs);
+		}
+	}
+});

front/styles.css

@@ -20,6 +20,13 @@ h2 {
   border-bottom: 1px solid rgba(226,227,217, 0.5);
 }
 
+::selection {
+  background:rgba(161,193,190, 0.5);
+}
+::-moz-selection {
+  background:rgba(161,193,190, 0.5);
+}
+
 .form {
   padding: 10px;
 }
@@ -98,6 +105,15 @@ input[type="button"]:hover {
   background-color: rgba(226,227,217,0.3);
 }
 
+.tabs > ul > li > label {
+  font-weight: bold;
+  background-color: rgb(184, 152, 170);
+  color: white;
+  border-radius: 15px;
+  font-size: 90%;
+  padding: 2px 7px;
+}
+
 .tab-content {
   border: 1px solid  #E2E3D9;
   padding: 20px;
@@ -113,7 +129,7 @@ table {
 }
 
 th {
-  padding: 15px 5px;
+  padding: 10px;
   text-align: left;
   border-bottom: 1px solid #A9A59E;
   text-transform: uppercase;
@@ -149,10 +165,18 @@ td > a {
 td > ul {
   list-style: none;
   padding: 0px;
+  margin-top: 0px;
+}
+
+td > i {
+  color: #929389;
+  font-size: 80%;
+  text-decoration: underline;
 }
 
 td > ul > li {
   margin-bottom: 5px;
+  margin-left: 10px;
 }
 
 td > ul > li:hover {
@@ -168,6 +192,27 @@ th.output{
   width: 70%;
 }
 
+#progress-bar {
+    position: relative;
+    width: 100%;
+    height: 20px;
+    background-color: #E2E3D9;
+    border-radius: 3px;
+}
+#progress {
+  position: absolute;
+  height: 100%;
+  background-color: #A1C1BE;
+  border-radius: 3px;
+}
+
+#label {
+    text-align: center;
+    line-height: 20px;
+    color: white;
+    font-size: 75%;
+}
+
 .expanded{
   vertical-align: top;
 }