Wiki source code of Phone Search with AngularJS

Version 2.1 by Ludovic Dubost on 2013/04/16 18:58
Show last authors
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 = ""
7 $scope.xwikiQuery = $resource('/xwiki/bin/get/Phones/PhonesLiveTableResults',
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) {
16 $scope.xwikiDocQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName',
17 {docName: "", media: "json"},
18 {get:{method:'GET'}});
19 $scope.xwikiObjectQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName/objects/Phones.PhonesClass/0',
20 {docName: "", media: "json"},
21 {get:{method:'GET'}});
22 $scope.xwikiAttachQuery = $resource('/xwiki/rest/wikis/ludovic/spaces/Phones/pages/:docName/attachments',
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}}