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/06/30 20:23:59 UTC

[incubator-streampipes] 01/02: [STREAMPIPES-145] Add slider to FreeTextStaticPropertyRenderer

This is an automated email from the ASF dual-hosted git repository.

riemer pushed a commit to branch STREAMPIPES-145
in repository https://gitbox.apache.org/repos/asf/incubator-streampipes.git

commit ad82ba7e5057e5cd187bdb7d8c25f63c40b1a102
Author: Dominik Riemer <ri...@fzi.de>
AuthorDate: Mon Jun 29 23:01:14 2020 +0200

    [STREAMPIPES-145] Add slider to FreeTextStaticPropertyRenderer
---
 .../model/client/endpoint/RdfEndpoint.java         |   4 +
 .../apache/streampipes/rest/impl/RdfEndpoint.java  |   1 +
 ui/src/app/connect/connect.module.ts               |   2 +
 .../static-free-input.component.html               |  29 +++--
 ...ponent.css => static-free-input.component.scss} |   6 +
 .../static-free-input.component.ts                 |   3 +-
 .../static-one-of-input.component.html             |   7 --
 .../static-property.component.css                  |  11 ++
 .../static-property.component.html                 | 125 +++++++++++----------
 9 files changed, 112 insertions(+), 76 deletions(-)

