This shows you the differences between two versions of the page.
userspace:json-rpc_angularjs [2015/05/06 06:11] justcoding |
userspace:json-rpc_angularjs [2021/08/23 08:37] |
||
---|---|---|---|
Line 1: | Line 1: | ||
- | = Angular JSON-RPC = | ||
- | Yet another method of reading the JSON-RPC interface. | ||
- | |||
- | The example below reads the result of the latest softwareAudit and displays it as a table. Information about installed sw products are merged in. | ||
- | |||
- | All needed files (.html, .js, .css) should be hosted below / | ||
- | |||
- | The location would then read https:// | ||
- | |||
- | ====== Prerequisites ====== | ||
- | Of course its helpful to load the angular-min.js (or angular.js for development) from an appropriate location. The example uses a local copy. | ||
- | |||
- | ====== Minor Obstacles ====== | ||
- | opsiconfd will currently answer /rpc? requests with Encoding " | ||
- | |||
- | Most requests require a logon, some even special rights. The script user should be member of a new group // | ||
- | < | ||
- | getProducts_.* : | ||
- | productOnClient_get.* : | ||
- | auditSoftwareOnClient_get.* : | ||
- | product_get.* : | ||
- | </ | ||
- | |||
- | ====== Calling Parameter ====== | ||
- | When called as / | ||
- | the SoftwareAudit of the given clientId is displayed. OPSI client names may be entered in an input field at any time and are queried asynchronously. | ||
- | |||
- | The strange format of the query string as json has its reason: it is needed for the AndroidApp named [[https:// | ||
- | |||
- | What if the barcode appears right on the client' | ||
- | ====== The Code ====== | ||
- | < | ||
- | / | ||
- | ├ index.html | ||
- | ├ angular.js | ||
- | ├ swinv.js | ||
- | └ swinv.css | ||
- | </ | ||
- | |||
- | ======= index.html ======= | ||
- | Where all other is loaded from.. | ||
- | <code html> | ||
- | < | ||
- | <html ng-app=" | ||
- | < | ||
- | <link rel=" | ||
- | <script type=" | ||
- | <!-- script type=" | ||
- | <script type=" | ||
- | <script type=" | ||
- | </ | ||
- | |||
- | <body ng-controller=" | ||
- | |||
- | <div class=" | ||
- | |||
- | <input id=" | ||
- | <button ng-click=" | ||
- | |||
- | |||
- | <table border > | ||
- | < | ||
- | |||
- | <tr ng-repeat=" | ||
- | < | ||
- | <td> {{swp.version}}</ | ||
- | < | ||
- | <td class={{sw.csswarn(swp.name)}}>< | ||
- | </tr> | ||
- | </ | ||
- | |||
- | < | ||
- | <div ng-show=" | ||
- | <table border> | ||
- | < | ||
- | <tr ng-repeat=" | ||
- | < | ||
- | </tr> | ||
- | </ | ||
- | </ | ||
- | |||
- | < | ||
- | <table ng-show=" | ||
- | < | ||
- | <tr ng-repeat=" | ||
- | | ||
- | < | ||
- | < | ||
- | < | ||
- | </tr> | ||
- | </ | ||
- | |||
- | </ | ||
- | </ | ||
- | </ | ||
- | </ | ||
- | |||
- | ======= swinv.js ======= | ||
- | The AngularJS mimic.. | ||
- | <code JavaScript> | ||
- | (function(){ | ||
- | var app = angular.module(' | ||
- | | ||
- | app.controller(' | ||
- | |||
- | this.showallprods=0; | ||
- | this.showopsiinstalled=0; | ||
- | baseurl='/ | ||
- | logonurl=' | ||
- | |||
- | this.clientId=" | ||
- | |||
- | this.auditParams={' | ||
- | this.auditParams.params.push([]); | ||
- | this.auditParams.params.push({" | ||
- | |||
- | me=this; | ||
- | me[' | ||
- | me[' | ||
- | |||
- | this.jsonParmDns=function(){ | ||
- | this.search=window.location.search; | ||
- | if (this.search.match(/ | ||
- | var qsearch=decodeURIComponent(this.search).match(/ | ||
- | var jsonsearch=decodeURIComponent(qsearch); | ||
- | return angular.fromJson(jsonsearch).dns; | ||
- | // return JSON.parse(jsonsearch).dns; | ||
- | } | ||
- | return null; | ||
- | }; | ||
- | |||
- | this.opsicall=function(field, | ||
- | Params={' | ||
- | if(arg)Params.params[0]=arg; | ||
- | $http.post(baseurl, | ||
- | .success(function(response, | ||
- | // alert(" | ||
- | me.opsires=" | ||
- | me.opsiconf=conf; | ||
- | if(response.error) | ||
- | alert(response.error.message); | ||
- | else | ||
- | me[field]=response.result; | ||
- | | ||
- | }) | ||
- | .error(function(err, | ||
- | me.opsires=" | ||
- | alert(" | ||
- | me.opsistat=stat; | ||
- | me.opsihead=head; | ||
- | me.opsiconf=conf; | ||
- | }); | ||
- | |||
- | }; | ||
- | |||
- | this.logon=function(){ | ||
- | $http.post(logonurl, | ||
- | .success(function(response){ | ||
- | // alert(" | ||
- | // call after logon success | ||
- | me.getproductinfos(); | ||
- | me.refresh(me.clientId); | ||
- | }) | ||
- | .error(function(response){ | ||
- | alert(" | ||
- | }); | ||
- | }; | ||
- | |||
- | this.getprods=function(id){ | ||
- | this.opsires=" | ||
- | if(id)this.auditParams.params[1].clientId=id; | ||
- | $http.post(baseurl, | ||
- | .success(function(response, | ||
- | // alert(" | ||
- | if(response.error)alert(response.error.message); | ||
- | me.products=response.result; | ||
- | me.opsistat=stat; | ||
- | me.opsihead=head; | ||
- | me.opsiconf=conf; | ||
- | }) | ||
- | .error(function(err, | ||
- | me.opsires=" | ||
- | alert(" | ||
- | me.opsistat=stat; | ||
- | me.opsihead=head; | ||
- | me.opsiconf=conf; | ||
- | }); | ||
- | | ||
- | }; | ||
- | |||
- | // get products on Client with id | ||
- | this.getinstalled=function(id){ | ||
- | this.opsicall(' | ||
- | }; | ||
- | |||
- | // get all available OPSi products | ||
- | this.getproductinfos=function(){ | ||
- | this.opsicall(' | ||
- | }; | ||
- | |||
- | this.logon(); | ||
- | this.clientId=this.jsonParmDns(); | ||
- | // | ||
- | |||
- | this.refresh=function(id){ | ||
- | if(null != id){ | ||
- | this.getprods(id); | ||
- | this.getinstalled(id); | ||
- | } | ||
- | }; | ||
- | |||
- | |||
- | this.nonMS=function(name){ | ||
- | // return true; | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | if(name.match(/ | ||
- | return true; | ||
- | } | ||
- | |||
- | |||
- | this.pattern=swpattern; | ||
- | |||
- | this.reason=function(name){ | ||
- | for(p in this.pattern){ | ||
- | if(name.match(p)) | ||
- | return this.pattern[p]; | ||
- | } | ||
- | | ||
- | }; | ||
- | |||
- | // guess the corresponding OPSI productId from the Windows Product name | ||
- | this.opsiProdId=function(name){ | ||
- | for(i=0; i< | ||
- | p=this.productinfos[i]; | ||
- | if(p.name && name.match(p.name)||name.match(p.productId)) | ||
- | return p.productId; | ||
- | } | ||
- | return null; | ||
- | }; | ||
- | // convenience: | ||
- | this.isOpsi=function(name){ | ||
- | return (null != this.opsiProdId(name)); | ||
- | }; | ||
- | |||
- | // mark rows w/o reason/ | ||
- | this.csswarn=function(name){ | ||
- | if(this.isOpsi(name) || this.reason(name)) | ||
- | return " | ||
- | else | ||
- | return " | ||
- | }; | ||
- | |||
- | |||
- | }); | ||
- | |||
- | |||
- | var swpattern={' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | ' | ||
- | |||
- | }; | ||
- | |||
- | |||
- | |||
- | |||
- | })(); | ||
- | </ | ||
- | |||
- | ======= swinv.css ======= | ||
- | |||
- | some tweaking of the appearance - anything goes.. | ||
- | <code css> | ||
- | body { | ||
- | font-family: | ||
- | } | ||
- | |||
- | table{ | ||
- | width: 100%; | ||
- | border-collapse: | ||
- | } | ||
- | |||
- | td, th { | ||
- | font-size: 1em; | ||
- | border: 1px solid #aa0093; | ||
- | padding: 3px 7px 2px 7px; | ||
- | } | ||
- | |||
- | th { | ||
- | font-size: 1.1em; | ||
- | text-align: left; | ||
- | padding-top: | ||
- | padding-bottom: | ||
- | background-color: | ||
- | color: #ffffff; | ||
- | } | ||
- | |||
- | label{ | ||
- | background-color: | ||
- | color: #ffffff; | ||
- | } | ||
- | |||
- | |||
- | td.warn { | ||
- | /* enhance unlicensed products*/ | ||
- | color: #000000; | ||
- | background-color: | ||
- | } | ||
- | |||
- | .ng-binding{ | ||
- | // background-color: | ||
- | font-family: | ||
- | } | ||
- | </ |