Monolith onboarding

Gemfile

@@ -68,7 +68,7 @@ gem 'sinatra'
 #gem 'skylight'
 gem 'stamp'
 gem "treetop"
-gem 'versionist', github: 'bploetz/versionist'
+gem 'versionist'
 gem 'webrick'
 gem 'workflow'
 gem 'workflow-activerecord'

Gemfile.lock

@@ -1,12 +1,3 @@
-GIT
-  remote: https://github.com/bploetz/versionist.git
-  revision: 80b09ce472c0661d3994eeede17b96feb636a17e
-  specs:
-    versionist (2.0.1)
-      activesupport (>= 3)
-      railties (>= 3)
-      yard (~> 0.9.20)
-
 GIT
   remote: https://github.com/presidentbeef/brakeman.git
   revision: 6af53c63feb909d19bab970aedb3b0c583073eb6
@@ -567,6 +558,10 @@ GEM
     unicode-display_width (1.8.0)
     vcr (6.1.0)
     version_gem (1.1.2)
+    versionist (2.0.1)
+      activesupport (>= 3)
+      railties (>= 3)
+      yard (~> 0.9.20)
     webmock (3.18.1)
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
@@ -681,7 +676,7 @@ DEPENDENCIES
   turbolinks
   uglifier
   vcr
-  versionist!
+  versionist
   webmock
   webpacker
   webrick

app/assets/stylesheets/global.scss

@@ -1,6 +1,7 @@
 h1, h2, h3, h4, h5, h6 {
   text-transform: uppercase;
   letter-spacing: 0.0325rem;
+  text-decoration: none;
 }
 
 
@@ -30,6 +31,22 @@ body > .container {
   flex-grow: 1;
 }
 
+.bg-primary {
+  background-color: $yellow !important;
+}
+
+.bg-danger {
+  background-color: $red !important;
+}
+
+.bg-success {
+  background-color: $green !important;
+}
+
+code {
+  color: $black !important;
+}
+
 .border-medium {
   border-width: 2px !important;
 }
@@ -259,6 +276,14 @@ input[type="file"] {
   }
 }
 
+.link-discreet {
+  color: $black !important;
+  text-decoration: none !important;
+  &:hover {
+    text-decoration: underline !important;
+  }
+}
+
 .inline-list {
   margin: 0;
   padding: 0;
@@ -365,3 +390,7 @@ a.subtle-link {
   }
 }
 
+
+textarea {
+  resize: none;
+}

app/controllers/ui/devices_controller.rb

@@ -108,14 +108,26 @@ def new
       @device = Device.new(owner: current_user)
     end
 
+    def onboarding
+      unless current_user
+        flash[:alert] = I18n.t(:register_device_forbidden)
+        redirect_to login_path
+        return
+      end
+      @title = I18n.t(:onboarding_device_title)
+      add_breadcrumbs(
+        [I18n.t(:show_user_title, owner: owner_name), ui_user_path(current_user)],
+        [I18n.t(:onboarding_device_title), onboarding_ui_devices_path]
+      )
+    end
+
     def create
       unless current_user
         flash[:alert] = I18n.t(:register_device_forbidden)
         redirect_to login_path
         return
       end
-      @device = Device.new(device_params)
-      @device.owner = current_user
+      @device = new_device(device_params)
       if @device.valid?
         @device.save
         flash[:success] = I18n.t(:new_device_success)
@@ -126,6 +138,26 @@ def create
       end
     end
 
+    def onboarding_create
+      unless current_user
+        flash[:alert] = I18n.t(:register_device_forbidden)
+        redirect_to login_path
+        return
+      end
+      @devices = devices_params[:device].map do |attrs|
+        new_device(attrs.compact_blank)
+      end
+      if @devices.all?(&:valid?)
+        @devices.each(&:save)
+        flash[:success] = I18n.t(:new_device_success)
+        redirect_to ui_user_path(current_user)
+      else
+        flash[:alert] = I18n.t(:new_device_failure)
+        render :onboarding, status: :unprocessable_entity
+      end
+
+    end
+
     def upload
       find_device!
       return unless authorize_device! :upload?, :upload_device_forbidden
@@ -148,10 +180,29 @@ def upload_readings
 
     end
 
+
     private
 
+    def new_device(attrs)
+      device = Device.new(attrs)
+      device.owner = current_user
+      device
+    end
+
+    def devices_params
+      params.require(:devices).permit(
+        device: device_param_names
+      )
+    end
+
     def device_params
       params.require(:device).permit(
+        *device_param_names
+      ).compact_blank
+    end
+
+    def device_param_names
+      [
         :name,
         :description,
         :exposure,
@@ -164,10 +215,11 @@ def device_params
         :notify_stopped_publishing,
         :hardware_version_override,
         :mac_address,
+        :device_token,
         :forwarding_destination_id,
         { :tag_ids => [] },
         { :postprocessing_attributes => :hardware_url },
-      )
+      ]
     end
 
     def find_device!

app/javascript/application.js

@@ -1,6 +1,5 @@
 import * as $ from "jquery";
 import flatpickr from "flatpickr";
-import Tags from "bootstrap5-tags";
 import {setupCopyableInputs} from "components/copyable_input";
 import {setupMaps} from "components/map";
 import {setupMapLocationPickers} from "components/map_location_picker";
