Configure the World Clock to add and remove locations

Signed-off-by: Carl Dea <cdea@azul.com>

src/main/java/com/carlfx/worldclock/App.java

@@ -25,10 +25,9 @@ import javafx.stage.StageStyle;
 import javafx.util.Duration;
 
 import java.io.IOException;
-import java.util.ArrayList;
-import java.util.Arrays;
-import java.util.Date;
-import java.util.List;
+import java.util.*;
+
+import static com.carlfx.worldclock.WorldClockEvent.*;
 
 /**
  * JavaFX World Clock
@@ -50,7 +49,7 @@ public class App extends Application {
     };
 
     public static String configFile = "worldclock-config.properties";
-
+    public static VBox clockList;
     @Override
     public void init() throws Exception {
         super.init();
@@ -83,10 +82,10 @@ public class App extends Application {
 
         // fake data
         locations.addAll(
-                new USLocation("GMT-5", "Pasadena, MD", "US", 32.0f, Location.TEMP_STD.FAHRENHEIT),
-                new USLocation("GMT-8", "Sunnyvale, CA", "US", 60.0f, Location.TEMP_STD.FAHRENHEIT),
-                new Location("GMT+1", "Amsterdam", "NL", 4.0f, Location.TEMP_STD.CELSIUS),
-                new Location("GMT+1", "Münster", "DE",5.0f, Location.TEMP_STD.CELSIUS)
+                new USLocation("GMT-5", "Pasadena", "MD", 32.0f, Location.TEMP_STD.FAHRENHEIT) ,
+                //new USLocation("GMT-8", "Sunnyvale", "CA", 60.0f, Location.TEMP_STD.FAHRENHEIT),
+                new Location("GMT+1", "Amsterdam", "NL", 4.0f, Location.TEMP_STD.CELSIUS) //,
+//                new Location("GMT+1", "Münster", "DE",5.0f, Location.TEMP_STD.CELSIUS)
         );
 
         SimpleLongProperty epochTime = new SimpleLongProperty(new Date().getTime());
@@ -108,7 +107,7 @@ public class App extends Application {
         windowContainer.addEventHandler(WorldClockEvent.MAIN_APP_CLOSE, event -> stage.close());
 
         windowContainer.getStyleClass().add("window-container");
-        VBox clockList = new VBox();
+        clockList = new VBox();
         Parent windowBar = loadWindowControlsFXML(locations);
         BorderPane.setAlignment(windowBar, Pos.CENTER_RIGHT);
         windowContainer.setTop(windowBar);
@@ -127,7 +126,8 @@ public class App extends Application {
         clockList.getChildren()
                 .addAll(clocks);
 
-        windowContainer.addEventHandler(WorldClockEvent.CONFIG_SHOWING, event -> {
+        // Animate toggle between Config view vs World Clock List view
+        windowContainer.addEventHandler(CONFIG_SHOWING, event -> {
             TranslateTransition moveList = new TranslateTransition();
             moveList.setNode(clockList);
             moveList.setDuration(Duration.millis(400));
@@ -167,6 +167,51 @@ public class App extends Application {
             moveList.playFromStart();
         });
 
+        // Subscribe to a new Location Added event
+        windowContainer.addEventHandler(LOCATION_ADD, event -> {
+            Location location = event.getPayload();
+            System.out.println("addding location please");
+            Iterator<Node> itr = clockList.getChildren().iterator();
+            int idx = -1;
+            boolean found = false;
+            while (itr.hasNext()) {
+                Location loc = (Location) itr.next().getUserData();
+                idx+=1;
+                if (loc.equals(location)) {
+                    found = true;
+                    break;
+                }
+            }
+
+
+            try {
+                if (found && clockList.getChildren().size()-1 > 0) {
+                    // replace with new location
+                    clockList.getChildren().set(idx, loadClockFXML(location, epochTime));
+                } else {
+                    clockList.getChildren().add(loadClockFXML(location, epochTime));
+                }
+            } catch (IOException e) {
+                e.printStackTrace();
+            }
+        });
+
+        // Subscribe to a removed Location event
+        windowContainer.addEventFilter(LOCATION_REMOVE, event -> {
+            Location location = event.getPayload();
+            System.out.println("window container location_remove heard!");
+
+            Iterator<Node> itr = clockList.getChildren().iterator();
+            while (itr.hasNext()) {
+                Location loc = (Location) itr.next().getUserData();
+                if (loc.equals(location)) {
+                    itr.remove();
+                }
+            }
+
+            //WorldClockEvent.trigger(clockList, event);
+            System.out.println("broadcast out to children");
+        });
         windowContainer.setBottom(mapImage);
         scene = new Scene(windowContainer);
         scene.getStylesheets()
@@ -213,6 +258,7 @@ public class App extends Application {
     private static Parent loadClockFXML(Location location, LongProperty epochTime) throws IOException {
         FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource("clock-widget.fxml"));
         Parent parent = fxmlLoader.load();
+        parent.setUserData(location);
         WorldClockController controller = fxmlLoader.getController();
         controller.init(location, epochTime);
         return parent;
@@ -228,7 +274,7 @@ public class App extends Application {
         FXMLLoader fxmlLoader = new FXMLLoader(App.class.getResource("config-locations.fxml"));
         Parent parent = fxmlLoader.load();
         ConfigLocationsController controller = fxmlLoader.getController();
-        controller.init(locations);
+        controller.init();
         return parent;
     }
 

src/main/java/com/carlfx/worldclock/ConfigLocationsController.java

@@ -1,10 +1,14 @@
 package com.carlfx.worldclock;
 
+import javafx.collections.FXCollections;
+import javafx.collections.ListChangeListener;
 import javafx.collections.ObservableList;
+import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
-import javafx.scene.control.Button;
-import javafx.scene.control.ComboBox;
-import javafx.scene.control.TextField;
+import javafx.scene.control.*;
+import javafx.scene.input.MouseEvent;
+
+import java.util.Iterator;
 
 public class ConfigLocationsController {
     @FXML
@@ -13,6 +17,12 @@ public class ConfigLocationsController {
     @FXML
     public TextField gmtOffset;
 
+    @FXML
+    public TextField city;
+
+    @FXML
+    public TextField countryCode;
+
     @FXML
     public Button gmtErrorOverlayIcon;
 
@@ -28,16 +38,215 @@ public class ConfigLocationsController {
     @FXML
     public Button longitudeErrorOverlayIcon;
 
+    @FXML
+    private Button saveLocationButton;
+
+    @FXML
+    private ListView<Location> locationsListView;
+
     private ObservableList<Location> locations;
 
-    public void init (ObservableList<Location> locations) {
-        this.locations = locations;
+    // Subscribers of Location add and remove will respond.
+    private ListChangeListener<Location> listChangeListener = new ListChangeListener<>() {
+        @Override
+        public void onChanged(Change<? extends Location> c) {
+            while (c.next()) {
+                if (c.wasPermutated()) {
+                    for (int i = c.getFrom(); i < c.getTo(); ++i) {
+                        //permutate
+                        System.out.println("todo permutate items");
+                    }
+                } else if (c.wasUpdated()) {
+                    //update item
+                    System.out.println("todo update item");
+                } else {
+                    for (Location rmItem : c.getRemoved()) {
+                        removeListViewItem(rmItem);
+                        WorldClockEvent.trigger(gmtOffset, WorldClockEvent.LOCATION_REMOVE, rmItem);
+                    }
+                    for (Location addItem : c.getAddedSubList()) {
+                        updateListViewItem(addItem);
+                        WorldClockEvent.trigger(longitude, WorldClockEvent.LOCATION_ADD, addItem);
+                    }
+                }
+            }
+        }
+    };
+
+    private Object targetButton;
+
+    @FXML
+    private void handleEnterIngnoreAction(MouseEvent mouseEvent) {
+        targetButton = mouseEvent.getTarget();
+    }
+    @FXML
+    private void handleExitIngnoreAction(MouseEvent mouseEvent) {
+        targetButton = null;
+    }
+
+    @FXML
+    private void handleSaveLocationAction(ActionEvent actionEvent) {
+        Location location = null;
+        String stateSelected = usStates.getSelectionModel().getSelectedItem();
+        if (stateSelected != null && !"".equals(stateSelected)) {
+            location = new USLocation(gmtOffset.getText(), city.getText(), stateSelected);
+        } else {
+            location = new Location(gmtOffset.getText(), city.getText(), countryCode.getText());
+        }
+
+        // Add Latitude and longitude
+        if (!latitude.getText().isBlank() && !longitude.getText().isBlank()) {
+            location.setLatLong(latitude.getText(), longitude.getText());
+        }
+        locations.add(location);
+    }
+
+    @FXML
+    private void handleDeleteLocationAction(ActionEvent actionEvent) {
+        Location location = locationsListView.getSelectionModel().getSelectedItem();
+        if (location != null) {
+            locations.remove(location);
+        }
+    }
+    @FXML
+    private void handleMoveUpLocationAction(ActionEvent actionEvent) {
+        int index = locationsListView.getSelectionModel().getSelectedIndex();
+        if (index > 0) {
+            index = index - 1;
+            Location prevLocation = locationsListView.getItems().get(index);
+            Location location = locationsListView.getSelectionModel().getSelectedItem();
+            locationsListView.getItems().set(index, location);
+            locationsListView.getItems().set(index + 1, prevLocation);
+            locationsListView.getSelectionModel().select(index);
+        }
+    }
+    @FXML
+    private void handleMoveDownLocationAction(ActionEvent actionEvent) {
+        int index = locationsListView.getSelectionModel().getSelectedIndex();
+        if (index > -1 && index < locationsListView.getItems().size() -1) {
+            index = index + 1;
+            Location nextLocation = locationsListView.getItems().get(index);
+            Location location = locationsListView.getSelectionModel().getSelectedItem();
+            locationsListView.getItems().set(index, location);
+            locationsListView.getItems().set(index - 1, nextLocation);
+            locationsListView.getSelectionModel().select(index);
+        }
+    }
+
+    private void removeListViewItem(Location location) {
+        Iterator<Location> itr = locationsListView.getItems().iterator();
+        while (itr.hasNext()) {
+            Location loc = itr.next();
+            if (loc.equals(location)) {
+                itr.remove();
+            }
+        }
+
+    }
+    private void updateListViewItem(Location updateOrAddlocation) {
+        Iterator<Location> itr = locationsListView.getItems().iterator();
+        int idx = -1;
+        boolean found = false;
+        while (itr.hasNext()) {
+            Location loc = itr.next();
+            idx+=1;
+            if (loc.equals(updateOrAddlocation)) {
+                found = true;
+                break;
+            }
+        }
+        if (found && locationsListView.getItems().size()-1 > 0) {
+            // replace with new location
+            locationsListView.getItems().set(idx, updateOrAddlocation);
+        } else {
+            locationsListView.getItems().add(updateOrAddlocation);
+        }
+
+
+    }
+
+    private void clearForm() {
+        usStates.getSelectionModel().select("");
+        city.setText("");
+        countryCode.setText("");
+        gmtOffset.setText("");
+        latitude.setText("");
+        longitude.setText("");
+    }
+    private void populateForm(Location location) {
+        if (location instanceof USLocation) {
+            usStates.getSelectionModel().select(((USLocation)location).getState());
+        }
+
+        city.setText(location.getCity());
+        countryCode.setText(location.getCountryCode());
+        gmtOffset.setText(location.getTimezone());
+        if (location.getLatLong() != null
+                && location.getLatLong().length == 2) {
+            latitude.setText(String.valueOf(location.getLatitude()));
+            longitude.setText(String.valueOf(location.getLongitude()));
+        }
+    }
+
+    @FXML
+    private void handleAddLocationAction(ActionEvent actionEvent) {
+        clearForm();
+        locationsListView.getSelectionModel().clearSelection();
+        city.requestFocus();
+    }
+
+    @FXML
+    private void handleEditLocationAction(ActionEvent actionEvent) {
+        clearForm();
+        Location location = locationsListView.getSelectionModel().getSelectedItem();
+        if (location != null) {
+            populateForm(location);
+        }
+    }
+
+    public void init () {
+        locations = FXCollections.observableArrayList();
+        locations.addListener(listChangeListener);
+
+        // Populate US states combo
         populateStates();
 
+        // Set ListCell Factory
+        locationsListView.setCellFactory(param -> {
+            final Label label = new Label();
+            final Tooltip tooltip = new Tooltip();
+            return new ListCell<>(){
+              @Override
+              public void updateItem(Location location, boolean empty) {
+                  super.updateItem(location, empty);
+                  if (location != null) {
+                      String row = location.getTimezone() + " " + location.getFullLocationName();
+                      label.setText(row);
+                      setText(row);
+                      if (location.getLatLong() != null) {
+                          tooltip.setText("%s \n GMT %s \nlat/lon (%.5f, %.5f)\n".formatted(location.getFullLocationName(), location.getTimezone(), location.getLatitude(), location.getLongitude()));
+                      } else {
+                          tooltip.setText("%s \n GMT %s \n".formatted(location.getFullLocationName(), location.getTimezone()));
+                      }
+                      setTooltip(tooltip);
+                  } else {
+                      setText("");
+                  }
+              }
+            };
+        });
+
         addValidationRangeCheckInt(-12, 12, gmtOffset, gmtErrorOverlayIcon);
         addValidationRangeCheckDouble(-90, 90, latitude, latitudeErrorOverlayIcon);
         addValidationRangeCheckDouble(-180, 180, longitude, longitudeErrorOverlayIcon);
 
+        // edit mode when selecting location ListView
+        locationsListView.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> {
+            clearForm();
+            if (newValue != null) {
+                populateForm(newValue);
+            }
+        });
     }
 
     private void addValidationRangeCheckDouble(double min, double max, TextField field, Button errorOverlayIcon) {
@@ -80,7 +289,7 @@ public class ConfigLocationsController {
             System.out.println("shouldn't be null!");
         }
         usStates.getItems().addAll(
-"AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM",
+"", "AL", "AK", "AZ", "AR", "CA", "CO", "CT", "DE", "DC", "FM",
           "FL", "GA", "GU", "HI", "ID", "IL", "IN", "IA", "KS", "KY",
           "LA", "ME", "MH", "MD", "MA", "MI", "MN", "MS", "MO", "MT",
           "NE", "NV", "NH", "NJ", "NM", "NY", "NC", "ND", "MP", "OH",

src/main/java/com/carlfx/worldclock/Location.java

@@ -8,7 +8,7 @@ public class Location {
     private String city;
     private String country;
     private String countryCode;
-    private double[] latLong = new double[2];
+    private double[] latLong = null;
     private Image weatherImage;
     private float temperature;
     private TEMP_STD tempType;
@@ -66,6 +66,18 @@ public class Location {
         this.tempType = tempType;
     }
 
+    @Override
+    public boolean equals(Object other) {
+        if (other == null) {
+            return false;
+        }
+        return getFullLocationName().equals( ((Location) other).getFullLocationName());
+    }
+
+    public String getFullLocationName() {
+        return getCity() + ", " + getCountryCode();
+    }
+
     public String getClockTime() {
         return clockTime;
     }
@@ -116,6 +128,12 @@ public class Location {
         }
         this.latLong = latLong;
     }
+    public void setLatLong(String lat, String lon) {
+        double[] latLong = new double[2];
+        latLong[0]= Double.parseDouble(lat);
+        latLong[1]= Double.parseDouble(lon);
+        this.latLong = latLong;
+    }
 
     public double getLatitude() {
         return this.latLong[0];

src/main/java/com/carlfx/worldclock/USLocation.java

@@ -1,13 +1,20 @@
 package com.carlfx.worldclock;
 
 public class USLocation extends Location {
-    private String state;
+    private String state = "";
     private String zip;
 
-    public USLocation(String timezone, String city, String countryCode, float temp, TEMP_STD tempType) {
-        super(timezone, city, countryCode, temp, tempType);
+    public USLocation(String timezone, String city, String stateCode) {
+        this(timezone, city, stateCode, 0, TEMP_STD.CELSIUS);
+    }
+    public USLocation(String timezone, String city, String stateCode, float temp, TEMP_STD tempType) {
+        super(timezone, city, null, temp, tempType);
+        setState(stateCode);
+    }
+    @Override
+    public String getFullLocationName() {
+        return getCity() + ", " + getState() + " " + getCountryCode();
     }
-
     @Override
     public String getCountry() {
         return "USA";

src/main/java/com/carlfx/worldclock/WorldClockController.java

@@ -98,10 +98,21 @@ public class WorldClockController {
     public void init(Location location, LongProperty epochTime) {
 
         epochTime.addListener( (obs, ov, nv) -> {
-            Calendar newCalendar = Calendar.getInstance(TimeZone.getTimeZone(location.getTimezone()));
+            String gmtOffset = location.getTimezone();
+            if (gmtOffset.indexOf("GMT") > -1) {
+                gmtOffset = gmtOffset.substring(3);
+            }
+            gmtOffset = "GMT%+d".formatted(Integer.parseInt(gmtOffset));
+            Calendar newCalendar = Calendar.getInstance(TimeZone.getTimeZone(gmtOffset));
+
             newCalendar.setTime(new Date(nv.longValue()));
             SimpleDateFormat timeDisplay = new SimpleDateFormat("h:mm");
-            timeDisplay.setTimeZone(TimeZone.getTimeZone(location.getTimezone()));
+
+            timeDisplay.setTimeZone(TimeZone.getTimeZone(gmtOffset));
+//            System.out.println(gmtOffset + " " +
+//                    location.getFullLocationName() + " " +
+//                    newCalendar.getTimeZone() +
+//                    " time " + timeDisplay.format(newCalendar.getTime()));
 
             int hour = newCalendar.get(Calendar.HOUR) > 12 ? newCalendar.get(Calendar.HOUR)-12 : newCalendar.get(Calendar.HOUR); // 0-23
             hour = hour == 0 ? 12 : hour;

src/main/java/com/carlfx/worldclock/WorldClockEvent.java

@@ -11,6 +11,9 @@ public class WorldClockEvent extends Event {
     public static final EventType<WorldClockEvent> CONFIG_HIDING  = new EventType("CONFIG_HIDING");
     public static final EventType<WorldClockEvent> CONFIG_HIDDEN  = new EventType("CONFIG_HIDDEN");
     public static final EventType<WorldClockEvent> MAIN_APP_CLOSE  = new EventType("MAIN_APP_CLOSE");
+    public static final EventType<WorldClockEvent> LOCATION_ADD  = new EventType("LOCATION_ADD");
+    public static final EventType<WorldClockEvent> LOCATION_REMOVE  = new EventType("LOCATION_REMOVE");
+
     public Object payload;
 
     public <T> WorldClockEvent(EventType<? extends Event> eventType, T payload) {
@@ -23,6 +26,11 @@ public class WorldClockEvent extends Event {
     public <T> T getPayload() {
         return (T) payload;
     }
+
+    public static <T> void trigger(Node node, EventType<WorldClockEvent> eventType, T payload) {
+        node.getScene().getRoot().fireEvent(new WorldClockEvent(eventType, payload));
+    }
+
     public static void trigger(Node node, WorldClockEvent worldClockEvent) {
         node.getScene().getRoot().fireEvent(worldClockEvent);
     }

src/main/resources/com/carlfx/worldclock/config-locations.css

@@ -0,0 +1,286 @@
+.label-text {
+   -fx-font-family: "Roboto Medium";
+   -fx-font-weight: 100;
+   -fx-font-size: 12;
+   -fx-font-style: normal;
+   -fx-fill: "#2fdae0ce";
+   -fx-stroke: "#2fdae0ce";
+   -fx-stroke-width: 0;
+}
+
+.header-label-text {
+   -fx-font-family: "Roboto Medium";
+   -fx-font-weight: 100;
+   -fx-font-size: 14;
+   -fx-font-style: bold;
+   -fx-fill: "#ffffffee";
+   -fx-stroke: "#2fdae0ce";
+   -fx-stroke-width: 0;
+}
+
+.error-overlay {
+    -fx-shape: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z";
+    -fx-background-color: "#de752fce";
+
+    /*-fx-background-color: "#2fdae090";*/
+    -fx-fill: "#000000";
+    -fx-stroke: "#de752fce"; /* #2fdae0ff */
+    -fx-stroke-width: 1.5;
+    -fx-min-height: 12;
+    -fx-min-width: 12;
+    -fx-max-height: 12;
+    -fx-max-width: 12;
+}
+.error-overlay:hover {
+    -fx-background-color: "#de752f";
+}
+
+
+.config-text-fields {
+    -fx-font-family: "Roboto Regular";
+    -fx-background-color: "#40404050";
+    -fx-font-size: 12;
+    -fx-text-fill: white;
+}
+
+// Background color of List View
+.list-view {
+    -fx-font-family: "Roboto Regular";
+    -fx-background-color: "#40404050";
+    -fx-font-size: 12;
+    -fx-text-fill: white;
+}
+
+// Background of the text field item in display
+.list-view .list-cell .cell.indexed-cell.list-cell {
+    -fx-background-color: "#40404050";
+    -fx-text-fill: #2fdae0ce;
+}
+/*
+.list-view .list-cell:filled:selected:focused, .list-cell:filled:selected {
+    -fx-background-color: linear-gradient(#2fdae0ce 0%, #2fdae0dd 25%, #2fdae0ee 75%, #2fdae0ff 100%);
+    -fx-text-fill: white;
+}
+*/
+
+.list-view .list-cell:even { /* <=== changed to even */
+    -fx-background-color: "#40404050";
+}
+
+.list-view .list-cell:filled:hover {
+    -fx-background-color: "#101010ee";
+    -fx-text-fill: white;
+}
+
+// Background color of combo box
+.combo-box {
+    -fx-font-family: "Roboto Regular";
+    -fx-background-color: "#40404050";
+    -fx-font-size: 12;
+    -fx-text-fill: white;
+}
+
+// Background of the text field item in display
+.combo-box .list-cell, .combo-box .text-input {
+    -fx-text-fill: white;
+}
+
+// background of the list view area of popup
+.combo-box .combo-box-popup .list-view {
+    -fx-background-color: "#00000050";
+    -fx-border-color: "#2fdae0ce";
+    -fx-background-insets: 0 0 0 0;
+    -fx-border-style: solid;
+    -fx-border-width: 1;
+}
+
+// normal list item
+.combo-box .combo-box-popup .list-view .virtual-flow .clipped-container .sheet .cell.indexed-cell.list-cell,
+.list-view .virtual-flow .clipped-container .sheet .cell.indexed-cell.list-cell {
+    -fx-font-family: "Roboto Regular";
+    -fx-background-color: "#101010ee";
+    -fx-font-size: 12;
+    -fx-text-fill: white;
+}
+
+// selected list item
+.combo-box .combo-box-popup .list-view .virtual-flow .clipped-container .sheet .cell.indexed-cell.list-cell:selected,
+.list-view .virtual-flow .clipped-container .sheet .cell.indexed-cell.list-cell:selected {
+    -fx-background-color: "#2fdae0ce";
+    -fx-text-fill: white;
+}
+
+// hover over list item
+.combo-box .combo-box-popup .list-view .virtual-flow .clipped-container .sheet .cell.indexed-cell.list-cell:hover,
+.list-view .virtual-flow .clipped-container .sheet .cell.indexed-cell.list-cell:hover {
+    /*-fx-background-color: "#2fdae0bb";*/
+    -fx-text-fill: "#2fdae0ff";
+
+    -fx-background-color: "#00000050";
+    -fx-border-color: "#2fdae0ff";
+    -fx-background-insets: 0 0 0 0;
+    -fx-border-style: solid;
+    -fx-border-width: 1;
+}
+
+// track display
+.combo-box-popup .list-view .scroll-bar:vertical .track,
+.list-view .scroll-bar:vertical .track {
+    -fx-max-width: 10px;
+    -fx-background-color: "#2fdae0ce", black;
+    -fx-background-insets: 0 0 0 0, 1 1 1 1;
+    -fx-color: "#2fdae0ce";
+    -fx-border-color: transparent;
+   // -fx-border-width: 1px;
+}
+
+// normal thumb display
+.combo-box-popup .list-view .scroll-bar:vertical .thumb,
+.list-view .scroll-bar:vertical .thumb {
+    -fx-max-width: 8px;
+    -fx-background-color: "#2fdae0ce";
+    -fx-background-insets: 0 0 0 0;
+}
+.combo-box-popup .list-view .scroll-bar:vertical .thumb:hover,
+.list-view .scroll-bar:vertical .thumb:hover {
+    -fx-background-color: "#2fdae0";
+}
+
+
+// normal increment and decrement buttons
+.combo-box-popup .list-view .scroll-bar:vertical .increment-button,
+.list-view .scroll-bar:vertical .increment-button,
+.combo-box-popup .list-view .scroll-bar:vertical .decrement-button,
+.list-view .scroll-bar:vertical .decrement-button {
+        -fx-background-color: "#2fdae0ce", black;
+    	-fx-color: "#2fdae0ce";
+    	-fx-background-insets: 0 0 0 0, 1 1 1 1;
+}
+
+// normal increment and decrement arrow
+.combo-box-popup .list-view .scroll-bar:vertical .increment-button .increment-arrow,
+.list-view .scroll-bar:vertical .increment-button .increment-arrow,
+.combo-box-popup .list-view .scroll-bar:vertical .decrement-button .decrement-arrow,
+.list-view .scroll-bar:vertical .decrement-button .decrement-arrow {
+        -fx-background-color: "#2fdae0ce" ;
+        -fx-background-insets: 0 0 0 0;
+        -fx-color: "#2fdae0ce";
+}
+// normal increment and decrement arrow
+.combo-box-popup .list-view .scroll-bar:vertical .increment-button .increment-arrow:hover,
+.list-view .scroll-bar:vertical .increment-button .increment-arrow:hover,
+.combo-box-popup .list-view .scroll-bar:vertical .decrement-button .decrement-arrow:hover,
+.list-view .scroll-bar:vertical .decrement-button .decrement-arrow:hover {
+        -fx-background-color:  "#2fdae0";
+        -fx-color: "#2fdae0";
+}
+.save-location-button {
+   -fx-font-family: "Roboto Medium";
+   -fx-font-weight: 100;
+   -fx-font-size: 12;
+   -fx-font-style: normal;
+   -fx-text-fill: "#2fdae0ce";
+
+   -fx-background-color: "#2fdae0ce", black;
+   -fx-background-insets: 0 0 0 0, 1 1 1 1;
+   /*-fx-color: "#2fdae0ce";*/ /* text color*/
+   -fx-border-color: "#2fdae0ce";
+   -fx-border-width: 1px;
+}
+.save-location-button:hover {
+   -fx-text-fill: "#ffffffff";
+
+   -fx-background-color: "#2fdae0", black, "#2fdae0";
+   -fx-background-insets: 0 0 0 0, 1 1 1 1, 3 3 3 3;
+   -fx-border-color: "#2fdae0ce";
+   -fx-border-width: 1px;
+}
+.save-location-button:armed {
+   -fx-text-fill: "#202020";
+
+   -fx-background-color: "#2fdae0", black, "#2fdae0";
+   -fx-background-insets: 0 0 0 0, 1 1 1 1, 4 2 2 4;
+   /*-fx-color: "#2fdae0ce";*/ /* text color*/
+   -fx-border-color: "#2fdae0ce";
+   -fx-border-width: 1px;
+}
+
+.add-location-button {
+    -fx-shape: "M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z";
+    -fx-background-color: "#2fdae0dd";
+
+    -fx-fill: "#000000";
+    -fx-stroke: "#2fdae0ff";
+    -fx-stroke-width: 1.5;
+    -fx-min-height: 20;
+    -fx-min-width: 20;
+    -fx-max-height: 20;
+    -fx-max-width: 20;
+}
+.add-location-button:hover {
+    -fx-background-color: "#2fdae0";
+}
+
+.edit-location-button {
+    -fx-shape: "M402.3 344.9l32-32c5-5 13.7-1.5 13.7 5.7V464c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V112c0-26.5 21.5-48 48-48h273.5c7.1 0 10.7 8.6 5.7 13.7l-32 32c-1.5 1.5-3.5 2.3-5.7 2.3H48v352h352V350.5c0-2.1.8-4.1 2.3-5.6zm156.6-201.8L296.3 405.7l-90.4 10c-26.2 2.9-48.5-19.2-45.6-45.6l10-90.4L432.9 17.1c22.9-22.9 59.9-22.9 82.7 0l43.2 43.2c22.9 22.9 22.9 60 .1 82.8zM460.1 174L402 115.9 216.2 301.8l-7.3 65.3 65.3-7.3L460.1 174zm64.8-79.7l-43.2-43.2c-4.1-4.1-10.8-4.1-14.8 0L436 82l58.1 58.1 30.9-30.9c4-4.2 4-10.8-.1-14.9z";
+    -fx-background-color: "#2fdae0dd";
+    -fx-fill: "#000000";
+    -fx-stroke: "#2fdae0ff";
+    -fx-stroke-width: 1.5;
+    -fx-min-height: 20;
+    -fx-min-width: 20;
+    -fx-max-height: 20;
+    -fx-max-width: 20;
+}
+
+.edit-location-button:hover {
+    -fx-background-color: "#2fdae0";
+}
+
+.delete-location-button {
+    -fx-shape: "M108 284c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h232c6.6 0 12 5.4 12 12v32c0 6.6-5.4 12-12 12H108zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z";
+    -fx-background-color: "#2fdae0dd";
+    -fx-fill: "#000000";
+    -fx-stroke: "#2fdae0ff";
+    -fx-stroke-width: 1.5;
+    -fx-min-height: 20;
+    -fx-min-width: 20;
+    -fx-max-height: 20;
+    -fx-max-width: 20;
+}
+
+.delete-location-button:hover {
+    -fx-background-color: "#2fdae0";
+}
+
+.move-up-button {
+    -fx-shape: "M322.9 304H125.1c-10.7 0-16.1-13-8.5-20.5l98.9-98.3c4.7-4.7 12.2-4.7 16.9 0l98.9 98.3c7.7 7.5 2.3 20.5-8.4 20.5zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z";
+    -fx-background-color: "#2fdae0dd";
+
+    -fx-fill: "#000000";
+    -fx-stroke: "#2fdae0ff";
+    -fx-stroke-width: 1.5;
+    -fx-min-height: 20;
+    -fx-min-width: 20;
+    -fx-max-height: 20;
+    -fx-max-width: 20;
+}
+.move-up-button:hover {
+    -fx-background-color: "#2fdae0";
+}
+
+.move-down-button {
+    -fx-shape: "M125.1 208h197.8c10.7 0 16.1 13 8.5 20.5l-98.9 98.3c-4.7 4.7-12.2 4.7-16.9 0l-98.9-98.3c-7.7-7.5-2.3-20.5 8.4-20.5zM448 80v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z";
+    -fx-background-color: "#2fdae0dd";
+
+    -fx-fill: "#000000";
+    -fx-stroke: "#2fdae0ff";
+    -fx-stroke-width: 1.5;
+    -fx-min-height: 20;
+    -fx-min-width: 20;
+    -fx-max-height: 20;
+    -fx-max-width: 20;
+}
+.move-down-button:hover {
+    -fx-background-color: "#2fdae0";
+}

