[enh] Add RML9 dev tuto

bower.json

@@ -14,7 +14,8 @@
     "angular": "1.5.3",
     "angular-bind-notifier": "^1.1.7",
     "angular-image-crop": "^2.0.0",
-    "ng-idle": "^1.3.2"
+    "ng-idle": "^1.3.2",
+    "chart.js": "chartjs#^2.6.0"
   },
   "resolutions": {
     "angular-sanitize": "1.5.3",

doc/fr/development_tutorial-04.md

@@ -21,30 +21,29 @@ Quand l'utilisateur cliquera sur le champ "dividende universel" de la page suiva
 
 Passez sur la branche du code #rml8  : https://github.com/duniter/cesium/tree/rml8
 
-### Démarrer Cesium
 
-Lancer Cesium : 
+### Ajout de librairie dans Cesium
 
-```bash
-cd cesium
-ionic serve
-```
-### Démarrer le noeud ElasticSearch 
+#### librairie Chart.js
 
-Démarrer votre noeud ES :  
+[Chart.js](chartjs.org) est une librairie JS qui permet de faire de magnifiques graphiques.
 
-```bash
-cd duniter4j
-mvn install -DskipTests
-mvn install -Prun -pl duniter4j-elasticsearch 
+Vérifier que cette librairie est installé dans Cesium, en ouvrant la page principale de l'application  `www/index.html` et en repérant la ligne :
+```html
+<script src="js/vendor/Chart.js"></script>
+```
+
+Si ce n'est pas le cas, ajouté là avec la commande :
+```
+bower install chartjs --save
 ```
 
-### Ajout de la librairie D3.js
+Puis ajouter la librairie dans `www/index.html`.  
 
-D3.js est une puissante librairie JS qui permet de faire de magnifiques graphiques.
+#### librairie Angular Chart
 
-Vous pouvez utiliser `bower` pour installer la dépendance.
-Puis ajouter la librairie dans la page principale de l'application : `www/index.html` 
+[Angular Chart](https://jtblin.github.io/angular-chart.js/) est une librairie qui intègre pleinement `Chart.js` dans Angular JS, utilisé par Cesium.
+Cela permet de définir plus facilement un graphique. 
 
 ### Gestion du controlleur 
 
@@ -59,14 +58,35 @@ Editez le fichier `www/js/controllers/currency-charts-controllers.js`.
 
 A vous de jouer ! Il faut : 
 
-- Remplir la requete POST vers le noeud ES sur l'index `/test_net/block/_search`; cf méthode `$scope.loadUds()';
+- Remplir la requete POST vers le noeud ES sur l'index `/g1/block/_search`; cf méthode `$scope.loadUds()';
 - Traiter le retour de la requête, pour la transformer dans le format attendu par D3.js.
 
 ### Template
 
-Editez le template HTML, dans le fichier `www/templates/currency/charts/ud.html`
+Editez le template HTML.
+
+Regardez la documentation Chart.js pour savoir comment faire la suite !
+
+### Testez !
+
+#### Démarrer le noeud ElasticSearch 
 
-Regardez la documentation D3.js pour savoir comment faire la suite !
+Démarrer votre noeud ES :  
+
+```bash
+cd duniter4j
+mvn install -DskipTests
+mvn install -Prun -pl duniter4j-es-assembly 
+```
+
+#### Démarrer Cesium
+
+Lancer Cesium : 
+
+```bash
+cd cesium
+ionic serve
+```
 
 ## La suite ?
 

doc/fr/development_tutorial-05.md

+## Introduction
+
+Cet article est un tutoriel pour développer un plugin Cesium.
+
+## Prérequis
+
+Avant de faire ce tutoriel, vous devez : 
+ 
+ - Avoir suivi les tutoriels sur Cesium [jusqu'au niveau VII](./development_tutorial-02.md)
+
+## Niveau XIII
+
+### Objectif
+
+L'objectif ici est d'inésrer des fonctionnalités à Cesium, en exploitant le mécanisme de plugin.
+Dans la page `Mes opérations`, nous allons ajouter un bouton pour télécharger l'historique des opérations du compte. 
+
+### Récupérer le code (tag rml9)
+
+Passez sur la branche du code #rml9  : https://github.com/duniter/cesium/tree/rml9
+
+
+### Activation du plugin 
+
+Editer le fichier `www/index.html`, et décommenter LES DEUX lignes : 
+```html
+   (...)
+   <link href="dist/dist_css/plugins/graph/css/style.css" rel="stylesheet">
+   (...)
+   <script src="dist/dist_js/plugins/rml9/plugin.js"></script>
+   (...)
+```
+
+Editer le fichier `www/js/plugins.js`, et décommenter la ligne : 
+```json
+   (...)
+   ,'cesium.rml9.plugin'
+   (...)
+```
+
+Editer le fichier `www/js/config.js`, et ajouter ces lignes : 
+```json
+   (...)
+   "plugins": {
+   		(...)
+   		 // --- DEBUT des lignes à ajouter
+       "rml9": {   
+         "enable": true
+       }
+       // --- FIN des lignes à ajouter
+       (...)
+   	},
+```
+
+Le plugin RML9 est maintenan activer. Il ne reste plus qu'à lancer Cesium pour vérifier :
+```bash
+ionic serve
+```
+
+### Développement du plugin 
+
+Dans le fichier  `www/plugins/rml9/plugins.js`, identifier la méthode `onButtonClick`. 
+
+
+
+
+## La suite ?
+
+Il ne vous reste qu'à publier le résultat ! ;) 
+
+- sur le forum duniter,
+- ou mieux via un `pull request` sur github.
\ No newline at end of file

www/index.html

@@ -19,6 +19,7 @@
 
   <!--removeIf(no-plugin)-->
   <link href="dist/dist_css/plugins/es/css/style.css" rel="stylesheet">
+  <link href="dist/dist_css/plugins/graph/css/style.css" rel="stylesheet">
   <!--endRemoveIf(no-plugin)-->
   <!-- endbuild -->
   <!-- build:js dist_js/vendor.js -->

www/js/config.js

@@ -46,7 +46,7 @@ angular.module("cesium.config", [])
 		},
     "rml9": {
       "enable": true
-    },
+    }
 	},
 	"version": "0.12.6",
 	"build": "2017-05-23T08:45:46.819Z",

