Wiki source code of Phone Search with AngularJS

Version 2.1 by Ludovic Dubost on 2013/04/16 18:58

version	line-number	content
1.1	1	{{angular app="xwiki" css="1"}}
	2	<script type="text/javascript">
	3	angular.module('xwiki', ['ngResource'])
	4
	5	function XWikiSearchCtrl($scope, $resource) {
	6	$scope.searchTerm = ""
2.1	7	$scope.xwikiQuery = $resource('/xwiki/bin/get/Phones/PhonesLiveTableResults',
1.1	8	{"doc.title":"", outputSyntax: "plain", transprefix : "phones.livetable.", classname: "Phones.PhonesClass", collist : "_image,doc.title,os,os_version,screen_size,hardware_cpu,details", offset: "1", limit: "15", reqNo: "1", sort : "doc.title", dir: "asc"},
	9	{get:{method:'GET'}});
	10
	11	$scope.doSearch = function () {
	12	$scope.xwikiQueryResult = $scope.xwikiQuery.get({"doc.title": $scope.searchTerm});
	13	};
	14
	15	$scope.doGet = function(docName, docDetails) {
2.1	16	$scope.xwikiDocQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName',
1.1	17	{docName: "", media: "json"},
	18	{get:{method:'GET'}});
2.1	19	$scope.xwikiObjectQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName/objects/Phones.PhonesClass/0',
1.1	20	{docName: "", media: "json"},
	21	{get:{method:'GET'}});
2.1	22	$scope.xwikiAttachQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName/attachments',
1.1	23	{docName: "", media: "json"},
	24	{get:{method:'GET'}});
	25
	26	$scope.mainImageUrl = "";
	27	$scope.phone = docName;
	28	$scope.details = docDetails;
	29	$scope.properties = {};
	30	$scope.images = [];
	31	$scope.doc = $scope.xwikiDocQuery.get({docName: docName});
	32	$scope.attachments = $scope.xwikiAttachQuery.get({docName: docName}, function(attachments) {
	33	for (var i=0;i<attachments.attachments.length;i++) {
	34	if (i==0) {
	35	$scope.mainImageUrl = attachments.attachments[i].xwikiAbsoluteUrl;
	36	}
	37	$scope.images.push(attachments.attachments[i].xwikiAbsoluteUrl);
	38	}
	39	});
	40	$scope.object = $scope.xwikiObjectQuery.get({docName: docName}, function(object) {
	41	for (var i=0;i<object.properties.length;i++) {
	42	var property = object.properties[i];
	43	$scope.properties[property["name"]] = property.value
	44	}
	45	});
	46	};
	47
	48	$scope.setImage = function(img) {
	49	$scope.mainImageUrl = img;
	50	}
	51
	52	// launch a first search
	53	$scope.doSearch();
	54	}
	55
	56	//XWikiSearchCtrl.$inject = ['$scope', '$resource'];
	57
	58	</script>
	59	<div ng-controller="XWikiSearchCtrl">
	60	<table border="0" width="100%">
	61	<tr><td width="20%" style="vertical-align: top;">
	62	<form class="form-horizontal">
	63	<input type="text" ng-model="searchTerm">
	64	<button class="btn" ng-click="doSearch()"><i class="icon-search"></i>Search</button>
	65	</form>
	66	<table class="table table-striped" border="0">
	67	<tr ng-repeat="doc in xwikiQueryResult.rows">
	68	<td><a href="" ng-click="doGet(doc.doc_name, doc.details)" ng-bind-html-unsafe="doc._image"></a></td><td><a href="" ng-click="doGet(doc.doc_name, doc.details)">{{doc.doc_title}}</a>
	69	</td>
	70	</tr>
	71	</table>
	72	</td>
	73	<td ng-show="phone">
	74	<table>
	75	<tr>
	76	<td style="vertical-align: top;">
	77	<img ng-src="{{mainImageUrl}}" class="phone">
	78	<br />
	79	<ul class="phone-thumbs">
	80	<li ng-repeat="img in images">
	81	<img ng-src="{{img}}" ng-click="setImage(img)">
	82	</li>
	83	</ul>
	84	</td>
	85	<td style="vertical-align: top;">
	86	<h2>{{phone}}</h2>
	87	<span ng-bind-html-unsafe="details"></span>
	88	<ul>
	89	<li>CPU: {{properties.hardware_cpu}}</li>
	90	<li>USB: {{properties.usb}}</li>
	91	<li>OS: {{properties.os}} {{properties.os_version}}</li>
	92	<li>Screen size: {{properties.screen_size}} inches</li>
	93	<li>Screen resolution: {{properties.screen_resolution}}</li>
	94	<li>RAM: {{properties.ram}}GB</li>
	95	<li>Storage: {{properties.storage}}GB</li>
	96	<li>Weight: {{properties.weigth}}g</li>
	97	</ul>
	98	</td>
	99	</tr>
	100	</table>
	101	</td>
	102	</tr>
	103	</table>
	104	</div>
	105	</div>
	106	{{/angular}}