src/main/resources/com/carlfx/worldclock/config-locations.fxml

@@ -1,9 +1,11 @@
 <?xml version="1.0" encoding="UTF-8"?>
 
 <?import java.lang.String?>
+<?import java.net.URL?>
 <?import javafx.geometry.Insets?>
 <?import javafx.scene.control.Button?>
 <?import javafx.scene.control.ComboBox?>
+<?import javafx.scene.control.ListView?>
 <?import javafx.scene.control.TextField?>
 <?import javafx.scene.control.Tooltip?>
 <?import javafx.scene.layout.AnchorPane?>
@@ -12,9 +14,9 @@
 <?import javafx.scene.text.Font?>
 <?import javafx.scene.text.Text?>
 
-<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="309.0" prefWidth="314.0" styleClass="clock-background" stylesheets="@styles.css" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.carlfx.worldclock.ConfigLocationsController">
+<AnchorPane maxHeight="-Infinity" maxWidth="-Infinity" prefHeight="412.0" prefWidth="314.0" styleClass="clock-background" xmlns="http://javafx.com/javafx/15.0.1" xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.carlfx.worldclock.ConfigLocationsController">
    <children>
-      <Text fill="WHITE" layoutX="14.0" layoutY="27.0" strokeType="OUTSIDE" strokeWidth="0.0" text="Locations Configurations" wrappingWidth="177.21630859375">
+      <Text fill="WHITE" layoutX="14.0" layoutY="27.0" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="header-label-text" text="Locations Configurations" wrappingWidth="177.21630859375">
          <font>
             <Font name="Roboto Medium" size="13.0" />
          </font>
