Differences

This shows you the differences between two versions of the page.

--- userspace:json-rpc_angularjs [2015/05/01 16:04] – [index.html] justcoding
+++ userspace:json-rpc_angularjs [2021/08/23 10:37] (current) – external edit 127.0.0.1
@@ 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 /usr/share/opsiconfd/static/AngularExample folder thus avoiding cross scripting complaints of modern browsers.
+All needed files (.html, .js, .css) should be hosted below /usr/share/opsiconfd/static/AngularExample folder. This way no other Webserver is involved and cross scripting complaints by the browser are avoided.
 The location would then read https://opsi:4447/AngularExample.
+====== 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 ======
-configed will currently answer /rpc? requests with Encoding "deflate", but will anounce it as "gzip". This issue is known and a patch is [[https://forum.opsi.org/viewtopic.php?f=6&t=7449|mentioned in the forums]].
+opsiconfd will currently answer /rpc? requests with Encoding "deflate", but will anounce it as "gzip". This currently prevents any browser from even reading the opsiconfd answer. The responsible Worker.py needs a small change to answer requests from a browser //and// Winst.exe (and other legacy opsi clients) as well. The issue is known and a patch is [[https://forum.opsi.org/viewtopic.php?f=6&t=7449|mentioned in the forums]].
 Most requests require a logon, some even special rights. The script user should be member of a new group //opsireader// and the **acl.conf** file should be prepended with appropriate lines:
@@ Line 18: / Line 22: @@
 </file>
+====== Calling Parameter ======
+When called as /AngularExample/?{"dns":"clientID.domain.local"}
+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://play.google.com/store/apps/details?id=eu.dirtyharry.opsiadmin|OPSI Admin]]. The App can read barcodes/QRcodes formatted this way in order to open the details of the identified client. Nice feature when the barcode sticks on the client.
+What if the barcode appears right on the client's screen? Try this Java app: [[https://github.com/GallusMax/opsi/tree/master/opsi-barcode|Opsi-Barcode]]
 ====== The Code ======
 <code>
 /usr/share/opsiconfd/static/AngularExample
   ├ index.html
+  ├ angular.js
   ├ swinv.js
   └ swinv.css
  </code>
-===== index.html =====
+======= index.html =======
 Where all other is loaded from..
 <code html>
@@ Line 84: / Line 96: @@
 </code>
-swinv.js
+======= swinv.js =======
 The AngularJS mimic..
-<code js>
+<code JavaScript>
 (function(){
     var app = angular.module('opsi-swinv', []);
@@ Line 102: / Line 114: @@
 	this.auditParams.params.push([]);
 	this.auditParams.params.push({"clientId":"defaultclient.domain.local"});
-	opsiURL=baseurl+"?"+$filter('json')(this.auditParams);
 	me=this;
@@ Line 272: / Line 282: @@
 })();
+</code>
+======= swinv.css =======
+some tweaking of the appearance - anything goes..
+<code css>
+body {
+    font-family: "Comic Sans M$", Arial, Helvetica, sans-serif;
+}
+table{
+    width: 100%;
+    border-collapse: 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: 5px;
+    padding-bottom: 4px;
+    background-color: #d30c6b;
+    color: #ffffff;
+}
+label{
+    background-color: #d30c6b;
+    color: #ffffff;
+}
+td.warn {
+/* enhance unlicensed products*/
+    color: #000000;
+    background-color: yellow;
+}
+.ng-binding{
+//    background-color: blue;
+font-family: Courier;
+}
 </code>