Accueil Explorer Aide
Connexion
david
/
irc-books
1
0
Fork 0
Fichiers Tickets 0 Pull Requests 0 Wiki
Parcourir la source

Add styles

tati il y a 10 ans
Parent
93a4c4a78d
commit
fa56e60db8
3 fichiers modifiés avec 298 ajouts et 43 suppressions
Vue séparée Afficher les stats Diff
  1. 78 39
      front/index.html
  2. 17 4
      front/js/app.js
  3. 203 0
      front/styles.css

+ 78 - 39
front/index.html
Voir le fichier 

@@ -3,49 +3,88 @@
 
 	<head>
 
 		<script src="js/angular.min.js"></script>
 
 		<script src="js/app.js"></script>
 
-		<style>
 
-			body { width: 70%; margin:0px auto; }
 
-			td { padding: 5px; }
 
-			input[type=text] {background-color:white;color:black;}
 
-		</style>
 
+		<link href="styles.css" rel="stylesheet" type="text/css"></link>
 
 	</head>
 
 <body>
 
 	<div ng-controller="main">
 
-		<table>
 
-			<tr>
 
-				<th>ID</th>
 
-				<th>Type</th>
 
-				<th>Query</th>
 
-				<th>Status</th>
 
-				<th>Elapsed</th>
 
-				<th>Output</th>
 
-			</tr>
 
-			<tr ng-repeat="l in list track by l.ID">
 
-				<td> {{l.ID}} </td>
 
-				<td> {{l.TYPE}} </td>
 
-				<td> {{l.QUERY}} </td>
 
-				<td> {{l.STATUS}} </td>
 
-				<td> <p ng-if="l.STATUS!='DISCONNECTED'">{{l.ELAPSED}}</p> </td>
 
-				<td> 
-					<div ng-repeat="o in l.OUT">
 
-						<div ng-if="l.TYPE=='SEARCH'">
 
-							<a ng-click="download(o)"> {{o }}</a>
 
-						</div>
 
-						<div ng-if="l.TYPE=='BOOK'">
 
-							<a ng-href="/test/{{o}}" target="_blank">Download {{o }}</a>
 
-						</div>
 
+			<h2>Search books</h2>
 
+			<div class="form">
 
+				<div>
 
+					<label>Book</label>
 
+					<input type="text" ng-model="book">
 
+				</div>
 
+				<div>
 
+					<label>Extension</label>
 
+					<input type="text" ng-model="extension">
 
+				</div>
 
+				<input type="button" value="search" ng-click="searchBook(book,extension)">
 
+			</div>
 
+
 
+			<div class="content">
 
+				<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>
 
+					</ul>
 
+				</div>
 
+				<div class="tab-content">
 
+					<div class="search" id="SEARCH" ng-show="activeTab==='SEARCH'">
 
+						<table>
 
+							<thead>
 
+								<tr>
 
+									<th></th>
 
+									<th>Query</th>
 
+									<th>Status</th>
 
+									<th>Elapsed</th>
 
+									<th class="output">Output</th>
 
+								</tr>
 
+							</thead>
 
+							<tbody>
 
+								<tr ng-repeat="l in list | filter:{TYPE:'SEARCH'} track by l.ID" ng-class="{'expanded':limit!=undefined}">
 
+									<td><a ng-click="showMore(l)">{{limit[l.ID] ? '&#9650;' : '&#9660;'}}</a></td>
 
+									<td> <span>{{l.QUERY}}</span> </td>
 
+									<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>
 
+										<ul>
 
+											<li ng-repeat="o in l.OUT | limitTo:limit[l.ID]||5">
 
+												<a ng-click="download(o)">{{o}}</a>
 
+											</li>
 
+										</ul>
 
+									</td>
 
+								</tr>
 
+							</tbody>
 
+						</table>
 
+					</div>
 
+					<div class="results" id="RESULTS" ng-show="activeTab==='RESULTS'">
 
+						<table>
 
+							<thead>
 
+								<tr>
 
+									<th>Title</th>
 
+									<th>Status</th>
 
+									<th>Elapsed</th>
 
+									<th>Output</th>
 
+								</tr>
 
+							</thead>
 
+							<tbody>
 
+								<tr ng-repeat="l in list | filter:{TYPE:'BOOK'} track by l.ID">
 
+									<td> <span>{{l.QUERY}}<span> </td>
 
+									<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>
 
+										<ul>
 
+											<li ng-repeat="o in l.OUT">
 
