You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@streampipes.apache.org by ri...@apache.org on 2020/03/07 09:09:03 UTC
[incubator-streampipes] branch dev updated: STREAMPIPES-58: Add
HTML widget
This is an automated email from the ASF dual-hosted git repository.
riemer pushed a commit to branch dev
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git
The following commit(s) were added to refs/heads/dev by this push:
new bde55bf STREAMPIPES-58: Add HTML widget
bde55bf is described below
commit bde55bf9c4eefd6fb1dc6dec28bd14c0000945d7
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Sat Mar 7 10:08:46 2020 +0100
STREAMPIPES-58: Add HTML widget
---
.../widget/dashboard-widget.component.html | 6 ++
.../components/widgets/html/html-config.ts | 41 ++++++++++++++
.../widgets/html/html-widget.component.css | 32 +++++++++++
.../widgets/html/html-widget.component.html | 25 +++++++++
.../widgets/html/html-widget.component.ts | 65 ++++++++++++++++++++++
ui/src/app/dashboard-v2/dashboard.module.ts | 4 +-
.../app/dashboard-v2/registry/widget-registry.ts | 4 +-
7 files changed, 175 insertions(+), 2 deletions(-)
diff --git a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html
index 31affd6..48ef820 100644
--- a/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html
+++ b/ui/src/app/dashboard-v2/components/widget/dashboard-widget.component.html
@@ -76,6 +76,12 @@
[widgetConfig]="configuredWidget"
[widgetDataConfig]="widgetDataConfig" class="h-100"></raw-widget>
</div>
+ <div *ngIf="widget.widgetType === 'html'" class="h-100 p-0">
+ <html-widget [gridsterItemComponent]="gridsterItemComponent"
+ [gridsterItem]="item" [widget]="widget" [editMode]="editMode"
+ [widgetConfig]="configuredWidget"
+ [widgetDataConfig]="widgetDataConfig" class="h-100"></html-widget>
+ </div>
</div>
</div>
</div>
diff --git a/ui/src/app/dashboard-v2/components/widgets/html/html-config.ts b/ui/src/app/dashboard-v2/components/widgets/html/html-config.ts
new file mode 100644
index 0000000..c89e3b5
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/html/html-config.ts
@@ -0,0 +1,41 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {WidgetConfigBuilder} from "../../../registry/widget-config-builder";
+import {SchemaRequirementsBuilder} from "../../../sdk/schema-requirements-builder";
+import {DashboardWidgetSettings} from "../../../../core-model/dashboard/DashboardWidgetSettings";
+import {WidgetConfig} from "../base/base-config";
+import {EpRequirements} from "../../../sdk/ep-requirements";
+
+export class HtmlConfig extends WidgetConfig {
+
+ static readonly HTML_MAPPING_KEY = "html-field";
+
+ constructor() {
+ super();
+ }
+
+ getConfig(): DashboardWidgetSettings {
+ return WidgetConfigBuilder.createWithSelectableColorsAndTitlePanel("html", "html")
+ .requiredSchema(SchemaRequirementsBuilder
+ .create()
+ .requiredPropertyWithUnaryMapping(HtmlConfig.HTML_MAPPING_KEY, "HTML field", "", EpRequirements.anyProperty())
+ .build())
+ .build();
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.css b/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.css
new file mode 100644
index 0000000..1762d0a
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.css
@@ -0,0 +1,32 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.main-panel {
+ width:100%;
+ height: 100%;
+ display:inline-grid;
+ align-content: center;
+}
+
+.mt-20 {
+ margin: 10px;
+}
+
+.title-panel {
+ font-size:20px;
+ height:30px;
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html b/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html
new file mode 100644
index 0000000..1a65126
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.html
@@ -0,0 +1,25 @@
+<!--
+ ~ Licensed to the Apache Software Foundation (ASF) under one or more
+ ~ contributor license agreements. See the NOTICE file distributed with
+ ~ this work for additional information regarding copyright ownership.
+ ~ The ASF licenses this file to You under the Apache License, Version 2.0
+ ~ (the "License"); you may not use this file except in compliance with
+ ~ the License. You may obtain a copy of the License at
+ ~
+ ~ http://www.apache.org/licenses/LICENSE-2.0
+ ~
+ ~ Unless required by applicable law or agreed to in writing, software
+ ~ distributed under the License is distributed on an "AS IS" BASIS,
+ ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ ~ See the License for the specific language governing permissions and
+ ~ limitations under the License.
+ -->
+
+<div fxFlex="100" fxLayoutAlign="center center" fxLayout="column" class="main-panel" [ngStyle]="{'background-color': selectedBackgroundColor, 'color': selectedPrimaryTextColor}">
+ <div class="title-panel mt-20" *ngIf="hasTitlePanelSettings">
+ {{selectedTitle}}
+ </div>
+ <div [ngStyle]="{'width': width + 'px', 'height': width + 'px'}">
+ <div [innerHTML]="item"></div>
+ </div>
+</div>
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.ts b/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.ts
new file mode 100644
index 0000000..8a1a133
--- /dev/null
+++ b/ui/src/app/dashboard-v2/components/widgets/html/html-widget.component.ts
@@ -0,0 +1,65 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import {Component, OnDestroy, OnInit} from "@angular/core";
+import {RxStompService} from "@stomp/ng2-stompjs";
+import {BaseStreamPipesWidget} from "../base/base-widget";
+import {StaticPropertyExtractor} from "../../../sdk/extractor/static-property-extractor";
+import {ResizeService} from "../../../services/resize.service";
+import {HtmlConfig} from "./html-config";
+
+@Component({
+ selector: 'html-widget',
+ templateUrl: './html-widget.component.html',
+ styleUrls: ['./html-widget.component.css']
+})
+export class HtmlWidgetComponent extends BaseStreamPipesWidget implements OnInit, OnDestroy {
+
+ item: string;
+ width: number;
+ height: number;
+
+ selectedHtmlField: string;
+
+ constructor(rxStompService: RxStompService, resizeService: ResizeService) {
+ super(rxStompService, resizeService, false);
+ }
+
+ ngOnInit(): void {
+ super.ngOnInit();
+ this.width = this.computeCurrentWidth(this.gridsterItemComponent);
+ this.height = this.computeCurrentHeight(this.gridsterItemComponent);
+ }
+
+ ngOnDestroy(): void {
+ super.ngOnDestroy();
+ }
+
+ extractConfig(extractor: StaticPropertyExtractor) {
+ this.selectedHtmlField = extractor.mappingPropertyValue(HtmlConfig.HTML_MAPPING_KEY)
+ }
+
+ protected onEvent(event: any) {
+ this.item = event[this.selectedHtmlField];
+ }
+
+ protected onSizeChanged(width: number, height: number) {
+ this.width = width;
+ this.height = height;
+ }
+
+}
\ No newline at end of file
diff --git a/ui/src/app/dashboard-v2/dashboard.module.ts b/ui/src/app/dashboard-v2/dashboard.module.ts
index f2ff8ad..47a2e66 100644
--- a/ui/src/app/dashboard-v2/dashboard.module.ts
+++ b/ui/src/app/dashboard-v2/dashboard.module.ts
@@ -52,6 +52,7 @@ import {AreaWidgetComponent} from "./components/widgets/area/area-widget.compone
import {MapWidgetComponent} from "./components/widgets/map/map-widget.component";
import {LeafletModule} from "@asymmetrik/ngx-leaflet";
import {RawWidgetComponent} from "./components/widgets/raw/raw-widget.component";
+import {HtmlWidgetComponent} from "./components/widgets/html/html-widget.component";
const dashboardWidgets = [
@@ -92,7 +93,8 @@ const dashboardWidgets = [
GaugeWidgetComponent,
ImageWidgetComponent,
MapWidgetComponent,
- RawWidgetComponent
+ RawWidgetComponent,
+ HtmlWidgetComponent
],
providers: [
DashboardService,
diff --git a/ui/src/app/dashboard-v2/registry/widget-registry.ts b/ui/src/app/dashboard-v2/registry/widget-registry.ts
index 0c8713d..5bf593b 100644
--- a/ui/src/app/dashboard-v2/registry/widget-registry.ts
+++ b/ui/src/app/dashboard-v2/registry/widget-registry.ts
@@ -26,6 +26,7 @@ import {ImageConfig} from "../components/widgets/image/image-config";
import {AreaConfig} from "../components/widgets/area/area-config";
import {MapConfig} from "../components/widgets/map/map-config";
import {RawConfig} from "../components/widgets/raw/raw-config";
+import {HtmlConfig} from "../components/widgets/html/html-config";
export class WidgetRegistry {
@@ -37,7 +38,8 @@ export class WidgetRegistry {
new ImageConfig(),
new AreaConfig(),
new MapConfig(),
- new RawConfig()
+ new RawConfig(),
+ new HtmlConfig()
];
static getAvailableWidgetTemplates(): Array<DashboardWidgetSettings> {