Chart export & import

assets/swirl/js/swirl.js

@@ -1644,7 +1644,10 @@ var Swirl;
             constructor() {
                 this.$charts = $("#div-charts").children();
                 this.fb = new FilterBox("#txt-query", this.filterCharts.bind(this));
-                Dispatcher.bind("#div-charts").on("delete-chart", this.deleteChart.bind(this));
+                $("#btn-import").click(this.importChart);
+                Dispatcher.bind("#div-charts")
+                    .on("export-chart", this.exportChart.bind(this))
+                    .on("delete-chart", this.deleteChart.bind(this));
             }
             deleteChart(e) {
                 let $container = $(e.target).closest("div.column");
@@ -1677,6 +1680,31 @@ var Swirl;
                     $elem.hide();
                 });
             }
+            exportChart(e) {
+                let $container = $(e.target).closest("div.column");
+                let name = $container.data("name");
+                $ajax.get(name + "/detail").text(r => {
+                    Modal.alert(`<textarea class="textarea" rows="8" readonly>${r}</textarea>`, "Export chart");
+                });
+            }
+            importChart(e) {
+                Modal.confirm(`<textarea class="textarea" rows="8"></textarea>`, "Import chart", (dlg, e) => {
+                    try {
+                        let chart = JSON.parse(dlg.find('textarea').val());
+                        $ajax.post("new", chart).trigger(e.target).json(r => {
+                            if (r.success) {
+                                location.reload();
+                            }
+                            else {
+                                dlg.error(r.message);
+                            }
+                        });
+                    }
+                    catch (e) {
+                        dlg.error(e);
+                    }
+                });
+            }
         }
         Metric.ListPage = ListPage;
     })(Metric = Swirl.Metric || (Swirl.Metric = {}));

assets/swirl/ts/chart/list.ts

@@ -14,7 +14,10 @@ namespace Swirl.Metric {
             this.fb = new FilterBox("#txt-query", this.filterCharts.bind(this));
 
             // bind events
-            Dispatcher.bind("#div-charts").on("delete-chart", this.deleteChart.bind(this));
+            $("#btn-import").click(this.importChart);
+            Dispatcher.bind("#div-charts")
+                .on("export-chart", this.exportChart.bind(this))
+                .on("delete-chart", this.deleteChart.bind(this));
         }
 
         private deleteChart(e: JQueryEventObject) {
@@ -24,7 +27,7 @@ namespace Swirl.Metric {
                 $ajax.post(name + "/delete").trigger(e.target).json<AjaxResult>(r => {
                     $container.remove();
                     dlg.close();
-                })
+                });
             });
         }
 
@@ -41,7 +44,7 @@ namespace Swirl.Metric {
                         $elem.data("title").toLowerCase(),
                         $elem.data("desc").toLowerCase(),
                     ];
-                for (let i = 0; i<texts.length; i++) {
+                for (let i = 0; i < texts.length; i++) {
                     let index = texts[i].indexOf(text);
                     if (index >= 0) {
                         $elem.show();
@@ -51,5 +54,30 @@ namespace Swirl.Metric {
                 $elem.hide();
             })
         }
+
+        private exportChart(e: JQueryEventObject) {
+            let $container = $(e.target).closest("div.column");
+            let name = $container.data("name");
+            $ajax.get(name + "/detail").text(r => {
+                Modal.alert(`<textarea class="textarea" rows="8" readonly>${r}</textarea>`, "Export chart");
+            });
+        }
+
+        private importChart(e: JQueryEventObject) {
+            Modal.confirm(`<textarea class="textarea" rows="8"></textarea>`, "Import chart", (dlg, e) => {
+                try {
+                    let chart = JSON.parse(dlg.find('textarea').val());
+                    $ajax.post("new", chart).trigger(e.target).json<AjaxResult>(r => {
+                        if (r.success) {
+                            location.reload();
+                        } else {
+                            dlg.error(r.message);
+                        }
+                    });
+                } catch (e) {
+                    dlg.error(e);
+                }
+            });
+        }
     }
 }

config/i18n/en.yml

@@ -22,6 +22,7 @@ button.scale: Scale
 button.rollback: Rollback
 button.previous: Previous
 button.next: Next
+button.import: Import
 
 # field
 field.name: Name

config/i18n/zh.yml

@@ -22,6 +22,7 @@ button.scale: 调整
 button.rollback: 回退
 button.previous: 前一页
 button.next: 后一页
+button.import: 导入
 
 # field
 field.name: 名称

controller/chart.go

@@ -18,6 +18,7 @@ type ChartController struct {
 	Query         web.HandlerFunc `path:"/query" name:"chart.query" authorize:"?" desc:"chart query"`
 	New           web.HandlerFunc `path:"/new" name:"chart.new" authorize:"!" desc:"new chart page"`
 	Create        web.HandlerFunc `path:"/new" method:"post" name:"chart.create" authorize:"!" desc:"create chart"`
+	Detail        web.HandlerFunc `path:"/:name/detail" name:"chart.detail" authorize:"?" desc:"chart detail"`
 	Edit          web.HandlerFunc `path:"/:name/edit" name:"chart.edit" authorize:"!" desc:"edit chart page"`
 	Delete        web.HandlerFunc `path:"/:name/delete" method:"post" name:"chart.delete" authorize:"!" desc:"delete chart"`
 	Update        web.HandlerFunc `path:"/:name/edit" method:"post" name:"chart.update" authorize:"!" desc:"update chart"`
@@ -32,6 +33,7 @@ func Chart() (c *ChartController) {
 		Query:         chartQuery,
 		New:           chartNew,
 		Create:        chartCreate,
+		Detail:        chartDetail,
 		Edit:          chartEdit,
 		Update:        chartUpdate,
 		Delete:        chartDelete,
@@ -50,6 +52,16 @@ func chartList(ctx web.Context) error {
 	return ctx.Render("system/chart/list", m)
 }
 
+func chartDetail(ctx web.Context) error {
+	name := ctx.P("name")
+	chart, err := biz.Chart.Get(name)
+	if err != nil {
+		return err
+	}
+
+	return ctx.JSON(chart, "  ")
+}
+
 func chartQuery(ctx web.Context) error {
 	charts, err := biz.Chart.List()
 	if err != nil {

views/system/chart/list.jet

@@ -29,6 +29,9 @@
       <p class="level-item">
         <a href="new" class="button is-success"><span class="icon"><i class="fas fa-plus"></i></span><span>{{ i18n("button.new") }}</span></a>
       </p>
+      <p class="level-item">
+        <button id="btn-import" class="button is-info"><span class="icon"><i class="fas fa-level-down-alt"></i></span><span>{{ i18n("button.import") }}</span></button>
+      </p>
     </div>
   </nav>
     <div id="div-charts" class="columns is-multiline">
@@ -70,7 +73,7 @@
             </article>
           </div>
           <footer class="card-footer">
-            {*<a class="card-footer-item">View</a>*}
+            <a data-action="export-chart" class="card-footer-item">Export</a>
             <a href="{{ .Name }}/edit" class="card-footer-item">Edit</a>
             <a data-action="delete-chart" class="card-footer-item">Delete</a>
           </footer>