+												<a ng-href="/test/{{o}}" target="_blank">{{o}}  &#8675;</a>
 
+											</li>
 
+										</ul>
 
+									</td>
 
+								</tr>
 
+							</tbody>
 
+						</table>
 
 					</div>
 
-				</td>
 
-			</tr>
 
-		</table>
 
-		<div>
 
-			Search books:
 
-			Book:<input type="text" ng-model="book">
 
-			Extension: <input type="text" ng-model="extension">
 
-			<input type="button" value="search" ng-click="searchBook(book,extension)">
 
-		</div>
 
-		<input type="button" value="refresh" ng-click="getList()">
 
+				</div>
 
+			</div>
 
+
 
 	</div>
 
 </body>
 
 </html>
 
-

+ 17 - 4
front/js/app.js
Voir le fichier 

@@ -5,8 +5,9 @@ app.controller('main', function($scope,$http,$interval) {
 
 	$scope.book="";
 
 	$scope.extension="";
 
 
+	$scope.activeTab = 'SEARCH';
 
 	$scope.getList = function() {
 
-		$http.get("/test/").then(
 
+		$http.get("http://192.168.1.7/test/").then(
 
 		function(data) {
 
 			/*
 
 			data.data=data.data.map(function(el) {
 
@@ -19,13 +20,13 @@ app.controller('main', function($scope,$http,$interval) {
 
 		},
 
 		function(data){
 
 			console.log("error");
 
-			console.log(data);
 
+
 
 		});
 
 	}
 
 	$scope.getList();
 
 
 	$scope.download = function(book) {
 
-		$http.post("/test/?adasasd",{"type":"BOOK","book":book}).then(
 
+		$http.post("http://192.168.1.7/test/?adasasd",{"type":"BOOK","book":book}).then(
 
 		function(data) {
 
 			$scope.getList();
 
 		},
 
@@ -35,7 +36,7 @@ app.controller('main', function($scope,$http,$interval) {
 
 		});
 
 	};
 
 	$scope.searchBook = function(book,extension){
 
-		$http.post("/test/?ewqewqewq", {"type":"search","book":book,"extension":extension}).then(
 
+		$http.post("http://192.168.1.7/test/?ewqewqewq", {"type":"search","book":book,"extension":extension}).then(
 
 		function(data) {
 
 			console.log("success");
 
 			$scope.getList();
 
@@ -45,5 +46,17 @@ app.controller('main', function($scope,$http,$interval) {
 
 		});
 
 	};
 
 
+	$scope.isActiveTab = function(tab){
 
+		return $scope.activeTab === tab;
 
+	}
 
+
 
+	$scope.changeTab = function(tab){
 
+		$scope.activeTab = tab;
 
+	}
 
+
 
+	$scope.limit = {};
 
+	$scope.showMore = function(l){
 
+		$scope.limit[l.ID] = $scope.limit[l.ID] ? undefined : l.OUT.length;
 
+	}
 
 	$interval($scope.getList, 1000);
 
 });

+ 203 - 0
front/styles.css
Voir le fichier 

@@ -0,0 +1,203 @@
 
+/*COLORS:*/
 
+/*brown: #59554E
 
+light blue: #A1C1BE rgba(161,193,190, 1)
 
+light blue -darker-: #73A2A3
 
+lilac: #C1A1B3
 
+lilac -darker-: #B898AA
 
+cream: #F3F4E5
 
+dirty white: #E2E3D9*/
 
+
 
+body, html {
 
+  height: 100%;
 
+  font-family: Verdana, Geneva, sans-serif;
 
+  font-size: 10pt;
 
+  background-color: #FFF;
 
+  color: #59554E;
 
+}
 
+
 
+h2 {
 
+  color: #A1C1BE;
 
+  border-bottom: 1px solid rgba(226,227,217, 0.5);
 
+}
 
+
 
+.form {
 
+  padding: 10px;
 
+}
 
+
 
+.form > div {
 
+  width: 25%;
 
+  float: left;
 
+  margin-right: 20px;
 
+}
 
+
 
+.form:after{
 
+	visibility: hidden;
 
+	display: block;
 
+	content: "";
 
+	clear: both;
 
+}
 
+input[type=text] {
 
+  color:#73A2A3;
 
+  background-color: transparent;
 
+  border: none;
 
+  border-bottom: 1px solid #F3F4E5;
 
+  border-radius: 0;
 
+  outline: none;
 
+  height: 2rem;
 
+  width: 100%;
 
+  font-size: 1rem;
 
+  margin: 0 0 15px 0;
 
+  padding: 0;
 
+  box-shadow: none;
 
+  box-sizing: content-box;
 
+  transition: all 0.3s;
 
+}
 
+
 
+input[type="text"]:focus{
 
+  border-bottom: 1px solid #A1C1BE;
 
+}
 
+
 
+input[type="button"]{
 
+    background-color: #A1C1BE;
 
+    border: 1px solid #73A2A3;
 
+    border-radius: 5px;
 
+    color: white;
 
+    padding: 10px;
 
+    text-transform: uppercase;
 
+    cursor: pointer;
 
+    transition: all 0.5s;
 
+}
 
+
 
+input[type="button"]:hover {
 
+  background-color: #73A2A3;
 
+}
 
+
 
+.tabs > ul {
 
+  list-style: none;
 
+  margin-left: 0px;
 
+  padding-left: 0px;
 
+  margin-bottom: 10px;
 
+}
 
+
 
+.tabs > ul > li {
 
+  display: inline;
 
+  padding: 10px;
 
+  border: 1px solid #E2E3D9;
 
+  border-bottom: none;
 
+  border-top-right-radius: 6px;
 
+  border-top-left-radius: 6px;
 
+  cursor: pointer;
 
+  transition: all 0.5s;
 
+  text-transform: uppercase;
 
+}
 
+.tabs > ul > li:hover {
 
+  background-color: rgba(226,227,217,0.3);
 
+}
 
+
 
+.tabs > ul > li.active {
 
+  background-color: rgba(226,227,217,0.3);
 
+}
 
+
 
+.tab-content {
 
+  border: 1px solid  #E2E3D9;
 
+  padding: 20px;
 
+  background-color: rgba(226,227,217,0.3);
 
+  border-top-right-radius: 5px;
 
+  border-bottom-right-radius: 5px;
 
+  border-bottom-left-radius: 5px;
 
+}
 
+
 
+table {
 
+  width: 100%;
 
+  border-collapse: collapse;
 
+}
 
+
 
+th {
 
+  padding: 15px 5px;
 
+  text-align: left;
 
+  border-bottom: 1px solid #A9A59E;
 
+  text-transform: uppercase;
 
+  font-size: 80%;
 
+}
 
+
 
+
 
+tr {
 
+  border-bottom: 1px solid #E2E3D9;
 
+}
 
+
 
+td, tr {
 
+  padding: 10px;
 
+}
 
+td > span {
 
+  color: #73A2A3;
 
+  text-transform: uppercase;
 
+  font-size: 80%;
 
+  font-weight: bold;
 
+}
 
+
 
+td > label {
 
+  font-size: 70%;
 
+  padding: 5px;
 
+  border-radius: 5px;
 
+  color: white;
 
+  border: 1px solid;
 
+}
 
+
 
+td > a {
 
+  cursor: pointer;
 
+}
 
+td > ul {
 
+  list-style: none;
 
+  padding: 0px;
 
+}
 
+
 
+td > ul > li {
 
+  margin-bottom: 5px;
 
+}
 
+
 
+td > ul > li:hover {
 
+  background-color: rgba(161,193,190, 0.4);
 
+  cursor: pointer;
 
+}
 
+
 
+td > ul > li > a {
 
+  text-decoration: none;
 
+  color: #59554E;
 
+}
 
+th.output{
 
+  width: 70%;
 
+}
 
+
 
+.expanded{
 
+  vertical-align: top;
 
+}
 
+
 
+.WAITING{
 
+  background-color:#C1A1B3;
 
+  border-color: #B898AA;
 
+}
 
+
 
+.DISCONNECTED{
 
+  background-color:#A1B9C1;
 
+  border-color: #99B1B9;
 
+}
 
+
 
+.RECEIVING {
 
+  background-color: rgb(237, 186, 158);
 
+  border-color: rgb(230, 179, 151);
 
+}
 
+
 
+.TIMED.OUT{
 
+  background-color: #C9C4B2;
 
+  border-color: #BEB9A7;
 
+}
 
+
 
+.DOWNLOADING{
 
+  background-color: rgb(152, 210, 169);
 
+  border-color: rgb(132, 210, 169);
 
+}
 
+
 
+.CONNECTED{
 
+  background-color: rgb(239, 199, 207);
 
+  border-color: rgb(230, 190, 198);
 
+}