diff --git a/bower.json b/bower.json
index 8992e37e4dee6397a721bc038e2cbce5ceaced11..498c7e07368e8d2d6a741b959171c81338922bb6 100644
--- a/bower.json
+++ b/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",
diff --git a/doc/fr/development_tutorial-04.md b/doc/fr/development_tutorial-04.md
index 7f6e1efda210544f72e0719cbf3ee08f4cc14bfa..dad2751631c8a764166944ba3b5a70c60c3c5e7e 100644
--- a/doc/fr/development_tutorial-04.md
+++ b/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 ?
diff --git a/doc/fr/development_tutorial-05.md b/doc/fr/development_tutorial-05.md
new file mode 100644
index 0000000000000000000000000000000000000000..182b15364a9b26872e9cc8a53d01bf4e73b93e3d
--- /dev/null
+++ b/doc/fr/development_tutorial-05.md
@@ -0,0 +1,72 @@
+## 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
diff --git a/www/index.html b/www/index.html
index 24f4173a4c81aeb8e7f42f734c7efcc19a642479..e3a2e99adf110124eb14b0fa31bd6f0f76e87a44 100644
--- a/www/index.html
+++ b/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 -->
diff --git a/www/js/config.js b/www/js/config.js
index fdb54a5d567c8f4dc821eee556a6be4cabd4ec3f..0cab57479bc07009d56d5613d68e06d4d1f1fe07 100644
--- a/www/js/config.js
+++ b/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",
diff --git a/www/plugins/rml9/i18n/locale-fr-FR.json b/www/plugins/rml9/i18n/locale-fr-FR.json
index c20b5b06ac7619cb48647ebd42e76fe192335cc9..0dfad640d78c19e4bd81e0125c1c7978343d6c19 100644
--- a/www/plugins/rml9/i18n/locale-fr-FR.json
+++ b/www/plugins/rml9/i18n/locale-fr-FR.json
@@ -1,7 +1,8 @@
{
"RML9": {
- "WALLET": {
- "BTN_EXPORT": "Exporter les transactions",
+ "BTN_EXPORT": "Exporter les transactions",
+ "VIEW": {
+ "TITLE": "RML9"
}
}
}
diff --git a/www/plugins/rml9/plugin.js b/www/plugins/rml9/plugin.js
index b1f9b687c3c3923350b03ab29d5263f759617132..d8766423fc546728d9c06729fc30c38767d301ea 100644
--- a/www/plugins/rml9/plugin.js
+++ b/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'}
+ ];
+
+
+ });
+
+
+ });
diff --git a/www/plugins/rml9/templates/button.html b/www/plugins/rml9/templates/button.html
index f996275ffd3da3d42af2f8d1b0c96bf4c575c52d..43dd317b43d6c511d2bea4fffe38735da8b1f798 100644
--- a/www/plugins/rml9/templates/button.html
+++ b/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>
diff --git a/www/plugins/rml9/templates/view.html b/www/plugins/rml9/templates/view.html
new file mode 100644
index 0000000000000000000000000000000000000000..665f08658b7493e329198117c1ba174d04bcafe8
--- /dev/null
+++ b/www/plugins/rml9/templates/view.html
@@ -0,0 +1,23 @@
+<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>