diff --git a/streampipes-model-client/src/main/java/org/apache/streampipes/model/client/endpoint/RdfEndpoint.java b/streampipes-model-client/src/main/java/org/apache/streampipes/model/client/endpoint/RdfEndpoint.java
index 3a26357..74c07e1 100644
--- a/streampipes-model-client/src/main/java/org/apache/streampipes/model/client/endpoint/RdfEndpoint.java
+++ b/streampipes-model-client/src/main/java/org/apache/streampipes/model/client/endpoint/RdfEndpoint.java
@@ -27,6 +27,10 @@ public class RdfEndpoint {
 
     private String endpointUrl;
 
+    public RdfEndpoint() {
+
+    }
+
     public RdfEndpoint(String endpointUrl) {
         this.endpointUrl = endpointUrl;
     }
diff --git a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/RdfEndpoint.java b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/RdfEndpoint.java
index a129036..c007477 100644
--- a/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/RdfEndpoint.java
+++ b/streampipes-rest/src/main/java/org/apache/streampipes/rest/impl/RdfEndpoint.java
@@ -58,6 +58,7 @@ public class RdfEndpoint extends AbstractRestInterface implements IRdfEndpoint {
   @DELETE
   @Path("/{rdfEndpointId}")
   @Produces(MediaType.APPLICATION_JSON)
+  @Consumes(MediaType.APPLICATION_JSON)
   @GsonWithIds
   @Override
   public Response removeRdfEndpoint(@PathParam("rdfEndpointId") String rdfEndpointId) {
diff --git a/ui/src/app/connect/connect.module.ts b/ui/src/app/connect/connect.module.ts
index 6e9b9f5..59a6140 100644
--- a/ui/src/app/connect/connect.module.ts
+++ b/ui/src/app/connect/connect.module.ts
@@ -89,6 +89,7 @@ import {StaticColorPickerComponent} from "./static-properties/static-color-picke
 import {ColorPickerModule} from "ngx-color-picker";
 import {PipelineElementRuntimeInfoComponent} from "./new-adapter/component/runtime-info/pipeline-element-runtime-info.component";
 import {xsService} from "../NS/XS.service";
+import {MatSliderModule} from "@angular/material/slider";
 
 
 @NgModule({
@@ -104,6 +105,7 @@ import {xsService} from "../NS/XS.service";
         MatProgressSpinnerModule,
         MatInputModule,
         MatFormFieldModule,
+        MatSliderModule,
         PlatformServicesModule,
         TreeModule.forRoot(),
         ColorPickerModule
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
index 743d970..cfe02f7 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.html
@@ -17,15 +17,26 @@
   -->
 
 <div [formGroup]="parentForm" id="formWrapper" fxFlex="100" fxLayout="column">
-    <div fxFlex fxLayout="row">
-            <mat-form-field fxFlex>
-                <input formControlName="{{staticProperty.internalName}}" fxFlex id="{{ 'input-' + staticProperty.label.toLowerCase() }}" matInput [placeholder]="staticProperty.label"
-                    required (blur)="emitUpdate()">
-                <mat-hint>{{staticProperty.description}}</mat-hint>
+    <div fxFlex fxLayout="row" *ngIf="!staticProperty.valueSpecification">
+        <mat-form-field fxFlex>
+            <input formControlName="{{staticProperty.internalName}}" fxFlex
+                   matInput
+                   [placeholder]="staticProperty.label"
+                   required (blur)="emitUpdate()">
+            <mat-hint>{{staticProperty.description}}</mat-hint>
 
-                <mat-error *ngIf="!fieldValid">
-                    {{errorMessage}}
-                </mat-error>
-            </mat-form-field>
+            <mat-error *ngIf="!fieldValid">
+                {{errorMessage}}
+            </mat-error>
+        </mat-form-field>
+    </div>
+    <div *ngIf="staticProperty.valueSpecification">
+        <div fxLayout="column" fxFlex="100">
+            <mat-slider thumbLabel formControlName="{{staticProperty.internalName}}"
+                    [max]="staticProperty.valueSpecification.maxValue"
+                    [min]="staticProperty.valueSpecification.minValue"
+                    [step]="staticProperty.valueSpecification.step">
+            </mat-slider>
+        </div>
     </div>
 </div>
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.css b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.scss
similarity index 80%
rename from ui/src/app/connect/static-properties/static-free-input/static-free-input.component.css
rename to ui/src/app/connect/static-properties/static-free-input/static-free-input.component.scss
index 565a1d7..f5740bb 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.css
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.scss
@@ -16,6 +16,8 @@
  *
  */
 
+@import '../../../../scss/sp/colors';
+
 #formWrapper {
     height: 60px;
 }
@@ -29,3 +31,7 @@ form {
     float: left;
 }
 
+::ng-deep.mat-accent ::ng-deep.mat-slider-track-fill, .mat-accent ::ng-deep.mat-slider-thumb, .mat-accent ::ng-deep.mat-slider-thumb-label {
+    background-color: $sp-color-accent;
+}
+
diff --git a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
index bdb63f8..46cf440 100644
--- a/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
+++ b/ui/src/app/connect/static-properties/static-free-input/static-free-input.component.ts
@@ -33,7 +33,7 @@ import {AbstractValidatedStaticPropertyRenderer} from "../base/abstract-validate
 @Component({
     selector: 'app-static-free-input',
     templateUrl: './static-free-input.component.html',
-    styleUrls: ['./static-free-input.component.css']
+    styleUrls: ['./static-free-input.component.scss']
 })
 export class StaticFreeInputComponent
     extends AbstractValidatedStaticPropertyRenderer<FreeTextStaticProperty> implements OnInit {
@@ -79,5 +79,6 @@ export class StaticFreeInputComponent
 
     onValueChange(value: any) {
         this.staticProperty.value = value;
+        this.parentForm.updateValueAndValidity();
     }
 }
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.html b/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.html
index baafe4a..336cefb 100644
--- a/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.html
+++ b/ui/src/app/connect/static-properties/static-one-of-input/static-one-of-input.component.html
@@ -20,11 +20,6 @@
 <div id="formWrapper" fxFlex="100" fxLayout="column">
 
     <div *ngIf="!staticProperty.horizontalRendering" fxLayout="column">
-        <div>
-            <p>{{staticProperty.label}}: <br>
-                <mat-hint class="description">{{staticProperty.description}}</mat-hint>
-            </p>
-        </div>
         <div fxFlex fxLayout="row">
             <div fxLayout="column" style="margin-left: 10px">
                 <mat-radio-button *ngFor="let option of staticProperty.options" style="margin-top: -10px"
@@ -39,7 +34,6 @@
 
     <div *ngIf="staticProperty.horizontalRendering">
         <mat-form-field style="width: 100%">
-            <mat-label>{{staticProperty.label}}</mat-label>
             <mat-select [(value)]="selectedOption">
                 <mat-option *ngFor="let option of staticProperty.options" [value]="option.elementId"
                             (click)="select(option.elementId)">
@@ -48,7 +42,6 @@
                     </label>
                 </mat-option>
             </mat-select>
-            <mat-hint>{{staticProperty.description}}</mat-hint>
         </mat-form-field>
     </div>
 
diff --git a/ui/src/app/connect/static-properties/static-property.component.css b/ui/src/app/connect/static-properties/static-property.component.css
index fda138d..14ada49 100644
--- a/ui/src/app/connect/static-properties/static-property.component.css
+++ b/ui/src/app/connect/static-properties/static-property.component.css
@@ -24,4 +24,15 @@
   width: 100%;
   height: 100%;
   margin-right: 10px; */
+}
+
+.static-property-panel {
+  border-left:5px solid gray;
+  padding-left: 10px;
+  margin-bottom: 10px;
+  margin-top: 10px;
+}
+
+.description {
+  font-size: 10px;
 }
\ No newline at end of file
diff --git a/ui/src/app/connect/static-properties/static-property.component.html b/ui/src/app/connect/static-properties/static-property.component.html
index 76e3524..94de7b2 100644
--- a/ui/src/app/connect/static-properties/static-property.component.html
+++ b/ui/src/app/connect/static-properties/static-property.component.html
@@ -17,76 +17,83 @@
   -->
 
 <div fxFlex="100" fxLayout="column">
-    <div fxFlex="100">{{staticProperty.label}}</div>
+    <div fxFlex="100" fxLayout="row" class="static-property-panel">
+        <div fxFlex="40" fxLayout="column">
+            <b>{{staticProperty.label}}</b>
+            <mat-hint class="description">{{staticProperty.description}}</mat-hint>
+        </div>
+        <div fxFlex="60">
+            <app-static-secret-input *ngIf="isSecretStaticProperty(staticProperty)"
+                                     [staticProperty]="staticProperty"
+                                     [parentForm]="parentForm"
+                                     (updateEmitter)="emitUpdate($event)">
+            </app-static-secret-input>
 
-    <app-static-secret-input *ngIf="isSecretStaticProperty(staticProperty)"
-                             [staticProperty]="staticProperty"
-                             [parentForm]="parentForm"
-                             (updateEmitter)="emitUpdate($event)">
-    </app-static-secret-input>
+            <app-static-free-input *ngIf="isFreeTextStaticProperty(staticProperty)"
+                                   [staticProperty]="staticProperty"
+                                   [parentForm]="parentForm"
+                                   (updateEmitter)="emitUpdate($event)">
+            </app-static-free-input>
 
-    <app-static-free-input *ngIf="isFreeTextStaticProperty(staticProperty)"
-                           [staticProperty]="staticProperty"
-                           [parentForm]="parentForm"
-                           (updateEmitter)="emitUpdate($event)">
-    </app-static-free-input>
+            <app-static-file-input *ngIf="isFileStaticProperty(staticProperty)"
+                                   (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty"
+                                   [adapterId]="adapterId">
+            </app-static-file-input>
 
-    <app-static-file-input *ngIf="isFileStaticProperty(staticProperty)"
-                           (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty"
-                           [adapterId]="adapterId">
-    </app-static-file-input>
+            <app-static-color-picker *ngIf="isColorPickerStaticProperty(staticProperty)"
+                                     [staticProperty]="staticProperty"
+                                     [parentForm]="parentForm"
+                                     (updateEmitter)="emitUpdate($event)">
+            </app-static-color-picker>
 
-    <app-static-color-picker *ngIf="isColorPickerStaticProperty(staticProperty)"
-                             [staticProperty]="staticProperty"
-                             [parentForm]="parentForm"
-                             (updateEmitter)="emitUpdate($event)">
-    </app-static-color-picker>
+            <app-static-runtime-resolvable-any-input *ngIf="isRuntimeResolvableAnyStaticProperty(staticProperty)"
+                                                     (inputEmitter)="valueChange($event)"
+                                                     [staticProperty]="staticProperty"></app-static-runtime-resolvable-any-input>
 
-    <app-static-runtime-resolvable-any-input *ngIf="isRuntimeResolvableAnyStaticProperty(staticProperty)"
-                                             (inputEmitter)="valueChange($event)"
-                                             [staticProperty]="staticProperty"></app-static-runtime-resolvable-any-input>
+            <app-static-runtime-resolvable-oneof-input *ngIf="isRuntimeResolvableOneOfStaticProperty(staticProperty)"
+                                                       (inputEmitter)="valueChange($event)"
+                                                       [completedStaticProperty]="completedStaticProperty"
+                                                       [staticProperty]="staticProperty"
+                                                       [staticProperties]="staticProperties"
+                                                       [adapterId]="adapterId"></app-static-runtime-resolvable-oneof-input>
 
-    <app-static-runtime-resolvable-oneof-input *ngIf="isRuntimeResolvableOneOfStaticProperty(staticProperty)"
-                                               (inputEmitter)="valueChange($event)"
-                                               [completedStaticProperty]="completedStaticProperty"
-                                               [staticProperty]="staticProperty" [staticProperties]="staticProperties"
-                                               [adapterId]="adapterId"></app-static-runtime-resolvable-oneof-input>
+            <app-static-any-input
+                    *ngIf="isAnyStaticProperty(staticProperty) && !isRuntimeResolvableAnyStaticProperty(staticProperty)"
+                    (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty"></app-static-any-input>
 
-    <app-static-any-input
-            *ngIf="isAnyStaticProperty(staticProperty) && !isRuntimeResolvableAnyStaticProperty(staticProperty)"
-            (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty"></app-static-any-input>
+            <app-static-one-of-input
+                    *ngIf="isOneOfStaticProperty(staticProperty) && !isRuntimeResolvableOneOfStaticProperty(staticProperty)"
+                    (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
+            </app-static-one-of-input>
 
-    <app-static-one-of-input
-            *ngIf="isOneOfStaticProperty(staticProperty) && !isRuntimeResolvableOneOfStaticProperty(staticProperty)"
-            (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
-    </app-static-one-of-input>
+            <app-static-mapping-unary *ngIf="isMappingPropertyUnary(staticProperty)"
+                                      [eventSchemas]="eventSchemas" (inputEmitter)="valueChange($event)"
+                                      [staticProperty]="staticProperty" [parentForm]="parentForm">
+            </app-static-mapping-unary>
 
-    <app-static-mapping-unary *ngIf="isMappingPropertyUnary(staticProperty)"
-                              [eventSchemas]="eventSchemas" (inputEmitter)="valueChange($event)"
-                              [staticProperty]="staticProperty" [parentForm]="parentForm">
-    </app-static-mapping-unary>
+            <app-static-mapping-nary *ngIf="isMappingNaryProperty(staticProperty)" [eventSchemas]="eventSchemas"
+                                     (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
+            </app-static-mapping-nary>
 
-    <app-static-mapping-nary *ngIf="isMappingNaryProperty(staticProperty)" [eventSchemas]="eventSchemas"
-                             (inputEmitter)="valueChange($event)" [staticProperty]="staticProperty">
-    </app-static-mapping-nary>
+            <app-static-alternatives *ngIf="isAlternativesStaticProperty(staticProperty)"
+                                     [adapterId]="adapterId" [eventSchemas]="eventSchemas"
+                                     [staticProperty]="staticProperty" class="test fullWidth"
+                                     (inputEmitter)="valueChange($event)">
+            </app-static-alternatives>
 
-    <app-static-alternatives *ngIf="isAlternativesStaticProperty(staticProperty)"
-                             [adapterId]="adapterId" [eventSchemas]="eventSchemas"
-                             [staticProperty]="staticProperty" class="test fullWidth"
-                             (inputEmitter)="valueChange($event)">
-    </app-static-alternatives>
+            <app-static-group *ngIf="isGroupStaticProperty(staticProperty)"
+                              [adapterId]="adapterId" [eventSchemas]="eventSchemas"
+                              [staticProperty]="staticProperty" class="test fullWidth"
+                              (inputEmitter)="valueChange($event)">
+            </app-static-group>
 
-    <app-static-group *ngIf="isGroupStaticProperty(staticProperty)"
-                      [adapterId]="adapterId" [eventSchemas]="eventSchemas"
-                      [staticProperty]="staticProperty" class="test fullWidth"
-                      (inputEmitter)="valueChange($event)">
-    </app-static-group>
-
-    <app-static-collection *ngIf="isCollectionStaticProperty(staticProperty)"
-                           [adapterId]="adapterId" [eventSchemas]="eventSchemas"
-                           [staticProperty]="staticProperty" class="test fullWidth"
-                           (inputEmitter)="valueChange($event)" (updateEmitter)="emitUpdate($event)">
-    </app-static-collection>
+            <app-static-collection *ngIf="isCollectionStaticProperty(staticProperty)"
+                                   [adapterId]="adapterId" [eventSchemas]="eventSchemas"
+                                   [staticProperty]="staticProperty" class="test fullWidth"
+                                   (inputEmitter)="valueChange($event)" (updateEmitter)="emitUpdate($event)">
+            </app-static-collection>
+        </div>
+    </div>
+    <mat-divider></mat-divider>
 </div>
-<mat-divider></mat-divider>