@@ -23,12 +25,12 @@
          <children>
             <HBox alignment="BOTTOM_LEFT">
                <children>
-                  <Text fill="#ffffff82" strokeType="OUTSIDE" strokeWidth="0.0" text="City" wrappingWidth="214.6875">
+                  <Text strokeType="OUTSIDE" strokeWidth="0.0" styleClass="label-text" text="City" wrappingWidth="214.6875">
                      <font>
                         <Font name="Roboto" size="12.0" />
                      </font>
                   </Text>
-                  <Text fill="#ffffff95" strokeType="OUTSIDE" strokeWidth="0.0" text="State" wrappingWidth="61.21630859375">
+                  <Text fill="#ffffff95" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="label-text" text="State" wrappingWidth="61.21630859375">
                      <font>
                         <Font name="Roboto Light" size="13.0" />
                      </font>
@@ -50,7 +52,7 @@
             </HBox>
             <HBox alignment="BOTTOM_LEFT" prefHeight="8.0" prefWidth="288.0">
                <children>
-                  <Text fill="#ffffff82" strokeType="OUTSIDE" strokeWidth="0.0" text="Country Code" wrappingWidth="107.6875">
+                  <Text fill="#ffffff82" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="label-text" text="Country Code" wrappingWidth="107.6875">
                      <font>
                         <Font name="Roboto" size="12.0" />
                      </font>
