Merge branch 'next' into form-refresh-on-save
This commit is contained in:
@ -3,7 +3,7 @@ export const SUCCESS_CLASS = "pf-m-success";
|
||||
export const ERROR_CLASS = "pf-m-danger";
|
||||
export const PROGRESS_CLASS = "pf-m-in-progress";
|
||||
export const CURRENT_CLASS = "pf-m-current";
|
||||
export const VERSION = "2021.4.5";
|
||||
export const VERSION = "2021.5.1-rc7";
|
||||
export const PAGE_SIZE = 20;
|
||||
export const EVENT_REFRESH = "ak-refresh";
|
||||
export const EVENT_NOTIFICATION_TOGGLE = "ak-notification-toggle";
|
||||
|
||||
@ -6,6 +6,7 @@ import { ArcElement, BarElement } from "chart.js";
|
||||
import { TimeScale, LinearScale } from "chart.js";
|
||||
import "chartjs-adapter-moment";
|
||||
import { FONT_COLOUR_DARK_MODE, FONT_COLOUR_LIGHT_MODE } from "../../pages/flows/FlowDiagram";
|
||||
import {EVENT_REFRESH} from "../../constants";
|
||||
|
||||
Chart.register(Legend, Tooltip);
|
||||
Chart.register(LineController, BarController, DoughnutController);
|
||||
@ -43,6 +44,13 @@ export abstract class AKChart<T> extends LitElement {
|
||||
this.chart.resize();
|
||||
}
|
||||
});
|
||||
window.addEventListener(EVENT_REFRESH, () => {
|
||||
this.apiRequest().then((r: T) => {
|
||||
if (!this.chart) return;
|
||||
this.chart.data = this.getChartData(r);
|
||||
this.chart.update();
|
||||
});
|
||||
});
|
||||
const matcher = window.matchMedia("(prefers-color-scheme: light)");
|
||||
const handler = (ev?: MediaQueryListEvent) => {
|
||||
if (ev?.matches || matcher.matches) {
|
||||
@ -56,6 +64,22 @@ export abstract class AKChart<T> extends LitElement {
|
||||
handler();
|
||||
}
|
||||
|
||||
firstUpdated(): void {
|
||||
this.apiRequest().then((r) => {
|
||||
const canvas = <HTMLCanvasElement>this.shadowRoot?.querySelector("canvas");
|
||||
if (!canvas) {
|
||||
console.warn("Failed to get canvas element");
|
||||
return false;
|
||||
}
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) {
|
||||
console.warn("failed to get 2d context");
|
||||
return false;
|
||||
}
|
||||
this.chart = this.configureChart(r, ctx);
|
||||
});
|
||||
}
|
||||
|
||||
getChartType(): string {
|
||||
return "bar";
|
||||
}
|
||||
@ -129,23 +153,6 @@ export abstract class AKChart<T> extends LitElement {
|
||||
return new Chart(ctx, config as ChartConfiguration);
|
||||
}
|
||||
|
||||
|
||||
firstUpdated(): void {
|
||||
this.apiRequest().then((r) => {
|
||||
const canvas = <HTMLCanvasElement>this.shadowRoot?.querySelector("canvas");
|
||||
if (!canvas) {
|
||||
console.warn("Failed to get canvas element");
|
||||
return false;
|
||||
}
|
||||
const ctx = canvas.getContext("2d");
|
||||
if (!ctx) {
|
||||
console.warn("failed to get 2d context");
|
||||
return false;
|
||||
}
|
||||
this.chart = this.configureChart(r, ctx);
|
||||
});
|
||||
}
|
||||
|
||||
render(): TemplateResult {
|
||||
return html`
|
||||
<div class="container">
|
||||
|
||||
@ -102,18 +102,18 @@ export class OutpostForm extends Form<Outpost> {
|
||||
</select>
|
||||
<p class="pf-c-form__helper-text">${t`Hold control/command to select multiple items.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
${until(new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsDefaultSettings({}).then(config => {
|
||||
let fc = config.config;
|
||||
if (this.outpost) {
|
||||
fc = this.outpost.config;
|
||||
}
|
||||
return html`<ak-form-element-horizontal
|
||||
label=${t`Configuration`}
|
||||
name="config">
|
||||
<ak-codemirror mode="yaml" value="${YAML.stringify(fc)}"></ak-codemirror>
|
||||
<p class="pf-c-form__helper-text">${t`Set custom attributes using YAML or JSON.`}</p>
|
||||
</ak-form-element-horizontal>`;
|
||||
}))}
|
||||
<ak-form-element-horizontal
|
||||
label=${t`Configuration`}
|
||||
name="config">
|
||||
<ak-codemirror mode="yaml" value="${until(new OutpostsApi(DEFAULT_CONFIG).outpostsOutpostsDefaultSettings({}).then(config => {
|
||||
let fc = config.config;
|
||||
if (this.outpost) {
|
||||
fc = this.outpost.config;
|
||||
}
|
||||
return YAML.stringify(fc);
|
||||
}))}"></ak-codemirror>
|
||||
<p class="pf-c-form__helper-text">${t`Set custom attributes using YAML or JSON.`}</p>
|
||||
</ak-form-element-horizontal>
|
||||
</form>`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user