www/plugins/rml9/i18n/locale-fr-FR.json

 {
   "RML9": {
-    "WALLET": {
     "BTN_EXPORT": "Exporter les transactions",
+    "VIEW": {
+      "TITLE": "RML9"
     }
   }
 }

www/plugins/rml9/plugin.js

@@ -4,20 +4,45 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
   .config(function($stateProvider, PluginServiceProvider, csConfig) {
     'ngInject';
 
-    var enable = true; // csConfig.plugins && csConfig.plugins.rml9;
+    var enable = csConfig.plugins && csConfig.plugins.rml9;
     if (enable) {
 
+      // Extend existing view
       PluginServiceProvider
         .extendState('app.view_wallet_tx', {
           points: {
             'buttons': {
               templateUrl: "plugins/rml9/templates/button.html",
-              controller: 'Rml9Ctrl'
+              controller: 'Rml9ButtonCtrl'
+            }
+          }
+        })
+
+        .extendState('app.wot_identity', {
+          points: {
+            'buttons': {
+              templateUrl: "plugins/rml9/templates/button.html",
+              controller: 'Rml9ButtonCtrl'
             }
           }
         })
       ;
+
+      // Add new view
+      $stateProvider
+
+        .state('app.rml9', {
+          url: "/rml9?pubkey",
+          views: {
+            'menuContent': {
+              templateUrl: "plugins/rml9/templates/view.html",
+              controller: 'Rml9ViewCtrl'
+            }
+          }
+        });
     }
+
+
   })
 
   /**
@@ -25,30 +50,57 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
    *
    * Celui-ci sert à étendre la page 'Mes opérations'
    */
-  .controller('Rml9Ctrl', function($scope, $state, PluginService, FileSaver, BMA, csWallet) {
+  .controller('Rml9ButtonCtrl', function($scope, $state, PluginService, FileSaver, BMA, csWallet) {
     'ngInject';
 
     $scope.extensionPoint = PluginService.extensions.points.current.get();
 
     // Manage click on the export button
     $scope.onButtonClick = function() {
+      console.debug("[RML9] calling onButtonClick()");
 
-      var pubkey = csWallet.data.pubkey;
+      var pubkey = $scope.formData.pubkey || csWallet.isLogin() && csWallet.data.pubkey;
+      if (!pubkey) return;
 
       BMA.tx.history.all({pubkey: pubkey})
         .then(function(res){
           if (!res || !res.history) return;
-          console.log(res.history);
 
-          /*var allTx = res.history.received.reduce(function(allTx, tx){
-            return res.concat(tx.);
-          }, []);*/
+          console.debug("[RML9] TODO: process the TX history:", res.history);
 
-          //var saveIdFile = new Blob(["THis is a content"], {type: 'text/plain; charset=utf-8'});
-          //FileSaver.saveAs(saveIdFile, 'transactions.txt');
+          var fileContent = ["Hello Libre World !\n", "Second line example\n"];
+          var file = new Blob(fileContent, {type: 'text/plain; charset=utf-8'});
+          FileSaver.saveAs(file, 'transactions.txt');
         });
     };
-  }
-);
+  })
+
+
+  /**
+   * Ce controlleur gère la page #/app/rml9
+   */
+  .controller('Rml9ViewCtrl', function($scope, csWallet) {
+
+    // Call when enter into the view
+    $scope.$on('$ionicView.enter', function(e, state) {
+
+      console.log("[RML9] entering RML9 view...");
+
+      // If need, a pubkey could be pass by URL params : #/app/rml9?pubkey=...
+      /*
+      var pubkey = (state && state.stateParams && state.stateParams.pubkey) || (csWallet.isLogin() && csWallet.data.pubkey);
+      if (!pubkey) return;
+      */
+
+      $scope.items = [
+        {amount: 100, time: 125454702, issuer:'5U2xuAUEPFeUQ4zpns6Zn33Q1ZWaHxEd3sPx689ZpaZV'},
+        {amount: -500, time: 125404702, issuer:'2RFPQGxYraKTFKKBXgpNn1QDEPdFM7rHNu7HdbmmF43v'}
+      ];
+
+
+    });
+
+
+  });
 
 

www/plugins/rml9/templates/button.html

@@ -3,7 +3,7 @@
 
   <button class="button button-stable button-small-padding icon ion-android-archive"
           ng-click="onButtonClick()"
-          title="{{'RML9.WALLET.BTN_EXPORT' | translate}}">
+          title="{{'RML9.BTN_EXPORT' | translate}}">
   </button>
 
 </ng-if>

www/plugins/rml9/templates/view.html

+<ion-view left-buttons="leftButtons">
+
+  <ion-nav-title>
+    {{'RML9.VIEW.TITLE' | translate}}
+  </ion-nav-title>
+
+  <ion-content>
+
+    <!-- items container -->
+    <div class="list">
+
+      <!-- an item -->
+      <div class="item" ng-repeat="item in items">
+        <h3>{{item.time|formatDate}}</h3>
+        <h4>{{item.issuer|formatPubkey}}</h4>
+        <div class="badge">{{item.amount}}</div>
+      </div>
+
+    </div>
+
+  </ion-content>
+
+</ion-view>