@@ -58,7 +60,7 @@
                         <Insets top="5.0" />
                      </HBox.margin>
                   </Text>
-                  <Text fill="#ffffff82" strokeType="OUTSIDE" strokeWidth="0.0" text="GMT Offset" wrappingWidth="98.6875">
+                  <Text fill="#ffffff82" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="label-text" text="GMT Offset" wrappingWidth="98.6875">
                      <font>
                         <Font name="Roboto" size="12.0" />
                      </font>
@@ -101,7 +103,7 @@
             </HBox>
             <HBox alignment="BOTTOM_LEFT" prefHeight="8.0" prefWidth="288.0">
                <children>
-                  <Text fill="#ffffff82" strokeType="OUTSIDE" strokeWidth="0.0" text="Latitude" wrappingWidth="109.6875">
+                  <Text fill="#ffffff82" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="label-text" text="Latitude" wrappingWidth="109.6875">
                      <font>
                         <Font name="Roboto" size="12.0" />
                      </font>
@@ -109,7 +111,7 @@
                         <Insets top="5.0" />
                      </HBox.margin>
                   </Text>
-                  <Text fill="#ffffff82" strokeType="OUTSIDE" strokeWidth="0.0" text="Longitude" wrappingWidth="90.6875">
+                  <Text fill="#ffffff82" strokeType="OUTSIDE" strokeWidth="0.0" styleClass="label-text" text="Longitude" wrappingWidth="90.6875">
                      <font>
                         <Font name="Roboto" size="12.0" />
                      </font>
