UniqueSoft/swirl
2
0
Fork 0
mirror of https://github.com/cuigh/swirl synced 2025-03-12 06:31:19 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Support dragging and rearranging charts

Browse Source
This commit is contained in:
cuigh 2018-04-03 16:02:44 +08:00
parent 68f288c69b
commit d595547803
11 changed files with 127 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
assets/dragula/dragula.min.css vendored Executable file
View File

@ -0,0 +1 @@
.gu-mirror{position:fixed!important;margin:0!important;z-index:9999!important;opacity:.8;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";filter:alpha(opacity=80)}.gu-hide{display:none!important}.gu-unselectable{-webkit-user-select:none!important;-moz-user-select:none!important;-ms-user-select:none!important;user-select:none!important}.gu-transit{opacity:.2;-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter:alpha(opacity=20)}

1
assets/dragula/dragula.min.js vendored Executable file
View File

File diff suppressed because one or more lines are too long

13
assets/swirl/css/swirl.css
View File

@ -171,8 +171,14 @@ dd {
color: whitesmoke;
}
.card-header-title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.card-header-title, .card-header-icon, .card-footer-item {
padding: 0.5rem 0.75rem;
padding: 0.5rem 0.5rem;
}
.card-content {
@ -262,4 +268,9 @@ textarea.code {
font-size: 0.8em;
border: 1px solid #ddd;
height: 450px !important;
}
.drag {
cursor: move;
padding: 0.5rem 0.25rem;
}

35
assets/swirl/js/swirl.js
View File

@ -1137,12 +1137,17 @@ var Swirl;
this.$elem = $(`<div class="column is-${this.opts.width}" data-name="${this.opts.name}">
<div class="card">
<header class="card-header">
<p class="card-header-title">${this.opts.title}</p>
<a class="card-header-icon drag">
<span class="icon">
<i class="fas fa-bars has-text-grey-light" aria-hidden="true"></i>
</span>
</a>
<p class="card-header-title is-paddingless">${this.opts.title}</p>
<a data-action="remove-chart" class="card-header-icon" aria-label="remove chart">
<span class="icon">
<i class="fas fa-times has-text-danger" aria-hidden="true"></i>
</span>
</a>
</a>
</header>
<div class="card-content" style="height: ${this.opts.height}px"></div>
</div>
@ -1503,12 +1508,20 @@ var Swirl;
}
}
save() {
let charts = this.charts.map(c => {
return {
name: c.getOptions().name,
width: c.getOptions().width,
height: c.getOptions().height,
};
let charts = [];
this.$panel.children().each((index, elem) => {
let name = $(elem).data("name");
for (let i = 0; i < this.charts.length; i++) {
let c = this.charts[i];
if (c.getOptions().name === name) {
charts.push({
name: c.getOptions().name,
width: c.getOptions().width,
height: c.getOptions().height,
});
break;
}
}
});
let args = {
name: this.opts.name,
@ -1611,6 +1624,11 @@ var Swirl;
class IndexPage {
constructor() {
this.dashboard = new ChartDashboard("#div-charts", window.charts, { name: "home" });
dragula([$('#div-charts').get(0)], {
moves: function (el, container, handle) {
return $(handle).closest('a.drag').length > 0;
}
});
}
}
Swirl.IndexPage = IndexPage;
@ -2431,6 +2449,7 @@ var Swirl;
name: "service",
key: $("#h2-service-name").text()
});
dragula([$('#div-charts').get(0)]);
$cb_time.change(e => {
this.dashboard.setPeriod($(e.target).val());
});

2
assets/swirl/js/swirl.js.map
View File

File diff suppressed because one or more lines are too long

27
assets/swirl/ts/core/chart.ts
View File

@ -23,12 +23,17 @@ namespace Swirl.Core {
this.$elem = $(`<div class="column is-${this.opts.width}" data-name="${this.opts.name}">
<div class="card">
<header class="card-header">
<p class="card-header-title">${this.opts.title}</p>
<a class="card-header-icon drag">
<span class="icon">
<i class="fas fa-bars has-text-grey-light" aria-hidden="true"></i>
</span>
</a>
<p class="card-header-title is-paddingless">${this.opts.title}</p>
<a data-action="remove-chart" class="card-header-icon" aria-label="remove chart">
<span class="icon">
<i class="fas fa-times has-text-danger" aria-hidden="true"></i>
</span>
</a>
</a>
</header>
<div class="card-content" style="height: ${this.opts.height}px"></div>
</div>
@ -447,11 +452,19 @@ namespace Swirl.Core {
}
save() {
let charts = this.charts.map(c => {
return {
name: c.getOptions().name,
width: c.getOptions().width,
height: c.getOptions().height,
let charts: any = [];
this.$panel.children().each((index: number, elem: Element) => {
let name = $(elem).data("name");
for (let i=0;i<this.charts.length; i++) {
let c = this.charts[i];
if (c.getOptions().name === name) {
charts.push({
name: c.getOptions().name,
width: c.getOptions().width,
height: c.getOptions().height,
});
break;
}
}
});
let args = {

71
assets/swirl/ts/index.ts
View File

@ -1,78 +1,19 @@
///<reference path="core/core.ts" />
///<reference path="core/chart.ts" />
namespace Swirl {
import Modal = Swirl.Core.Modal;
import FilterBox = Swirl.Core.FilterBox;
import ChartDashboard = Swirl.Core.ChartDashboard;
export class IndexPage {
private dashboard: ChartDashboard;
// private fb: FilterBox;
// private charts: any;
// private $charts: JQuery;
constructor() {
// this.fb = new FilterBox("#txt-query", this.filterCharts.bind(this));
this.dashboard = new ChartDashboard("#div-charts", window.charts, {name: "home"});
// $("#btn-add").click(this.showAddDlg.bind(this));
// $("#btn-add-chart").click(this.addChart.bind(this));
// $("#btn-save").click(() => {
// this.dashboard.save();
// });
dragula([$('#div-charts').get(0)], {
moves: function (el, container, handle): boolean {
return $(handle).closest('a.drag').length > 0;
// return handle.classList.contains('drag');
}
});
}
// private showAddDlg() {
// let $panel = $("#nav-charts");
// $panel.find("label.panel-block").remove();
//
// // load charts
// $ajax.get(`/system/chart/query`, {dashboard: "home"}).json((charts: any) => {
// for (let i = 0; i < charts.length; i++) {
// let c = charts[i];
// $panel.append(`<label class="panel-block">
// <input type="checkbox" value="${c.name}" data-index="${i}">${c.name}: ${c.title}
// </label>`);
// }
// this.charts = charts;
// this.$charts = $panel.find("label.panel-block");
// });
//
// let dlg = new Modal("#dlg-add-chart");
// dlg.show();
// }
//
// private filterCharts(text: string) {
// if (!text) {
// this.$charts.show();
// return;
// }
//
// this.$charts.each((i, elem) => {
// let $elem = $(elem);
// let texts: string[] = [
// this.charts[i].name.toLowerCase(),
// this.charts[i].title.toLowerCase(),
// this.charts[i].desc.toLowerCase(),
// ];
// for (let i = 0; i < texts.length; i++) {
// let index = texts[i].indexOf(text);
// if (index >= 0) {
// $elem.show();
// return;
// }
// }
// $elem.hide();
// })
// }
//
// private addChart() {
// this.$charts.each((i, e) => {
// if ($(e).find(":checked").length > 0) {
// let c = this.charts[i];
// this.dashboard.addGraph(c);
// }
// });
// Modal.close();
// }
}
}

9
assets/swirl/ts/service/stats.ts
View File

@ -1,7 +1,6 @@
///<reference path="../core/core.ts" />
///<reference path="../core/chart.ts" />
namespace Swirl.Service {
import Modal = Swirl.Core.Modal;
import ChartDashboard = Swirl.Core.ChartDashboard;
export class StatsPage {
@ -17,13 +16,9 @@ namespace Swirl.Service {
name: "service",
key: $("#h2-service-name").text()
});
dragula([$('#div-charts').get(0)]);
// $("#btn-add").click(() => {
// Modal.alert("Coming soon...");
// });
// $("#btn-save").click(() => {
// Modal.alert("Coming soon...");
// });
// bind events
$cb_time.change(e => {
this.dashboard.setPeriod($(e.target).val());
});

47
assets/swirl/typings/dragula.d.ts vendored Normal file
View File

@ -0,0 +1,47 @@
// Type definitions for dragula v2.1.2
// Project: http://bevacqua.github.io/dragula/
// Definitions by: Paul Welter <https://github.com/pwelter34>
// Yang He <https://github.com/abruzzihraig>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
declare var dragula: dragula.Dragula;
export = dragula;
export as namespace dragula;
declare namespace dragula {
interface DragulaOptions {
containers?: Element[];
isContainer?: (el?: Element) => boolean;
moves?: (el?: Element, container?: Element, handle?: Element, sibling?: Element) => boolean;
accepts?: (el?: Element, target?: Element, source?: Element, sibling?: Element) => boolean;
invalid?: (el?: Element, target?: Element) => boolean;
direction?: string;
copy?: ((el: Element, source: Element) => boolean) | boolean;
revertOnSpill?: boolean;
removeOnSpill?: boolean;
delay?: boolean | number;
mirrorContainer?: Element;
ignoreInputTextSelection?: boolean;
}
interface Drake {
containers: Element[];
dragging: boolean;
start(item:Element): void;
end(): void;
cancel(revert:boolean): void;
cancel(): void;
remove(): void;
on(events: string, callback: Function): void;
destroy(): void;
}
interface Dragula {
(containers: Element[], options: DragulaOptions): Drake;
(containers: Element, options: DragulaOptions): Drake;
(containers: Element[]): Drake;
(options: DragulaOptions): Drake;
(): Drake;
}
}

5
views/index.jet
View File

@ -1,8 +1,13 @@
{{ extends "_layouts/default" }}
{{ block style() }}
<link rel="stylesheet" href="/assets/dragula/dragula.min.css?v=2.7.2">
{{ end }}
{{ block script() }}
<script>var charts = {{ writeJson(.Charts) }};</script>
<script src="/assets/echarts/echarts.min.js?v=4.0.4"></script>
<script src="/assets/dragula/dragula.min.js?v=2.7.2"></script>
<script>$(() => new Swirl.IndexPage())</script>
{{ end }}

5
views/service/stats.jet
View File

@ -2,9 +2,14 @@
{{ import "../_modules/detail" }}
{{ import "../_modules/form" }}
{{ block style() }}
<link rel="stylesheet" href="/assets/dragula/dragula.min.css?v=2.7.2">
{{ end }}
{{ block script() }}
<script>var charts = {{ writeJson(.Charts) }};</script>
<script src="/assets/echarts/echarts.min.js?v=4.0.4"></script>
<script src="/assets/dragula/dragula.min.js?v=2.7.2"></script>
<script>$(() => new Swirl.Service.StatsPage())</script>
{{ end }}