diff --git a/doc/fr/development_tutorial-04-add_plugin.md b/doc/fr/development_tutorial-04-add_plugin.md
index 8ff0b5e3ce31e582e7b539dff447853f91b72b32..76ccc63491411dbfa2c538bafe3fb1d26b0e8d09 100644
--- a/doc/fr/development_tutorial-04-add_plugin.md
+++ b/doc/fr/development_tutorial-04-add_plugin.md
@@ -57,15 +57,14 @@ Editer le fichier `www/index.html`, et ajouter la ligne suivante, vers la fin du
Editer le fichier `www/js/plugins.js`, et ajoutez une entrée dans la liste, comme indiqué ci-dessous :
```
(...)
- // Plugins
- 'cesium.graph.plugin', // Ligne déjà existante, mais n'oubliez pas la virgule à la fin ! ;)
- 'cesium.rml9.plugin' // <-- La nouvelle ligne
+ // RML9 plugin:
+ 'cesium.rml9.plugin', // <-- La nouvelle ligne
(...)
```
Editer le fichier `www/js/config.js`, et ajouter les lignes suivantes dans sous la balise `plugins` :
-```JSON
+```js
// (...)
"plugins": {
// (...)
@@ -80,9 +79,9 @@ Editer le fichier `www/js/config.js`, et ajouter les lignes suivantes dans sous
Le plugin `rml9` est maintenant activé. Il ne vous reste plus qu'à lancer Cesium pour vérifier !
-```bash
-cd cesium
-ionic serve
+```
+ > cd cesium
+ > ionic serve
```
- Ouvrez un navigateur à l'adresse [http://localhost:8100](http://localhost:8100)
@@ -118,8 +117,8 @@ En haut du fichier, identifiez la partie qui définit le point d'insertion du pl
.extendState('app.wot_identity', {
points: {
'buttons': {
- templateUrl: "plugins/rml9/templates/button.html",
- controller: 'Rml9ButtonsCtrl'
+ templateUrl: "plugins/rml9/templates/01-button.html",
+ controller: 'Rml9ButtonCtrl'
}
}
});
@@ -146,19 +145,18 @@ Ouvrez le fichier `www/templates/wot/view_identity.html` :
```
Vous voyez que le formalisme utilisé pour le définir l'emplacement d'un point d'extension est très simple.
-Ouvrez maintenant le fichier `www/plugins/rml9/templates/buttons.html` :
+Ouvrez maintenant le fichier `www/plugins/rml9/templates/01-button.html` :
```html
- <!-- Button: export -->
- <button class="button button-balanced button-small-padding icon ion-android-archive"
- ng-click="onExportButtonClick()"
- title="{{'RML9.BTN_EXPORT' | translate}}">
- </button>
+<!-- Button that call a function of the controller -->
+<button class="button button-balanced button-small-padding icon ion-android-archive"
+ ng-click="onButtonClick()"
+ title="{{'RML9.BTN_OPEN' | translate}}">
+</button>
```
Ce fichier contient le **contenu visuel de notre plugin**.
-Ici, il s'agit simplement d'un bouton, avec l'appel d'une fonction à chaque clic.
-
+Ici, il s'agit simplement d'un bouton, avec l'appel d'une fonction JS Ã chaque clic.
Simple comme un `Hello world`, non ? ;)
@@ -176,8 +174,8 @@ Editer le fichier `www/plugins/rml9/plugin-01-add_button.js`. Puis, sous la pre
.extendState('app.view_wallet_tx', {
points: {
'buttons': {
- templateUrl: "plugins/rml9/templates/buttons.html",
- controller: 'Rml9ButtonsCtrl'
+ templateUrl: "plugins/rml9/templates/01-button.html",
+ controller: 'Rml9ButtonCtrl'
}
}
});
@@ -210,54 +208,56 @@ La méthologie est toujours la même :
```
- Dans le code des controlleurs (fichiers du répertoire `www/js/controllers`) recherchez le nom de la page (state) concernée;
- Dans le code du plugin, étendre le point d'extension de la manière suivante :
-```javascript
+```
PluginServiceProvider
.extendState('app.a_state_name', { // ici, le nom de la page (state), Ã identifier dans les controlleurs
points: {
'this-is-a-good-extension-place': { // ici, le nom du point d'extension concerné
- templateUrl: "plugins/rml9/templates/buttons.html",
- controller: 'Rml9ButtonsCtrl'
+ templateUrl: "plugins/rml9/templates/template.html", // le template HTML
+ controller: 'MyCtrl' // Le controlleur associé au template
}
}
});
```
-##Niveau XIV : Ajouter une page
+## Niveau XIV : Ajouter une page
-__Objectif :__ Ce niveau a pour objectif de vous apprendre à ajouter une nouvelle page dans Cesium. il s'agira ensuite utilise run service d'accès aux données pour afficher les transactions d'un compte.
+__Objectif :__ L'objectif est d'apprendre à ajouter une nouvelle page (un nouvel écran) dans Cesium. Il s'agira également d'utiliser un service d'accès aux données.
### Activation du plugin (en version `02`)
Editez le fichier `www/index.html` pour activer cette fois le plugin en version 2 :
- ```
+```html
<script src="dist/dist_js/plugins/rml9/plugin-02-add_view.js"></script>
- ```
+```
Dans votre navigateur, vérifiez que le bouton est toujours présent (page d'une identité ou `Mes opérations`).
-Cliquez sur le bouton. Une nouvelle page s'ouvre alors :
+Cliquez sur notre bouton vert : une nouvelle page s'ouvre :
+
<img src="https://forum.duniter.org/uploads/default/original/2X/5/5a8b4eb0c09d8125b1d6f92551256377a700e128.png" width="690" height="299">
### Se repérer dans le code
-Ouvrez le code du plugin.
-En haut u fichier, repérez le code suivant :
+Ouvrez le code du plugin (fichier `www/plugins/rml9/plugin-02-add_view.js`).
-```
+En haut du fichier, repérez le code suivant :
+
+```js
// [NEW] Ajout d'une nouvelle page #/app/rml9
$stateProvider
.state('app.rml9', {
url: "/rml9/:pubkey",
views: {
'menuContent': {
- templateUrl: "plugins/rml9/templates/view.html",
+ templateUrl: "plugins/rml9/templates/02-view.html",
controller: 'Rml9ViewCtrl'
}
}
});
```
-Cette déclaration ajoute une nouvelle page (state) `app.rml9`, utilisant le template HTML `view.html` et un nouveau controlleur associé.
+Cette déclaration ajoute une nouvelle page (state) `app.rml9`, utilisant le template HTML `02-view.html` et un nouveau controlleur associé.
Le code du controlleur de cette page est sité un peu plus bas :
```
@@ -286,7 +286,7 @@ Le code du controlleur de cette page est sité un peu plus bas :
> Le reste du code provient du plugin réalisé lors du niveau précédent.
> Le nouveau code est identifié par des commentaire précédé de la balise "`[NEW]`"
-Ouvrez maintenant le fichier `www/plugins/rml9/templates/view.html` qui contient le template HTML.
+Ouvrez maintenant le fichier `www/plugins/rml9/templates/02-view.html` qui contient le template HTML.
Observez notamment l'affichage des données que nous avons stockées dans la variable `$scope.items` :
```html
@@ -303,15 +303,15 @@ Observez notamment l'affichage des données que nous avons stockées dans la var
### Utiliser un service d'accès aux données
-Nous allons maintenant remplacer les données "en dures" dans le code, par l'appel à un "service" existant de Cesium.
+Nous allons maintenant remplacer les données _en dur_ dans le code, par l'appel à un "service" existant de Cesium.
-> Les "services" d'AngularJS sont des objets indépendant des interfaces, et donc réutiliables entre plusieurs écrans ou compasant graphiques. Typiquement, dans Cesium, ils executent les requêtes HTTP vers le noeud Duniter (le noeud configuré dans vos paramètres Cesium).
+> Les "services" d'AngularJS sont des objets indépendants des composants graphiques, et donc réutiliables entre plusieurs écrans ou compasants graphiques. Typiquement, dans Cesium, ils executent les requêtes HTTP vers le noeud Duniter (le noeud configuré dans vos paramètres Cesium).
-Dans le fichier `plugin-02-add_view.js`, remplacez l'initialisation du tableau `$scope.items` par cet appel au service `csTx` :
+Dans le fichier `plugin-02-add_view.js`, remplacez l'initialisation du tableau `$scope.items` par un appel au service `csTx` :
```
// Load account TX data
- csTx.load($scope.pubkey)
+ csTx.load($scope.pubkey) // <- appel au service csTx
.then(function(result) {
console.log(result); // Allow to discover data structure
if (result && result.tx && result.tx.history) {
@@ -319,10 +319,11 @@ Dans le fichier `plugin-02-add_view.js`, remplacez l'initialisation du tableau `
}
});
```
+
> Le `console.log()` est un moyen simple pour découvrir la structure des données renvoyées par le service.
> Un point d'arrêt dans la fonction aura le même effet.
-Notez bien le formalisme de traitement du retour de la méthode, propre aux méthodes asynchrones :
+Notez bien le formalisme de traitement du retour de la méthode, propre aux executions asynchrones :
```
monService.maMethode()
.then(function(result) {
@@ -330,7 +331,7 @@ Notez bien le formalisme de traitement du retour de la méthode, propre aux mét
});
```
-> Pour ne pas pénaliser les performances de la navigation, les services utilisent le plus souvent une execution _asynchrone_. Il est donc indespensable de bien maitriser l'usage de telles méthodes.
+> Pour ne pas pénaliser les performances de la navigation, les services utilisent le plus souvent un mode d'execution _asynchrone_. Il est donc indespensable de bien maitriser l'usage de telles méthodes.
#### Déclaration du service utilisé
@@ -342,7 +343,7 @@ Vous devriez avoir une erreur dans la console Javascript :
pas de panique : ce type d'erreur est fréquent ! il indique simplement que le service utilisé, `csTx`, n'a pas été déclaré comme dépendence du controlleur de la page.
Pour corriger l'erreur, ajouté le simplement dans la fonction du controlleur :
```
- .controller('Rml9ViewCtrl', function($scope, csTx /*ICI, ajouter la décalration du service*/) {
+ .controller('Rml9ViewCtrl', function($scope, csTx /*ICI, ajouter la déclaration du service*/) {
'ngInject';
// ...
```
@@ -422,11 +423,10 @@ Le chemin de la librairie installée doit ensuite être ajouté à la main, dans
<script src="lib/ionic/js/angular/angular-file-saver.bundle.js"></script>
```
-### Hop : 5 min de dev !
+### 5 minutes de dev : Top chrono !
-Allez, une petite fonction facile à coder : le remplissage du fichier d'export ! ;)
-
-Editez maintenant le plugin (en version `03`) et modifier la méthode `onExportButtonClick()` :
+Editez maintenant le code du plugin (fichier `www/plugins/rml9/plugin-03-file_export.js`)*[]:
+Modifier la méthode `onExportButtonClick()`, afin que le contenu du fichier soit correct :
```
// [NEW] Manage click on the export button
@@ -454,18 +454,149 @@ Editez maintenant le plugin (en version `03`) et modifier la méthode `onExportB
};
```
-Il suffit de remplir le tableau nommé `content` :)
+Il suffit de remplir le tableau nommé `content`.
+
+Allez hop: une petite fonction bien codée, ca vaut bien une pause, non ? ;)
+
+
+
+## Niveau XVI : Ajouter un graphique ChartJS
+
+__Objectif :__ Nous allons voir comment ajouter simplement un graphique, dans un écran.
+
+### Activation du plugin (en version `04`)
+
+Editez le fichier `www/index.html` pour activer cette fois le plugin en version `04` :
+```
+ <script src="dist/dist_js/plugins/rml9/plugin-04-chart.js"></script>
+```
+
+En vous rendant dans la page `rml9`, vous devriez voir apparaitre deux graphiques :
+
+<img src="/uploads/default/original/2X/5/503d5d31c7bc3987d74a5109a7f39c5cbef4876b.png" width="667" height="500">
+
+On y voit deux graphiques, représentant respectovement :
+
+ - la somme des **montants entrants**, regroupé par émétteur ;
+ - la somme des **montants sortants**, regroupé par destinataire.
+### Se repérer dans le code
+
+Ouvrir le code du plugin (fichier `www/plugins/rml9/plugin-04-chart.js`), et répérer le code du controlleur qui pépare les données pour ces graphiques :
+
+```
+ // [NEW] data for input chart
+ $scope.inputChart = {
+ data: [500, 100, 64],
+ labels: ['2RFPQGxYraKTFKKBXgpNn1QDEPdFM7rHNu7HdbmmF43v','5U2xuAUEPFeUQ4zpns6Zn33Q1ZWaHxEd3sPx689ZpaZV','2ny7YAdmzReQxAayyJZsyVYwYhVyax2thKcGknmQy5nQ']
+ };
+
+ // [NEW] data for output chart
+ $scope.outputChart = {
+ data: [650, 240, 154],
+ labels: ['2RFPQGxYraKTFKKBXgpNn1QDEPdFM7rHNu7HdbmmF43v','5U2xuAUEPFeUQ4zpns6Zn33Q1ZWaHxEd3sPx689ZpaZV','2ny7YAdmzReQxAayyJZsyVYwYhVyax2thKcGknmQy5nQ']
+ };
+```
-## Niveau XVI : Etendre un service
+Cette fois encore, les données ont été fixées _en dur_, pour bien comprendre la structure des données attendues.
+
+ - La partie `data` est un simple tableau, possédant les valeurs numériques du graphique
+ - La partie `labels` contient les libellés associées aux valeurs. elles sont visibles quand on passe la sourie sur un élément du graphique.
+
+Ouvrez maintenant le template HTML :
+
+```html
+ <!-- [NEW] TX input chart -->
+ <p class="gray" translate>RML9.CHART.INPUT_CHART_TITLE</p>
+ <canvas id="chart-received-pie" class="chart-pie"
+ chart-data="inputChart.data"
+ chart-labels="inputChart.labels">
+ </canvas>
+
+ <!-- [NEW] TX output chart -->
+ <p class="gray" translate>RML9.CHART.OUTPUT_CHART_TITLE</p>
+ <canvas id="chart-sent-pie" class="chart-pie"
+ chart-data="outputChart.data"
+ chart-labels="outputChart.labels">
+ </canvas>
+```
+
+> Cesium n'utilise pas directement ChartJS, mais une adaptation pour angular JS, nommé `angular-chart`.
+> Vous trouverez toute la documentation nécessaire sur le site http://jtblin.github.io/angular-chart.js/
+
+
+### A vous de jouer !
+
+A vous de jouer, afin de remplacer par du contenu dynamique !
+
+> Une méthode qui pourrait vous faire gagner du temps à été placée dans le controlleur : `$scope.computeChartData()`.
+> Elle prend en paramètres une liste de transaction, et renvoi les données telles que attendues par ChartJS.
+> Reste à savoir quelle liste de transaction il faut lui envoyer, et comment la constituer ! ;)
+
+
+
+## Niveau XVII : Etendre un service
__Objectif :__ Nous allons voir comment étendre le fonctionnement du code présent dans les services.
-### Activation du plugin (en version `04`)
+### Activation du plugin (en version `05`)
+
+
+
+TODO
+
+
+
+## Niveau XVIII : Etendre les paramètres
+
+__Objectif :__ Nous allons voir comment étendre les paramètres de Cesium, en y ajoutant une entrée.
+
+### Activation du plugin (en version `06`)
+Dans le code du plugin (fichier `www/plugins/rml9/plugin-06-settings`) observez notamment cette partie :
+
+```js
+ .controller('Rml9ButtonCtrl', function($scope, UIUtils, csSettings) {
+ 'ngInject';
+
+ // [NEW] Calcul l'état du plugin (actif ou non)
+ function isPluginEnable(settings) {
+ return settings.plugins && settings.plugins.rml9 && settings.plugins.rml9.enable;
+ }
+
+ // [NEW] Nouvelle variable stockée dans le contexte de la page
+ $scope.enable = isPluginEnable(csSettings.data);
+
+ // [NEW] Détection des changements dans les paramètres
+ csSettings.api.data.on.changed($scope, function(settings) {
+ console.debug("[RML9] Detect changes in settings!");
+
+ $scope.enable = isPluginEnable(settings);
+ console.debug("[RML9] RML9 plugin enable: " + $scope.enable);
+ });
+
+ // (...)
+ });
+```
+
+Nous voyons que l'état du plugin (actif ou non) est stocké dans la variable `$scope.enable` :
+```
+ $scope.enable = isPluginEnable(csSettings.data);
+```
+
+Cette même variable est **maintenue à jour**, lors de changement survenu dans les paramètres :
+```
+ csSettings.api.data.on.changed($scope, function(settings) {
+ // ...
+ $scope.enable = isPluginEnable(settings);
+ //...
+ });
+```
+> Au passage, notez l'usage d'une API de service comme vu plus haut : ici le service
+`csSettings`.
diff --git a/doc/fr/development_tutorial-05_add_chart.md b/doc/fr/development_tutorial-05_add_chart.md
deleted file mode 100644
index 02351bc5e972d980a9c2a3f43875681e1f803f8d..0000000000000000000000000000000000000000
--- a/doc/fr/development_tutorial-05_add_chart.md
+++ /dev/null
@@ -1,98 +0,0 @@
-## Introduction
-
-Cet article est un tutoriel pour développer sur Cesium+, en utilisant les capacités de l'ES API portée par Duniter4j.
-
-## Prérequis
-
-Avant de faire ce tutoriel, vous devez :
-
- - Avoir suivi les tutoriels sur Cesium [jusqu'au niveau VII](./development_tutorial-02.md)
- - Avoir suivi le tutoriel sur Duniter4j [jusqu'au niveau V](https://github.com/duniter/duniter4j/blob/master/doc/fr/development_tutorial.md).
-
-## Niveau XII
-
-### Objectif
-
-L'objectif ici est de réaliser un graphique représentant la répartition des émétteurs de paiement à destination d'un compte.
-
-: http://g1.duniter.fr/#/app/currency/view/lg/
-
-### Récupérer le code (tag rml8)
-
-Passez sur la branche du code #rml8 : https://github.com/duniter/cesium/tree/rml8
-
-
-### Ajout de librairie dans Cesium
-
-#### librairie Chart.js
-
-[Chart.js](chartjs.org) est une librairie JS qui permet de faire de magnifiques graphiques.
-
-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
-```
-
-Puis ajouter la librairie dans `www/index.html`.
-
-#### librairie Angular Chart
-
-[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
-
-Editer le fichier `www/js/controllers.js`, et décommenter la ligne :
-```json
- (...)
- 'cesium.currency-charts.controllers',
- (...)
-```
-
-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 `/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.
-
-Regardez la documentation Chart.js pour savoir comment faire la suite !
-
-### Testez !
-
-#### Démarrer le noeud ElasticSearch
-
-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 ?
-
-Si vous avez réussi ce niveau, vous êtes vraiment un contributeur expert de Cesium !
-
-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 cd60b90a02877fea5a398b600c4a7058a39d0c46..8865cada473545f2af6bfecf9dfd534ad292d334 100644
--- a/www/index.html
+++ b/www/index.html
@@ -179,7 +179,11 @@
<!--<script src="dist/dist_js/plugins/rml9/plugin.js"></script>-->
<!--<script src="dist/dist_js/plugins/rml9/plugin-01-add_button.js"></script>-->
<!--<script src="dist/dist_js/plugins/rml9/plugin-02-add_view.js"></script>-->
- <!--<script src="dist/dist_js/plugins/rml9/plugin-03-export_to_file.js"></script>-->
+ <!--<script src="dist/dist_js/plugins/rml9/plugin-03-file_export.js"></script>-->
+ <!--script src="dist/dist_js/plugins/rml9/plugin-04-chart.js"></script-->
+ <!--<script src="dist/dist_js/plugins/rml9/plugin-06-service_api.js"></script>-->
+ <!--<script src="dist/dist_js/plugins/rml9/plugin-06-settings.js"></script>-->
+ <!--<script src="dist/dist_js/plugins/rml9/plugin-final.js"></script>-->
<!--endRemoveIf(no-plugin)-->
diff --git a/www/js/plugins.js b/www/js/plugins.js
index a2d66860e7f974a0a2e707f1166b4f6d72e94015..f3bced85d8b67453f501e22ac6ba785cc7f75101 100644
--- a/www/js/plugins.js
+++ b/www/js/plugins.js
@@ -14,7 +14,7 @@ angular.module('cesium.plugins', [
// endRemoveIf(ubuntu)
// RML9 plugin:
- //'cesium.rml9.plugin',
+ 'cesium.rml9.plugin',
// ES plugin (Cesium+):
'cesium.es.plugin'
diff --git a/www/plugins/es/templates/settings/settings_extend.html b/www/plugins/es/templates/settings/settings_extend.html
index e4caca4651286077ea584cc657750c27c1302ccc..1fec690fec494185e73237af71ece78e66536922 100644
--- a/www/plugins/es/templates/settings/settings_extend.html
+++ b/www/plugins/es/templates/settings/settings_extend.html
@@ -1,6 +1,4 @@
-<span class="item item-divider" translate>SETTINGS.PLUGINS_SETTINGS</span>
-
<div class="item item-text-wrap ink" ui-sref="app.es_settings">
<div class="input-label ng-binding" translate>ES_SETTINGS.PLUGIN_NAME</div>
<h4 class="gray" translate>ES_SETTINGS.PLUGIN_NAME_HELP</h4>
diff --git a/www/plugins/graph/js/services/color-services.js b/www/plugins/graph/js/services/color-services.js
index d123e545ae14f463c9717faf8b0fd0f2531d8e4f..8995ec27e388e117928a41af7244283cc237a4d6 100644
--- a/www/plugins/graph/js/services/color-services.js
+++ b/www/plugins/graph/js/services/color-services.js
@@ -1,6 +1,6 @@
angular.module('cesium.graph.color.services', [])
- .factory('gpColor', function($rootScope) {
+ .factory('gpColor', function() {
'ngInject';
var
diff --git a/www/plugins/rml9/i18n/locale-fr-FR.json b/www/plugins/rml9/i18n/locale-fr-FR.json
index 152945116524bea8ad5ec8031d4c81e1357dc2c4..0a71112327ab8acde2c638b3f1f00e4bd1dddce9 100644
--- a/www/plugins/rml9/i18n/locale-fr-FR.json
+++ b/www/plugins/rml9/i18n/locale-fr-FR.json
@@ -2,10 +2,18 @@
"RML9": {
"BTN_EXPORT": "Télécharger",
"BTN_OPEN": "Ouvrir la page RML9",
+ "BTN_SWOW_TX": "Voir les transactions",
"VIEW": {
"TITLE": "RML9",
"DIVIDER": "Dernières transactions :",
"BALANCE": "Solde du compte"
+ },
+ "CHART": {
+ "INPUT_CHART_TITLE": "Somme des flux entrants, par émetteur :",
+ "OUTPUT_CHART_TITLE": "Somme des flux sortants, par destinaire :"
+ },
+ "SETTINGS": {
+ "ENABLE_TOGGLE": "Activer le plugin RML9 ?"
}
}
}
diff --git a/www/plugins/rml9/plugin-01-add_button.js b/www/plugins/rml9/plugin-01-add_button.js
index 7ad1d846f07b91e8cd07b6ae15f11d6bf0ed423f..0c673bf6c92f7b05484387262072cc057ecc9ac8 100644
--- a/www/plugins/rml9/plugin-01-add_button.js
+++ b/www/plugins/rml9/plugin-01-add_button.js
@@ -7,12 +7,12 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
var enable = csConfig.plugins && csConfig.plugins.rml9;
if (enable) {
- // [01] Extension de la vue d'une identité: ajout d'un bouton
+ // Extension de la vue d'une identité: ajout d'un bouton
PluginServiceProvider
.extendState('app.wot_identity', {
points: {
'buttons': {
- templateUrl: "plugins/rml9/templates/button.html",
+ templateUrl: "plugins/rml9/templates/01-button.html",
controller: 'Rml9ButtonCtrl'
}
}
@@ -21,14 +21,14 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
})
- // [01] Manage events from the plugin button
+ // Manage events from the plugin button
.controller('Rml9ButtonCtrl', function($scope) {
'ngInject';
- // [01] Manage click event, on the plugin button
+ // Manage click event, on the plugin button
$scope.onButtonClick = function() {
- // [01] Get the public key, from the page context ($scope.formData)
+ // Get the public key, from the page context ($scope.formData)
var pubkey = $scope.formData.pubkey;
if (!pubkey) return;
console.debug("[RML9] call method onButtonClick() on pubkey: " + pubkey);
diff --git a/www/plugins/rml9/plugin-02-add_view.js b/www/plugins/rml9/plugin-02-add_view.js
index 8d77179d59d5fb6b2eef9aa1a0d9cd0a296b6389..0f1ae19a33a7c267f8915c435d556764b427c1c4 100644
--- a/www/plugins/rml9/plugin-02-add_view.js
+++ b/www/plugins/rml9/plugin-02-add_view.js
@@ -12,7 +12,7 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
.extendState('app.wot_identity', {
points: {
'buttons': {
- templateUrl: "plugins/rml9/templates/button.html",
+ templateUrl: "plugins/rml9/templates/01-button.html",
controller: 'Rml9ButtonCtrl'
}
}
@@ -22,7 +22,7 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
PluginServiceProvider.extendState('app.view_wallet_tx', {
points: {
'buttons': {
- templateUrl: "plugins/rml9/templates/button.html",
+ templateUrl: "plugins/rml9/templates/01-button.html",
controller: 'Rml9ButtonCtrl'
}
}
@@ -34,7 +34,7 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
url: "/rml9/:pubkey",
views: {
'menuContent': {
- templateUrl: "plugins/rml9/templates/view.html",
+ templateUrl: "plugins/rml9/templates/02-view.html",
controller: 'Rml9ViewCtrl'
}
}
diff --git a/www/plugins/rml9/plugin-03-file_export.js b/www/plugins/rml9/plugin-03-file_export.js
new file mode 100644
index 0000000000000000000000000000000000000000..a701642a72bb80c547d501f62e0e0971987720ad
--- /dev/null
+++ b/www/plugins/rml9/plugin-03-file_export.js
@@ -0,0 +1,97 @@
+
+angular.module('cesium.rml9.plugin', ['cesium.services'])
+
+ .config(function($stateProvider, PluginServiceProvider, csConfig) {
+ 'ngInject';
+
+ var enable = csConfig.plugins && csConfig.plugins.rml9;
+ if (enable) {
+
+ PluginServiceProvider
+
+ // Extension de la vue d'une identité: ajout d'un bouton
+ .extendState('app.wot_identity', {
+ points: {
+ 'buttons': {
+ templateUrl: "plugins/rml9/templates/03-button.html"
+ }
+ }
+ })
+
+ // Extension de 'Mes opérations' : insertion d'un bouton
+ .extendState('app.view_wallet_tx', {
+ points: {
+ 'buttons': {
+ templateUrl: "plugins/rml9/templates/03-button.html"
+ }
+ }
+ });
+
+ // Ajout de la page #/app/rml9
+ $stateProvider
+ .state('app.rml9', {
+ url: "/rml9/:pubkey",
+ views: {
+ 'menuContent': {
+ templateUrl: "plugins/rml9/templates/03-view_with_button.html",
+ controller: 'Rml9ViewCtrl'
+ }
+ }
+ });
+ }
+
+ })
+
+ // [NEW] Manage events from the page #/app/rml9
+ .controller('Rml9ViewCtrl', function($scope, csTx,
+ // [NEW] declare an AngularJS plugin, useful to create file
+ FileSaver) {
+ 'ngInject';
+
+ // When opening the view
+ $scope.$on('$ionicView.enter', function(e, state) {
+ console.log("[RML9] Opening the view...");
+
+ // Get the pubkey (from URL params) and store it in the page context ($scope)
+ $scope.pubkey = (state && state.stateParams && state.stateParams.pubkey);
+ if (!$scope.pubkey) return;
+
+ // Load account TX data
+ csTx.load($scope.pubkey)
+ .then(function(result) {
+ console.log(result); // Allow to discover data structure
+ if (result && result.tx && result.tx.history) {
+ $scope.items = result.tx.history;
+ }
+ // [NEW] store the account balance
+ $scope.balance = (result && result.balance) || 0;
+ });
+ });
+
+ // [NEW] Manage click on the export button
+ $scope.onExportButtonClick = function() {
+ console.debug("[RML9] call method onExportButtonClick() on pubkey: " + $scope.pubkey);
+
+ // Load account TX data
+ var fromTime = -1; // all TX (full history)
+ csTx.load($scope.pubkey, fromTime)
+ .then(function(result) {
+ if (!result || !result.tx || !result.tx.history) return; // no TX
+
+
+ // TODO: replace this !
+ // You can choose any format (CSV, TXT, JSON, ...) and test it !
+ var content = [
+ "Hello Libre World !\n",
+ "Cesium rock's !\n"
+ ];
+
+ var file = new Blob(content, {type: 'text/plain; charset=utf-8'});
+ var filename = $scope.pubkey+'-history.txt';
+ FileSaver.saveAs(file, filename);
+ });
+
+ };
+ });
+
+
diff --git a/www/plugins/rml9/plugin-04-chart.js b/www/plugins/rml9/plugin-04-chart.js
new file mode 100644
index 0000000000000000000000000000000000000000..2ec3a0e7f489494441d1d1569169e5b9cf148770
--- /dev/null
+++ b/www/plugins/rml9/plugin-04-chart.js
@@ -0,0 +1,107 @@
+
+angular.module('cesium.rml9.plugin', ['chart.js', 'cesium.graph.services', 'cesium.services'])
+
+ .config(function($stateProvider, PluginServiceProvider, csConfig) {
+ 'ngInject';
+
+ var enable = csConfig.plugins && csConfig.plugins.rml9;
+ if (enable) {
+
+ // Extension de la vue d'une identité : ajout d'un bouton
+ PluginServiceProvider
+ .extendState('app.wot_identity', {
+ points: {
+ 'buttons': {
+ templateUrl: "plugins/rml9/templates/03-button.html"
+ }
+ }
+ })
+
+ // Extension de 'Mes opérations' : insertion d'un bouton
+ .extendState('app.view_wallet_tx', {
+ points: {
+ 'buttons': {
+ templateUrl: "plugins/rml9/templates/03-button.html"
+ }
+ }
+ });
+
+ // Ajout d'une nouvelle page #/app/rml9
+ $stateProvider
+ .state('app.rml9', {
+ url: "/rml9/:pubkey",
+ views: {
+ 'menuContent': {
+ templateUrl: "plugins/rml9/templates/04-view_chart.html",
+ controller: 'Rml9ViewCtrl'
+ }
+ }
+ });
+ }
+
+ })
+
+ // Manage events from the page #/app/rml9
+ .controller('Rml9ViewCtrl', function($scope, csTx, gpColor) {
+ 'ngInject';
+
+ // When opening the view
+ $scope.$on('$ionicView.enter', function(e, state) {
+ console.log("[RML9] Opening the view...");
+
+ // Get the pubkey (from URL params) and store it in the page context ($scope)
+ $scope.pubkey = (state && state.stateParams && state.stateParams.pubkey);
+ if (!$scope.pubkey) return;
+
+ // Load account TX data
+ csTx.load($scope.pubkey, -1)
+ .then(function(result) {
+ console.log(result); // Allow to discover data structure
+ if (result && result.tx && result.tx.history) {
+ $scope.items = result.tx.history;
+
+ // [NEW] data for input chart
+ $scope.inputChart = {
+ data: [500, 100, 64],
+ labels: ['2RFPQGxYraKTFKKBXgpNn1QDEPdFM7rHNu7HdbmmF43v','5U2xuAUEPFeUQ4zpns6Zn33Q1ZWaHxEd3sPx689ZpaZV','2ny7YAdmzReQxAayyJZsyVYwYhVyax2thKcGknmQy5nQ']
+ };
+
+ // [NEW] data for output chart
+ $scope.outputChart = {
+ data: [650, 240, 154],
+ labels: ['2RFPQGxYraKTFKKBXgpNn1QDEPdFM7rHNu7HdbmmF43v','5U2xuAUEPFeUQ4zpns6Zn33Q1ZWaHxEd3sPx689ZpaZV','2ny7YAdmzReQxAayyJZsyVYwYhVyax2thKcGknmQy5nQ']
+ };
+
+ }
+
+ // store the account balance
+ $scope.balance = (result && result.balance) || 0;
+ });
+ });
+
+ // [NEW] load chart data: received amount by pubkey
+ $scope.computeChartData = function(txArray) {
+
+ // Sum TX amount, with a group by pubkey
+ var sumByPubkeys = {};
+ _.forEach(txArray, function (tx) {
+ sumByPubkeys[tx.pubkey] = sumByPubkeys[tx.pubkey] || {
+ label: tx.uid || tx.pubkey,
+ sum: 0
+ };
+ sumByPubkeys[tx.pubkey].sum += tx.amount;
+ });
+
+ // Get values (from the map), then sort (desc) on sum
+ var sumItems = _.sortBy(_.values(sumByPubkeys), 'sum').reverse();
+
+ // Return arrays expected by angular-chart
+ return {
+ data: _.pluck(sumItems, 'sum'),
+ labels: _.pluck(sumItems, 'label'),
+ colors: gpColor.scale.custom(sumItems.length)
+ };
+ };
+ });
+
+
diff --git a/www/plugins/rml9/plugin-05-service_api.js b/www/plugins/rml9/plugin-05-service_api.js
new file mode 100644
index 0000000000000000000000000000000000000000..7aa169c40ac4e38f1feb59bfc100e0e694e32150
--- /dev/null
+++ b/www/plugins/rml9/plugin-05-service_api.js
@@ -0,0 +1,75 @@
+
+angular.module('cesium.rml9.plugin', ['cesium.services'])
+
+ .config(function($stateProvider, PluginServiceProvider, csConfig) {
+ 'ngInject';
+
+ var enable = csConfig.plugins && csConfig.plugins.rml9;
+ if (enable) {
+
+ PluginServiceProvider
+
+ // Extension de la vue d'une identité: ajout d'un bouton
+ .extendState('app.wot_identity', {
+ points: {
+ 'buttons': {
+ templateUrl: "plugins/rml9/templates/04-button.html",
+ controller: 'Rml9ButtonCtrl'
+ }
+ }
+ })
+
+ // Extension de 'Mes opérations' : insertion d'un bouton
+ .extendState('app.view_wallet_tx', {
+ points: {
+ 'buttons': {
+ templateUrl: "plugins/rml9/templates/04-button.html",
+ controller: 'Rml9ButtonCtrl'
+ }
+ }
+ });
+
+ // [NEW] Ajout d'une entrée dans les paramètres générale
+ PluginServiceProvider.extendState('app.settings', {
+ points: {
+ 'plugins': {
+ templateUrl: "plugins/rml9/templates/04-settings_item.html"
+ }
+ }
+ });
+ }
+
+ })
+
+ // Manage events from the plugin button
+ .controller('Rml9ButtonCtrl', function($scope, UIUtils,
+ // [NEW] Service d'accès aux paramètres
+ csSettings) {
+ 'ngInject';
+
+
+ // [NEW] A simple helper method
+ function isEnable(settings) {
+ return settings.plugins && settings.plugins.rml9 && settings.plugins.rml9.enable;
+ }
+
+ // [NEW] Nouvelle variable stockée dans le contexte de la page
+ $scope.enable = isEnable(csSettings.data);
+
+ // [NEW] Rafraichir cette variable à chaque changement dans les paramètres
+ csSettings.api.data.on.changed($scope, function(settings) {
+ console.debug("[RML9] Detect changes in settings!");
+
+ $scope.enable = isEnable(settings);
+ console.debug("[RML9] RML9 plugin enable: " + $scope.enable);
+ });
+
+
+ // Click event on button
+ $scope.onButtonClick = function() {
+ console.debug("[RML9] call function onButtonClick()");
+ UIUtils.toast.show("Fine, this plugin works !");
+ };
+ });
+
+
diff --git a/www/plugins/rml9/plugin-06-settings.js b/www/plugins/rml9/plugin-06-settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..0d162278f0df1a4c78a62e0fecc78bbb2e761c3e
--- /dev/null
+++ b/www/plugins/rml9/plugin-06-settings.js
@@ -0,0 +1,74 @@
+
+angular.module('cesium.rml9.plugin', ['cesium.services'])
+
+ .config(function($stateProvider, PluginServiceProvider, csConfig) {
+ 'ngInject';
+
+ var enable = csConfig.plugins && csConfig.plugins.rml9;
+ if (enable) {
+
+ PluginServiceProvider
+
+ // Extension de la vue d'une identité: ajout d'un bouton
+ .extendState('app.wot_identity', {
+ points: {
+ 'buttons': {
+ templateUrl: "plugins/rml9/templates/06-button.html",
+ controller: 'Rml9ButtonCtrl'
+ }
+ }
+ })
+
+ // Extension de 'Mes opérations' : insertion d'un bouton
+ .extendState('app.view_wallet_tx', {
+ points: {
+ 'buttons': {
+ templateUrl: "plugins/rml9/templates/06-button.html",
+ controller: 'Rml9ButtonCtrl'
+ }
+ }
+ });
+
+ // [NEW] Ajout d'une entrée dans les paramètres générale
+ PluginServiceProvider.extendState('app.settings', {
+ points: {
+ 'plugins': {
+ templateUrl: "plugins/rml9/templates/06-settings_item.html"
+ }
+ }
+ });
+ }
+
+ })
+
+ // Manage events from the plugin button
+ .controller('Rml9ButtonCtrl', function($scope, UIUtils,
+ // [NEW] Service d'accès aux paramètres
+ csSettings) {
+ 'ngInject';
+
+ // [NEW] Calcul l'état du plugin (actif ou non)
+ function isPluginEnable(settings) {
+ return settings.plugins && settings.plugins.rml9 && settings.plugins.rml9.enable;
+ }
+
+ // [NEW] Nouvelle variable stockée dans le contexte de la page
+ $scope.enable = isPluginEnable(csSettings.data);
+
+ // [NEW] Détection des changements dans les paramètres
+ csSettings.api.data.on.changed($scope, function(settings) {
+ console.debug("[RML9] Detect changes in settings!");
+
+ $scope.enable = isPluginEnable(settings);
+ console.debug("[RML9] RML9 plugin enable: " + $scope.enable);
+ });
+
+
+ // Click event on button
+ $scope.onButtonClick = function() {
+ console.debug("[RML9] call function onButtonClick()");
+ UIUtils.toast.show("Fine, this plugin works !");
+ };
+ });
+
+
diff --git a/www/plugins/rml9/plugin-03-export_to_file.js b/www/plugins/rml9/plugin-final.js
similarity index 71%
rename from www/plugins/rml9/plugin-03-export_to_file.js
rename to www/plugins/rml9/plugin-final.js
index 600912e45f34630192e49cbd2e7e0e30d3931ed5..c0e154ee0b44cfe38287fada9efacf4c8b050619 100644
--- a/www/plugins/rml9/plugin-03-export_to_file.js
+++ b/www/plugins/rml9/plugin-final.js
@@ -7,26 +7,34 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
var enable = csConfig.plugins && csConfig.plugins.rml9;
if (enable) {
- // Extension de la vue d'une identité: ajout d'un bouton
PluginServiceProvider
+
+ // Extension de la vue d'une identité: ajout d'un bouton
.extendState('app.wot_identity', {
points: {
'buttons': {
- templateUrl: "plugins/rml9/templates/button.html",
- controller: 'Rml9ButtonCtrl'
+ templateUrl: "plugins/rml9/templates/03-button.html"
}
}
- });
+ })
+
+ // Extension de 'Mes opérations' : insertion d'un bouton
+ .extendState('app.view_wallet_tx', {
+ points: {
+ 'buttons': {
+ templateUrl: "plugins/rml9/templates/03-button.html"
+ }
+ }
+ })
- // Extension de 'Mes opérations' : insertion d'un bouton
- PluginServiceProvider.extendState('app.view_wallet_tx', {
- points: {
- 'buttons': {
- templateUrl: "plugins/rml9/templates/button.html",
- controller: 'Rml9ButtonCtrl'
- }
- }
- });
+ // Ajout d'une entrée dans les paramètres générale
+ .extendState('app.settings', {
+ points: {
+ 'plugins': {
+ templateUrl: "plugins/rml9/templates/04-settings_item.html"
+ }
+ }
+ });
// Ajout de la page #/app/rml9
$stateProvider
@@ -34,7 +42,7 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
url: "/rml9/:pubkey",
views: {
'menuContent': {
- templateUrl: "plugins/rml9/templates/view-03.html",
+ templateUrl: "plugins/rml9/templates/03-view_with_button.html",
controller: 'Rml9ViewCtrl'
}
}
@@ -43,23 +51,6 @@ angular.module('cesium.rml9.plugin', ['cesium.services'])
})
- // Manage events from the plugin button
- .controller('Rml9ButtonCtrl', function($scope, $state) {
- 'ngInject';
-
- // Manage click event, on the plugin button
- $scope.onButtonClick = function() {
-
- // [Get the public key, from the page context ($scope.formData)
- var pubkey = $scope.formData.pubkey;
- if (!pubkey) return;
- console.debug("[RML9] call method onButtonClick() on pubkey: " + pubkey);
-
- // [NEW] Open the RML9 view (#/app/rml9)
- $state.go('app.rml9', {pubkey: pubkey});
- };
- })
-
// [NEW] Manage events from the page #/app/rml9
.controller('Rml9ViewCtrl', function($scope, csTx,
// [NEW] declare an AngularJS plugin, useful to create file
diff --git a/www/plugins/rml9/plugin-step-03.js b/www/plugins/rml9/plugin-step-03.js
deleted file mode 100644
index 9220cbd209c398fae0958ab69be06d50098650aa..0000000000000000000000000000000000000000
--- a/www/plugins/rml9/plugin-step-03.js
+++ /dev/null
@@ -1,121 +0,0 @@
-
-angular.module('cesium.rml9.plugin', ['cesium.services'])
-
- .config(function($stateProvider, PluginServiceProvider, csConfig) {
- 'ngInject';
-
- var enable = csConfig.plugins && csConfig.plugins.rml9;
- if (enable) {
-
- // Extension de la vue d'une identité
- PluginServiceProvider
- .extendState('app.wot_identity', {
- points: {
- 'buttons': {
- templateUrl: "plugins/rml9/templates/buttons.html",
- controller: 'Rml9ButtonsCtrl'
- }
- }
- });
-
- // Extension de 'Mes opérations'
- /*PluginServiceProvider
- .extendState('app.view_wallet_tx', {
- points: {
- 'buttons': {
- templateUrl: "plugins/rml9/templates/buttons.html",
- controller: 'Rml9ButtonsCtrl'
- }
- }
- });*/
-
- // Ajout d'une nouvelle vue #/app/rml9
- $stateProvider
- .state('app.rml9', {
- url: "/rml9?pubkey",
- views: {
- 'menuContent': {
- templateUrl: "plugins/rml9/templates/view.html",
- controller: 'Rml9ViewCtrl'
- }
- }
- });
- }
-
-
- })
-
- /**
- * Les controlleurs sont chargés de gérer faire la liaison entre les services d'accès aux données, et l'interface graphique.
- *
- * Celui-ci sert à étendre les vues 'Mes opérations' et celle d'une identité
- */
- .controller('Rml9ButtonsCtrl', function($scope, $state, PluginService, FileSaver, BMA, csWallet) {
- 'ngInject';
-
- $scope.extensionPoint = PluginService.extensions.points.current.get();
-
- /**
- * Manage click event, on the export button
- */
- $scope.onExportButtonClick = function() {
- console.debug("[RML9] calling onExportButtonClick()");
-
- 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.debug("[RML9] TODO: process the TX history:", res.history);
-
- 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');
- });
- };
-
- /**
- * Manage click event, on the export button
- */
- $scope.onOpenButtonClick = function() {
- console.debug("[RML9] calling onOpenButtonClick()");
-
- // Get the pubkey from the extended view
- var pubkey = $scope.formData.pubkey || csWallet.isLogin() && csWallet.data.pubkey;
-
- // Open the RML9 view (#/app/rml9)
- $state.go('app.rml9', {pubkey: pubkey});
- };
- })
-
-
- /**
- * 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/01-button.html
similarity index 88%
rename from www/plugins/rml9/templates/button.html
rename to www/plugins/rml9/templates/01-button.html
index 013af9f9d0ab8d223049c6b5ddf572f804efce98..8ec7156c11ccf3a7282d726cc948b98c88392b8f 100644
--- a/www/plugins/rml9/templates/button.html
+++ b/www/plugins/rml9/templates/01-button.html
@@ -1,4 +1,4 @@
-<!-- Button: call a method from the state controller -->
+<!-- Button that call a function of the controller -->
<button class="button button-balanced button-small-padding icon ion-android-archive"
ng-click="onButtonClick()"
title="{{'RML9.BTN_OPEN' | translate}}">
diff --git a/www/plugins/rml9/templates/view.html b/www/plugins/rml9/templates/02-view.html
similarity index 100%
rename from www/plugins/rml9/templates/view.html
rename to www/plugins/rml9/templates/02-view.html
diff --git a/www/plugins/rml9/templates/03-button.html b/www/plugins/rml9/templates/03-button.html
new file mode 100644
index 0000000000000000000000000000000000000000..52bbfd3002f796c4c15ccbf9823fbd03319e6255
--- /dev/null
+++ b/www/plugins/rml9/templates/03-button.html
@@ -0,0 +1,6 @@
+<!-- Button: Open a view, using `ui-sref` attribute -->
+<button class="button button-balanced button-small-padding icon ion-android-archive"
+ ui-sref="app.rml9({pubkey: formData.pubkey})"
+ title="{{'RML9.BTN_SWOW_TX' | translate}}">
+</button>
+
diff --git a/www/plugins/rml9/templates/view-03.html b/www/plugins/rml9/templates/03-view_with_button.html
similarity index 100%
rename from www/plugins/rml9/templates/view-03.html
rename to www/plugins/rml9/templates/03-view_with_button.html
diff --git a/www/plugins/rml9/templates/04-view_chart.html b/www/plugins/rml9/templates/04-view_chart.html
new file mode 100644
index 0000000000000000000000000000000000000000..b504f8fba2efc4ea1f84e43576264c040f070256
--- /dev/null
+++ b/www/plugins/rml9/templates/04-view_chart.html
@@ -0,0 +1,77 @@
+<ion-view left-buttons="leftButtons">
+ <ion-nav-title>
+ {{'RML9.VIEW.TITLE' | translate}}
+ </ion-nav-title>
+
+ <ion-content>
+ <div class="list">
+
+ <!-- buttons bar -->
+ <div class="center padding">
+ <div class="buttons">
+ <button class="button button-balanced icon-left icon ion-archive"
+ ng-click="onExportButtonClick()">{{'RML9.BTN_EXPORT' | translate}}
+ </button>
+ </div>
+ </div>
+
+ <!-- the pubkey -->
+ <div class="item">
+ {{'COMMON.PUBKEY'|translate}}
+ <div class="badge">{{pubkey|formatPubkey}}</div>
+ </div>
+
+ <!-- the balance -->
+ <div class="item">
+ {{'RML9.VIEW.BALANCE'|translate}}
+ <div class="badge badge-calm">
+ {{balance|formatAmount}} <span ng-bind-html="$root.currency.name|currencySymbol"></span>
+ </div>
+ </div>
+
+ <!-- a text divider-->
+ <div class="item item-divider">{{'RML9.VIEW.DIVIDER'|translate:{pubkey: pubkey} }}</div>
+
+
+ <div class="row">
+ <div class="col col-75">
+ <!-- iterate on each TX -->
+ <div class="item item-text-wrap" ng-repeat="item in items">
+
+ <h3>
+ {{item.time|formatDate}}
+ <span ng-if="item.comment" class="gray"> | {{item.comment}}</span>
+ </h3>
+
+ <h4 ng-if="item.uid" class="positive"><i class="icon ion-person"></i> {{item.name||item.uid}}</h4>
+ <h4 ng-if="!item.uid" class="gray"><i class="icon ion-key"></i> {{item.pubkey|formatPubkey}}</h4>
+
+ <div class="badge"
+ ng-class="{'badge-balanced': item.amount > 0}">
+ {{item.amount|formatAmount}} <span ng-bind-html="$root.currency.name|currencySymbol"></span>
+ </div>
+ </div>
+ </div>
+
+ <div class="col col-25">
+
+ <!-- [NEW] TX input chart -->
+ <p class="gray" translate>RML9.CHART.INPUT_CHART_TITLE</p>
+ <canvas id="chart-received-pie" class="chart-pie"
+ chart-data="inputChart.data"
+ chart-labels="inputChart.labels"
+ chart-colors="inputChart.colors">
+ </canvas>
+
+ <!-- [NEW] TX input chart -->
+ <p class="gray" translate>RML9.CHART.OUTPUT_CHART_TITLE</p>
+ <canvas id="chart-sent-pie" class="chart-pie"
+ chart-data="outputChart.data"
+ chart-labels="outputChart.labels"
+ chart-colors="outputChart.colors">
+ </canvas>
+ </div>
+ </div>
+ </div>
+ </ion-content>
+</ion-view>
diff --git a/www/plugins/rml9/templates/06-button.html b/www/plugins/rml9/templates/06-button.html
new file mode 100644
index 0000000000000000000000000000000000000000..32a172e81aeaf3bcfd13003b5bf03695dec7deee
--- /dev/null
+++ b/www/plugins/rml9/templates/06-button.html
@@ -0,0 +1,11 @@
+<!-- [NEW] Display only if plugin is enable -->
+<ng-if ng-if="enable">
+
+ <!-- Button: call a method from the state controller -->
+ <button class="button button-balanced button-small-padding icon ion-android-archive"
+ ng-click="onButtonClick()"
+ title="{{'RML9.BTN_SWOW_TX' | translate}}">
+ </button>
+
+</ng-if>
+
diff --git a/www/plugins/rml9/templates/06-settings_item.html b/www/plugins/rml9/templates/06-settings_item.html
new file mode 100644
index 0000000000000000000000000000000000000000..0527cebb36dee9ab5f488a2533364885c59a873c
--- /dev/null
+++ b/www/plugins/rml9/templates/06-settings_item.html
@@ -0,0 +1,10 @@
+
+<div class="item item-toggle dark">
+ <div class="input-label" translate>RML9.SETTINGS.ENABLE_TOGGLE</div>
+ <label class="toggle toggle-royal">
+ <input type="checkbox" ng-model="formData.plugins.rml9.enable" >
+ <div class="track">
+ <div class="handle"></div>
+ </div>
+ </label>
+</div>
diff --git a/www/templates/settings/settings.html b/www/templates/settings/settings.html
index 395d16a55d9c7ebc115c5065b03253720f1cb6fc..70e2805c93d9c46b4f967e716a3d920801078ee7 100644
--- a/www/templates/settings/settings.html
+++ b/www/templates/settings/settings.html
@@ -166,6 +166,10 @@
<!-- Allow extension here -->
<cs-extension-point name="network"></cs-extension-point>
+ <span class="item item-divider"
+ ng-if="$root.config.plugins"
+ translate>SETTINGS.PLUGINS_SETTINGS</span>
+
<!-- Allow extension here -->
<cs-extension-point name="plugins"></cs-extension-point>
</div>