@@ -159,12 +161,53 @@
                   </AnchorPane>
                </children>
             </HBox>
-            <VBox prefHeight="122.0" prefWidth="281.0">
+            <HBox nodeOrientation="LEFT_TO_RIGHT">
+               <children>
+                  <Button fx:id="saveLocationButton" alignment="CENTER" contentDisplay="CENTER" defaultButton="true" mnemonicParsing="false" onAction="#handleSaveLocationAction" onMouseEntered="#handleEnterIngnoreAction" onMouseExited="#handleExitIngnoreAction" prefHeight="25.0" prefWidth="103.0" styleClass="save-location-button" text="Save" />
+               </children>
+               <padding>
+                  <Insets bottom="15.0" left="1.0" right="2.0" top="15.0" />
+               </padding>
+            </HBox>
+            <HBox alignment="BOTTOM_LEFT" nodeOrientation="LEFT_TO_RIGHT" prefHeight="100.0" prefWidth="200.0">
+               <children>
+                  <Text strokeType="OUTSIDE" strokeWidth="0.0" styleClass="header-label-text" text="World Clock Locations" />
+               </children>
                <opaqueInsets>
                   <Insets />
                </opaqueInsets>
-            </VBox>
+               <padding>
+                  <Insets bottom="4.0" top="10.0" />
+               </padding>
+            </HBox>
+            <HBox alignment="BOTTOM_RIGHT" prefHeight="155.0" prefWidth="281.0" spacing="5.0">
+               <children>
+                  <ListView fx:id="locationsListView" maxHeight="1.7976931348623157E308" maxWidth="1.7976931348623157E308" prefHeight="127.0" prefWidth="256.0">
+                     <opaqueInsets>
+                        <Insets />
+                     </opaqueInsets>
+                  </ListView>
+                  <VBox alignment="CENTER" maxHeight="200.0" minHeight="-Infinity" prefHeight="200.0" spacing="15.0">
+                     <children>
+                        <Button fx:id="addLocationButton" mnemonicParsing="false" onAction="#handleAddLocationAction" styleClass="add-location-button" text="Add" />
+                        <Button fx:id="deleteLocationButton" mnemonicParsing="false" onAction="#handleDeleteLocationAction" styleClass="delete-location-button" text="Delete" />
+                        <Button fx:id="moveLocationUpButton" mnemonicParsing="false" onAction="#handleMoveUpLocationAction" styleClass="move-up-button" text="MoveUp" />
+                        <Button fx:id="moveLocationDownButton" mnemonicParsing="false" onAction="#handleMoveDownLocationAction" styleClass="move-down-button" text="MoveDown" />
+                     </children>
+                     <padding>
+                        <Insets bottom="5.0" top="5.0" />
+                     </padding>
+                  </VBox>
+               </children>
+               <padding>
+                  <Insets bottom="10.0" left="5.0" />
+               </padding>
+            </HBox>
          </children>
       </VBox>
    </children>