@@ -9,14 +8,18 @@ import {setupDevicesTypeahead} from "components/devices_typeahead";
 import {setupExtraInfos} from "components/extra_info";
 import {setupAutoFillTimeZone} from "components/auto_fill_time_zone";
 import {setupBlurables} from "components/blurable";
+import {setupOnboarding} from "components/onboarding";
+import {setupTags} from "components/tags";
 
-export default function setupApplication() {
-  $(function() {
 
-    Tags.init(".tag-select", {
-      baseClass: "tags-badge badge bg-light border text-dark text-truncate p-2 rounded-4"
-    });
+function setupCalendars()  {
     flatpickr(".flatpickr", { enableTime: true, time_24hr: true, defaultHour: 0, dateFormat: "Z", altInput: true});
+}
+
+export default function setupApplication() {
+  $(function() {
+    setupTags();
+    setupCalendars();
     setupCopyableInputs();
     setupMaps();
     setupMapLocationPickers();
@@ -25,5 +28,6 @@ export default function setupApplication() {
     setupReadings();
     setupAutoFillTimeZone();
     setupBlurables();
+    setupOnboarding();
   });
 }

app/javascript/components/blurable.js

@@ -2,7 +2,6 @@ import * as $ from "jquery";
 
 export function setupBlurables() {
   $(".blurable").each(function(ix, element) {
-    console.log(element);
     let cta = $(element).find(".blurable-cta");
     let ctaContainer = $(element).find(".blurable-cta-container");
     let inner = $(element).find(".blurable-inner");

app/javascript/components/map.js

@@ -35,14 +35,18 @@ export function setupMaps() {
       ext: 'png'
     }).addTo(map);
     if(points.length > 0) {
+      var setBounds = false;
       points.forEach((point) => {
         if (point.lat && point.lng) {
+          setBounds = true;
           const marker = L.marker([point.lat, point.lng], { icon: icon });
           marker.addTo(map);
           marker.addTo(featureGroup);
         }
       });
-      map.fitBounds(featureGroup.getBounds(), { padding: L.point(32, 40), maxZoom: 16});
+      if(setBounds) {
+        map.fitBounds(featureGroup.getBounds(), { padding: L.point(32, 40), maxZoom: 16});
+      }
     }
   });
 }

app/javascript/components/map_location_picker.js

@@ -1,11 +1,12 @@
 import * as $ from "jquery";
 import L from 'leaflet';
 import 'leaflet-defaulticon-compatibility';
+import 'leaflet-control-geocoder';
 
 const DEFAULT_LATITUDE = 41.396767038690285;
 const DEFAULT_LONGITUDE = 2.1943382543588137;
 
-class MapLocationPicker {
+export class MapLocationPicker {
   constructor(element) {
     this.element = element
     this.latitudeInput = $("#" + element.dataset["latitudeInputId"]);
@@ -31,19 +32,21 @@ class MapLocationPicker {
       attribution: '&copy; <a href="https://www.stadiamaps.com/" target="_blank">Stadia Maps</a> &copy; <a href="https://www.stamen.com/" target="_blank">Stamen Design</a> &copy; <a href="https://openmaptiles.org/" target="_blank">OpenMapTiles</a> &copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
       ext: 'png'
     }).addTo(this.map);
-
+    this.geocoder = new L.Control.Geocoder({defaultMarkGeocode: false});
+    this.geocoder.addTo(this.map);
     if(this.getLatLng()) {
       this.createMarker();
     }
 
+    this.geocoder.on("markgeocode", function(e) {
+      const latLng = e.geocode.center;
+      this.setLatLng(latLng.lat, latLng.lng)
+    }.bind(this));
+
+
     this.map.on('click', function(e) {
-        const latLng= e.latlng;
-        this.setLatLng(latLng.lat, latLng.lng);
-        if(this.marker) {
-          this.updateMarkerPosition();
-        } else {
-          this.createMarker();
-        }
+      const latLng= e.latlng;
+      this.setLatLng(latLng.lat, latLng.lng);
     }.bind(this));
   }
 
@@ -66,6 +69,11 @@ class MapLocationPicker {
   setLatLng(lat, lng) {
     this.latitudeInput.val(lat);
     this.longitudeInput.val(lng);
+    if(this.marker) {
+      this.updateMarkerPosition();
+    } else {
+      this.createMarker();
+    }
   }
 
   createMarker() {
@@ -74,15 +82,14 @@ class MapLocationPicker {
     this.marker.on('dragend', function(event) {
       var position = event.target.getLatLng();
       this.setLatLng(position.lat, position.lng);
-      this.updateMarkerPosition();
     }.bind(this));
-    this.map.panTo(new L.LatLng(position.lat, position.lng));
+    this.map.flyTo(new L.LatLng(position.lat, position.lng), this.defaultZoom(),  { duration: 0.25 });
   }
 
   updateMarkerPosition() {
     const position = this.getLatLng();
     this.marker.setLatLng(new L.LatLng(position.lat, position.lng),{draggable:'true'});
-    this.map.panTo(new L.LatLng(position.lat, position.lng))
+    this.map.flyTo(new L.LatLng(position.lat, position.lng), this.defaultZoom(), { duration: 0.25 })
   }
 }