feat: Add server-side inner circle values

Add setInnerValues for server side CircleSelect. Add mode circle select demos.
caalador · Dec 27, 2021 · db8904e · db8904e
1 parent a559a19
commit db8904e
Show file tree

Hide file tree

Showing 2 changed files with 69 additions and 3 deletions.
diff --git a/TimeSelector-demo/src/main/java/org/percepta/mgrankvi/TimeSelectorDemo.java b/TimeSelector-demo/src/main/java/org/percepta/mgrankvi/TimeSelectorDemo.java
@@ -17,7 +17,10 @@
 
 import java.time.LocalTime;
 
+import com.vaadin.flow.component.Html;
+import com.vaadin.flow.component.html.Label;
 import com.vaadin.flow.component.html.Span;
+import com.vaadin.flow.component.notification.Notification;
 import com.vaadin.flow.component.orderedlayout.HorizontalLayout;
 import com.vaadin.flow.component.orderedlayout.VerticalLayout;
 import com.vaadin.flow.dom.Style;
@@ -43,8 +46,6 @@ public TimeSelectorDemo() {
         circle.addValueChangeListener(event -> circle_text.setText(
                 "CircleSelect selection: " + circle.getValue()));
 
-        add(timeSelector, new HorizontalLayout(circle, circle_text));
-
         CircleSelect theme = new CircleSelect();
         theme.setSectors(24);
         theme.setVisibleValues(2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24);
@@ -54,6 +55,62 @@ public TimeSelectorDemo() {
         style.set("--circle-selector-dot", "RebeccaPurple");
         style.set("--circle-text", "SpringGreen");
 
-        add(theme);
+        add(new HorizontalLayout(circle, circle_text, theme));
+
+        // Show it in the middle of the screen
+        final VerticalLayout contentLayout = new VerticalLayout();
+        contentLayout.addClassName("demoContentLayout");
+        contentLayout.setSizeFull();
+
+        VerticalLayout content = new VerticalLayout();
+        content.setSizeUndefined();
+        content.setSpacing(true);
+        contentLayout.add(content);
+        content.add(timeSelector);
+
+        HorizontalLayout circles = new HorizontalLayout();
+        circles.setSpacing(true);
+        circles.setId("circles-layout");
+        Label l = new Label("CircleSelect as freestanding component");
+        l.setFor(circles);
+
+        final CircleSelect defaultCircle = new CircleSelect();
+        defaultCircle.addValueChangeListener(e ->
+                Notification.show("Selected from default: " + defaultCircle.getValue())
+        );
+        Label defaultLabel = new Label("Default settings");
+        circles.add(new VerticalLayout(defaultCircle, defaultLabel));
+
+        final CircleSelect minutes = new CircleSelect();
+        minutes.setSectors(60);
+        minutes.setVisibleValues(5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 0);
+        minutes.setValue(17);
+        minutes.addValueChangeListener(e ->
+                Notification.show("Selected from minutes: " + minutes.getValue())
+        );
+        Html minutesLabel = new Html("Sectors: 60<br/>Values: 5,10,15,20,25,30,35,40,45,50,55,0<br/>Note! 0 returns 60");
+        circles.add(new VerticalLayout(minutes, minutesLabel));
+
+        final CircleSelect fullDay = new CircleSelect();
+        fullDay.setSectors(12);
+        fullDay.setVisibleValues(1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12);
+        fullDay.setInnerValues(13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24);
+        fullDay.setValue(18);
+        fullDay.addValueChangeListener(e -> Notification.show("Selected from full day: " + fullDay.getValue()));
+        Html fullDayLabel = new Html("Sectors: 12<br/>Values: 1,2,3,4,5,6,7,8,9,10,11,0<br/>Inner values: 13,14,15,16,17,18,19,20,21,22,23,24" +
+                "<br/>Note! values are returned the same as the labels.");
+        circles.add(new VerticalLayout(fullDay, fullDayLabel));
+
+        final CircleSelect restricted = new CircleSelect();
+        restricted.setVisibleValues(15, 30, 45, 0);
+        restricted.setSectors(4);
+        restricted.addValueChangeListener(e -> Notification.show("Selected from restricted: " + restricted.getValue()));
+
+        Html restrictedLabel = new Html("Sectors: 4<br/>Values: 15,30,45,0");
+        circles.add(new VerticalLayout(restricted, restrictedLabel));
+
+        contentLayout.add(circles);
+        contentLayout.setAlignItems( Alignment.CENTER);
+        add(contentLayout);
     }
 }
diff --git a/TimeSelector/src/main/java/org/percepta/mgrankvi/CircleSelect.java b/TimeSelector/src/main/java/org/percepta/mgrankvi/CircleSelect.java
@@ -48,4 +48,13 @@ public void setVisibleValues(int... values) {
     public void setNumSlices(int slices) {
         getElement().setProperty("numSlices", Integer.toString(slices));
     }
+
+    public void setInnerValues(int... values) {
+        JsonArray array = Json.createArray();
+        for (int i = 0; i < values.length; i++) {
+            array.set(i, Integer.toString(values[i]));
+        }
+        getElement().setPropertyJson("innerValues", array);
+        getElement().setPropertyJson("numbers", Json.createArray());
+    }
 }