+   <stylesheets>
+      <URL value="@styles.css" />
+      <URL value="@config-locations.css" />
+   </stylesheets>
 </AnchorPane>

src/main/resources/com/carlfx/worldclock/styles.css

@@ -63,112 +63,3 @@
     -fx-font-family: "Roboto Black";
     -fx-font-size: 18;
 }
-
-.config-text-fields {
-    -fx-font-family: "Roboto Regular";
-    -fx-background-color: "#FFFFFF50";
-    -fx-font-size: 12;
-    -fx-text-fill: white;
-}
-
-// Background color of combo box
-.combo-box {
-    -fx-font-family: "Roboto Regular";
-    -fx-background-color: "#FFFFFF50";
-    -fx-font-size: 12;
-    -fx-text-fill: white;
-}
-
-// Background of the text field item in display
-.combo-box .list-cell, .combo-box .text-input {
-    -fx-text-fill: white;
-}
-
-// background of the list view area of popup
-.combo-box .combo-box-popup .list-view {
-    -fx-background-color: "#00000050";
-    -fx-border-color: "#2fdae0ce";
-    -fx-background-insets: 0 0 0 0;
-    -fx-border-style: solid;
-    -fx-border-width: 1;
-}
-
-// normal list item
-.combo-box .combo-box-popup .list-view .virtual-flow .clipped-container .sheet .cell.indexed-cell.list-cell {
-    -fx-font-family: "Roboto Regular";
-    -fx-background-color: "#101010ee";
-    -fx-font-size: 12;
-    -fx-text-fill: white;
-}
-
-// selected list item
-.combo-box .combo-box-popup .list-view .virtual-flow .clipped-container .sheet .cell.indexed-cell.list-cell:selected {
-    -fx-background-color: "#2fdae0ce";
-    -fx-text-fill: white;
-}
-
-// hover over list item
-.combo-box .combo-box-popup .list-view .virtual-flow .clipped-container .sheet .cell.indexed-cell.list-cell:hover {
-    -fx-background-color: "#2fdae0ce";
-    -fx-text-fill: white;
-}
-
-// track display
-.combo-box-popup .list-view .scroll-bar:vertical .track {
-    -fx-max-width: 10px;
-    -fx-background-color: "#2fdae0ce", black;
-    -fx-background-insets: 0 0 0 0, 1 0 1 1;
-    -fx-color: "#2fdae0ce";
-    -fx-border-color: transparent;
-   // -fx-border-width: 1px;
-}
-
-// normal thumb display
-.combo-box-popup .list-view .scroll-bar:vertical .thumb {
-    -fx-max-width: 8px;
-    -fx-background-color: "#2fdae0ce";
-    -fx-background-insets: 0 0 0 0;
-}
-.combo-box-popup .list-view .scroll-bar:vertical .thumb:hover {
-    -fx-background-color: "#2fdae0";
-}
-
-
-// normal increment and decrement buttons
-.combo-box-popup .list-view .scroll-bar:vertical .increment-button,
-.combo-box-popup .list-view .scroll-bar:vertical .decrement-button {
-        -fx-background-color: "#2fdae0ce", black;
-    	-fx-color: "#2fdae0ce";
-    	-fx-background-insets: 0 0 0 0, 0 0 0 1;
-}
-
-// normal increment and decrement arrow
-.combo-box-popup .list-view .scroll-bar:vertical .increment-button .increment-arrow,
-.combo-box-popup .list-view .scroll-bar:vertical .decrement-button .decrement-arrow {
-        -fx-background-color: "#2fdae0ce" ;
-        -fx-background-insets: 0 0 0 0;
-        -fx-color: "#2fdae0ce";
-}
-// normal increment and decrement arrow
-.combo-box-popup .list-view .scroll-bar:vertical .increment-button .increment-arrow:hover,
-.combo-box-popup .list-view .scroll-bar:vertical .decrement-button .decrement-arrow:hover {
-        -fx-background-color:  "#2fdae0";
-        -fx-color: "#2fdae0";
-}
-
-.error-overlay {
-    -fx-shape: "M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm0 448c-110.5 0-200-89.5-200-200S145.5 56 256 56s200 89.5 200 200-89.5 200-200 200zm101.8-262.2L295.6 256l62.2 62.2c4.7 4.7 4.7 12.3 0 17l-22.6 22.6c-4.7 4.7-12.3 4.7-17 0L256 295.6l-62.2 62.2c-4.7 4.7-12.3 4.7-17 0l-22.6-22.6c-4.7-4.7-4.7-12.3 0-17l62.2-62.2-62.2-62.2c-4.7-4.7-4.7-12.3 0-17l22.6-22.6c4.7-4.7 12.3-4.7 17 0l62.2 62.2 62.2-62.2c4.7-4.7 12.3-4.7 17 0l22.6 22.6c4.7 4.7 4.7 12.3 0 17z";
-    -fx-background-color: "#de752fce";
-
-    /*-fx-background-color: "#2fdae090";*/
-    -fx-fill: "#000000";
-    -fx-stroke: "#de752fce"; /* #2fdae0ff */
-    -fx-stroke-width: 1.5;
-    -fx-min-height: 12;
-    -fx-min-width: 12;
-    -fx-max-height: 12;
-    -fx-max-width: 12;
-}
-.error-overlay:hover {
-    -fx-background-color: "#de752f";
-}