glib-web 0.5.68 → 0.5.72

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a3ea43fdde7d1ab15242e1f8d47072c954b9523061a9c2424d10b54ec768ae5e
-  data.tar.gz: a601ac954542c5f4cf13ca04b92b6da1b758862d1e69d83449b12ce03ad1a3b3
+  metadata.gz: 1e3001e9079ccbaddf587e2c9e250583aaf43023f7e5e9a5e6e3414942218491
+  data.tar.gz: e7cf33f501702156519eace2e073f3710915b2c76601eceed3a2b8f9d0b48a08
 SHA512:
-  metadata.gz: e45ff332882a5526ea0f4d56d940f5f703affdf0a6f0b5648fa207406490d665a3675a7f70d6ef6a37260d41606e032aa069bf7ef9c4fb9b828cdd3892acc3a4
-  data.tar.gz: 3b8e3e37cf5f24082a4e3423ee96cc4936f839b9bdbbdc541d4008bc00aeee63ef1ce6766a1e18747aa83a52644520ff4fcde62d800e713b46412d9cb533c1fb
+  metadata.gz: 5d2f35e52eb74adc79c3427c65f8bd16d78ce0bf2806a29ec47a092ca5bf0ce81a3c4b9af6f94c36ca87c032c0fd83a0d37cd6ed3e9cdb228fb875c8050a91a3
+  data.tar.gz: 4ad64336279bf03dacf046c21cda48b0215aecad68563dc52934edb092fcd8d91aba7f8ea146a859a1aa33afce6627e319db2a58502a0a350cc1bb973df1c10e

data/app/helpers/glib/enum_helper.rb

@@ -4,5 +4,15 @@ module Glib
       keys ||= clazz.send("#{enum_field}s").keys
       keys.map { |i| { text: clazz.glib_enum_humanize(enum_field, i), value: i } }
     end
+
+    # See https://en.wikipedia.org/wiki/List_of_tz_database_time_zones and description
+    def glib_time_zone_options
+      ActiveSupport::TimeZone.all.sort { |a, b|
+        a.utc_offset <=> b.utc_offset
+      }.collect { |tz|
+        utc_offset = "#{tz.utc_offset >= 0 ? '+' : ''}#{tz.utc_offset / 60 / 60}h"
+        { value: tz.tzinfo.identifier, text: "#{utc_offset}  #{tz.name}" }
+      }
+    end
   end
 end

data/app/helpers/glib/json_ui/abstract_builder.rb

@@ -48,6 +48,8 @@ module Glib
     class JsonUiElement
       attr_reader :json, :page
 
+      @@_required_properties = {}
+
       def initialize(json, page)
         @json = json
         @page = page
@@ -60,6 +62,11 @@ module Glib
           args.each do |k, v|
             send(k, v)
           end
+
+          required_properties = @@_required_properties[self.class.component_name] || []
+          required_properties.each do |prop|
+            raise "Property required: #{prop}. Properties provided: #{args}. Component: #{self.class.component_name}" unless args[prop].present?
+          end
         else
           raise "Invalid properties: #{args}"
         end
@@ -68,6 +75,10 @@ module Glib
       end
 
       private
+        def self.component_name
+          @component_name ||= self.name.sub('Glib::JsonUi::ActionBuilder::', '')
+        end
+
         def self.any(propName)
           define_method(propName) do |value|
             json.set! propName, value
@@ -106,7 +117,7 @@ module Glib
           define_method(propName) do |value|
             if (value = value&.to_s)
               if !Rails.env.production?
-                if !value.match /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i
+                if !value.match /^#([A-Fa-f0-9]{8}|[A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/i
                   raise "Invalid color: #{value}"
                 end
               end
@@ -285,6 +296,10 @@ module Glib
           end
         end
 
+        def self.required(*prop_names)
+          @@_required_properties[self.component_name] = prop_names
+        end
+
         def created
           # To be overridden
         end

data/app/helpers/glib/json_ui/action_builder/windows.rb

@@ -26,6 +26,8 @@ class Glib::JsonUi::ActionBuilder
     class CloseWithReload < Action
       string :fallbackUrl
       action :onReload
+
+      required :fallbackUrl
     end
   end
 end

data/app/helpers/glib/json_ui/styling_helper.rb

@@ -40,6 +40,14 @@ module Glib
         '#b3bac2'
       end
 
+      def glib_color_success
+        '#4caf50'
+      end
+
+      def glib_color_error
+        '#ff5252'
+      end
+
       ###
 
     end

data/app/helpers/glib/json_ui/view_builder.rb

@@ -171,6 +171,14 @@ module Glib
         action :onClick
       end
 
+      class Switch < View
+        string :text, cache: true
+        bool :enabled
+
+        action :onEnabled
+        action :onDisabled
+      end
+
       class Hr < View
         color :color
       end

data/app/helpers/glib/json_ui/view_builder/fields.rb

@@ -98,11 +98,10 @@ class Glib::JsonUi::ViewBuilder
     end
 
     class Timer < Text
-      bool :forward
       hash :actionCable
-      action :onZero
       int :min
       int :max
+      bool :forward
     end
 
     # Benefits of using `fields/submit` over `button`
@@ -129,7 +128,7 @@ class Glib::JsonUi::ViewBuilder
         @value = value if value != Glib::Value::DEFAULT
       end
 
-      # Where possible, use value instead of this
+      # TODO: Remove (deprecated). Where possible, use value instead of this
       bool :checked
     end
 
@@ -153,6 +152,18 @@ class Glib::JsonUi::ViewBuilder
       hash :append
     end
 
+    class TimeZone < AbstractField
+      include Glib::EnumHelper
+
+      # Override
+      def created
+        super
+
+        json.options glib_time_zone_options
+      end
+    end
+
+    # TODO: Remove (deprecated)
     class Autocomplete < AbstractField
       array :options
       # bool :readOnly

data/app/helpers/glib/json_ui/view_builder/panels.rb

@@ -212,6 +212,7 @@ class Glib::JsonUi::ViewBuilder
     end
 
     class Flow < View
+      hash :innerPadding
       views :childViews
     end
 
@@ -237,6 +238,10 @@ class Glib::JsonUi::ViewBuilder
       end
     end
 
+    class Web < View
+      string :url
+    end
+
     class Ul < View
       views :childViews
 

data/app/models/glib/application_record.rb

@@ -5,13 +5,13 @@ module Glib
     scope :created_asc, -> { order(created_at: :asc) }
     scope :created_desc, -> { order(created_at: :desc) }
 
-    def glib_enum_humanize(enum_name)
-      self.class.glib_enum_humanize(enum_name, send(enum_name))
+    def glib_enum_humanize(enum_name, default_value = nil)
+      self.class.glib_enum_humanize(enum_name, send(enum_name), default_value)
     end
 
-    def self.glib_enum_humanize(enum_name, enum_value)
+    def self.glib_enum_humanize(enum_name, enum_value, default_value = nil)
       if enum_value
-        I18n.t("activerecord.attributes.#{model_name.i18n_key}.#{enum_name.to_s.pluralize}.#{enum_value}")
+        I18n.t("activerecord.attributes.#{model_name.i18n_key}.#{enum_name.to_s.pluralize}.#{enum_value}", default: default_value)
       end
     end
   end

data/app/views/json_ui/garage/forms/dynamic_select.json.jbuilder

@@ -6,6 +6,8 @@ render "#{@path_prefix}/nav_menu", json: json, page: page
 page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
   form.h2 text: 'Dynamic Select'
   form.spacer height: 6
+  form.label text: 'Dynamically loads options from the server. Useful for a huge list (e.g. 1000+ items)'
+  form.spacer height: 14
 
   form.fields_dynamicSelect name: 'user[primary_language]', width: 'matchParent', label: 'Primary Language',
     selectedOptions: [ { value: 'id3', text: 'Item 3' } ],

data/app/views/json_ui/garage/forms/index.json.jbuilder

@@ -62,11 +62,8 @@ page.list sections: [
       template.thumbnail title: 'Ratings', onClick: ->(action) do
         action.windows_open url: json_ui_garage_url(path: 'forms/ratings')
       end
-      template.thumbnail title: 'Misc 1', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'forms/misc')
-      end
-      template.thumbnail title: 'Misc 2', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'forms/misc_two')
+      template.thumbnail title: 'Timers', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'forms/timers')
       end
     end
   end, ->(section) do

data/app/views/json_ui/garage/forms/{misc_two.json.jbuilder → online_participant1.json.jbuilder}

@@ -16,6 +16,10 @@ json.actionCable online_socket_config
 
 page.on load: ->(action) do
   action.timeouts_set interval: 1000, repeat: true, onTimeout: ->(subaction) do
-    subaction.cables_push channel: online_channel, event: event, payload: { status: true, user_id: first_user.id, reset_value: 10 }
+    subaction.cables_push channel: online_channel, event: event, payload: { status: true, user_id: first_user.id, reset_value: 3 }
   end
 end
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  scroll.label text: 'Participant One is now online'
+end

data/app/views/json_ui/garage/forms/online_participant2.json.jbuilder

@@ -0,0 +1,25 @@
+json.title 'Forms'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+online_channel = 'OnlineChannel'
+event = 'online_status'
+second_user = User.second
+
+online_socket_config = {
+  channel: online_channel,
+  filterKey: nil,
+  params: {}
+}
+json.actionCable online_socket_config
+
+page.on load: ->(action) do
+  action.timeouts_set interval: 1000, repeat: true, onTimeout: ->(subaction) do
+    subaction.cables_push channel: online_channel, event: event, payload: { status: true, user_id: second_user.id, reset_value: 3 }
+  end
+end
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  scroll.label text: 'Participant Two is now online'
+end

data/app/views/json_ui/garage/forms/pickers.json.jbuilder

@@ -30,12 +30,14 @@ page.form \
     name: 'user[employer]',
     checkValue: 1,
     label: 'I am an employer (no default value)'
-  form.fields_check \
-    name: 'user[enabled]',
-    checkValue: true,
-    label: 'Enable',
-    styleClass: 'switch',
-    value: 'true'
+
+  # Use `switch` component instead.
+  # form.fields_check \
+  #   name: 'user[enabled]',
+  #   styleClass: 'switch',
+  #   checkValue: true,
+  #   label: 'Enable',
+  #   value: 'true'
 
   form.spacer height: 20
   form.h2 text: 'Date/Time'

data/app/views/json_ui/garage/forms/selects.json.jbuilder

@@ -72,7 +72,15 @@ page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', p
   form.fields_select name: 'user[mixed_default][]', width: 'matchParent', label: 'Mixed Default', options: languages.map { |k, v| { value: k, text: v } }, value: ['', 'specified', nil], multiple: true
 
   form.spacer height: 20
-  form.h2 text: 'Autocomplete (select with manual entry)'
+  form.h2 text: 'Timezone selection'
+  form.spacer height: 6
+  form.label text: 'The select field defaults to the device\'s time zone.'
+  form.spacer height: 6
+  form.fields_timeZone name: 'user[time_zone]', width: 'matchParent', label: 'Time Zone'
+
+  # TODO: Remove
+  form.spacer height: 20
+  form.h2 text: 'Autocomplete (select with manual entry) -- DEPRECATED: Confusing UX, promote bad backend design'
   form.spacer height: 6
   skills = ['Singing', 'Dancing', 'Fighting']
   form.fields_autocomplete name: 'user[skill]', width: 'matchParent', label: 'Skill', options: skills, value: 'Singing'

data/app/views/json_ui/garage/forms/timers.json.jbuilder

@@ -0,0 +1,120 @@
+json.title 'Forms'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+online_channel = 'OnlineChannel'
+first_user = User.first
+second_user = User.second
+
+page.form url: json_ui_garage_url(path: 'forms/generic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
+  form.spacer height: 20
+  form.h2 text: 'Standard (Backward)'
+  form.spacer height: 6
+  form.fields_timer \
+    width: 160,
+    styleClasses: ['outlined'],
+    label: 'Timer',
+    name: 'user[timer]',
+    value: 60,
+    min: 30
+
+  form.spacer height: 20
+  form.h2 text: 'Stop Watch (Forward)'
+  form.spacer height: 6
+  form.fields_timer \
+    width: 160,
+    styleClasses: ['outlined'],
+    label: 'Stop Watch',
+    name: 'user[stop_watch]',
+    value: 10,
+    max: 20,
+    forward: true
+
+  form.spacer height: 20
+  form.h2 text: 'Reset timer by ActionCable'
+  online_participant1_config = {
+    channel: online_channel,
+    filterKey: first_user.id
+  }
+
+  form.fields_timer \
+    width: 120,
+    actionCable: online_participant1_config,
+    name: 'user[online_timer1]',
+    value: 3,
+    min: 0
+
+  form.label \
+    text: 'Participant One is online',
+    color: glib_color_success,
+    showIf: {
+      ">": [
+        {
+          "var": 'user[online_timer1]'
+        },
+        0
+      ]
+    }
+
+  form.label \
+    text: 'Participant One is offline',
+    color: glib_color_error,
+    showIf: {
+      "<=": [
+        {
+          "var": 'user[online_timer1]'
+        },
+        0
+      ]
+    }
+
+  form.spacer height: 10
+  form.label text: 'Open Participant One', onClick: ->(action) do
+    action.windows_openWeb url: json_ui_garage_url(path: 'forms/online_participant1')
+  end
+  form.spacer height: 20
+
+  online_participant2_config = {
+    channel: online_channel,
+    filterKey: second_user.id
+  }
+  form.fields_timer \
+    width: 120,
+    actionCable: online_participant2_config,
+    name: 'user[online_timer2]',
+    value: 3,
+    min: 0
+
+  form.label \
+    text: 'Participant Two is online',
+    color: glib_color_success,
+    showIf: {
+      ">": [
+        {
+          "var": 'user[online_timer2]'
+        },
+        0
+      ]
+    }
+
+  form.label \
+    text: 'Participant Two is offline',
+    color: glib_color_error,
+    showIf: {
+      "<=": [
+        {
+          "var": 'user[online_timer2]'
+        },
+        0
+      ]
+    }
+
+  form.spacer height: 10
+  form.label text: 'Open Participant Two', onClick: ->(action) do
+    action.windows_openWeb url: json_ui_garage_url(path: 'forms/online_participant2')
+  end
+
+  form.spacer height: 40
+  form.fields_submit text: 'Submit'
+end

data/app/views/json_ui/garage/lists/index.json.jbuilder

@@ -4,6 +4,12 @@ json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
 
   page.list firstSection: ->(section) do
+    section.header padding: glib_json_padding_list, childViews: ->(header) do
+      header.label text: 'The List panel is useful for displaying a large number of items that are uniform, which is especially important in mobile apps because the rows can be reused for efficiency.'
+      header.spacer height: 6
+      header.label text: 'So, following the mobile-first paradigm, do not ever display large numbers of items using other components.'
+    end
+
     section.rows builder: ->(template) do
       template.thumbnail icon: 'list', title: 'Templating', onClick: ->(action) do
         action.windows_open url: json_ui_garage_url(path: 'lists/templating')

data/app/views/json_ui/garage/panels/flow.json.jbuilder

@@ -29,6 +29,16 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     panel.button text: '5'
   end
 
+  scroll.label text: "\n"
+  scroll.h1 text: 'Inner Paddings'
+  scroll.panels_flow innerPadding: { top: 10, bottom: 10, left: 10, right: 10 }, width: 300, backgroundColor: '#b3bac2', childViews: ->(panel) do
+    panel.button text: '1'
+    panel.button text: '2'
+    panel.button text: '3'
+    panel.button text: '4'
+    panel.button text: '5'
+  end
+
   # scroll.label text: "\n"
   # scroll.h1 text: 'Alignments'
   # scroll.panels_horizontal align: 'top', childViews: ->(panel) do

data/app/views/json_ui/garage/panels/index.json.jbuilder

@@ -27,6 +27,10 @@ json_ui_page json do |page|
         template.thumbnail title: 'Responsive', subtitle: 'Arrange *column panels* horizontally using flex', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/responsive')
         end
+        template.thumbnail title: 'Unordered List', subtitle: 'Bullet points similar to HTML\'s <ul> tag', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'panels/ul')
+        end
+
 
       end
     end, ->(section) do
@@ -82,7 +86,6 @@ json_ui_page json do |page|
         template.thumbnail title: 'Column', subtitle: 'Adds control over layout inside a responsive panel', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/responsive')
         end
-
       end
     end, ->(section) do
       section.header padding: glib_json_padding_list, childViews: ->(header) do
@@ -93,6 +96,9 @@ json_ui_page json do |page|
         template.thumbnail title: 'Custom', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'panels/custom')
         end
+        template.thumbnail title: 'Web', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'panels/web')
+        end
 
       end
     end, ->(section) do

data/app/views/json_ui/garage/panels/ul.json.jbuilder

@@ -0,0 +1,33 @@
+json.title 'Unordered List'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  scroll.h2 text: 'Standard Usage'
+  scroll.spacer height: 6
+  scroll.panels_ul childViews: ->(ul) do
+    ul.button text: 'Button', styleClass: 'link', onClick: ->(action) do
+      action.windows_open url: json_ui_garage_url(path: 'home/blank')
+    end
+    ul.label text: 'Label'
+  end
+
+  scroll.spacer height: 14
+  scroll.h2 text: 'Breadcrumbs'
+  scroll.spacer height: 6
+  scroll.panels_ul \
+    width: 'matchParent',
+    backgroundColor: '#eeeeee',
+    padding: { top: 10, right: 20, bottom: 10, left: 20 },
+    styleClass: 'breadcrumbs',
+    childViews: ->(ul) do
+      ul.button text: 'Level 1', styleClass: 'link', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'home/blank')
+      end
+      ul.button text: 'Level 2', styleClass: 'link', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'home/blank')
+      end
+      ul.label text: 'Level 3'
+    end
+end

data/app/views/json_ui/garage/panels/web.json.jbuilder

@@ -0,0 +1,15 @@
+json.title 'Panels'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+page.header padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(header) do
+  header.h1 text: 'Web View'
+end
+
+page.body height: 'matchParent', padding: glib_json_padding_body, childViews: ->(body) do
+  body.panels_web \
+    width: 'matchParent',
+    height: 'matchParent',
+    url: 'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf'
+end

data/app/views/json_ui/garage/views/controls.json.jbuilder

@@ -0,0 +1,37 @@
+json.title 'Views'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  scroll.h2 text: 'Button'
+  scroll.spacer height: 6
+  scroll.button text: 'Click me', onClick: ->(action) do
+    action.dialogs_alert message: 'Perform action'
+  end
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'Chip'
+  scroll.spacer height: 6
+  scroll.chip styleClass: 'success', text: 'pending'
+  scroll.spacer height: 6
+  scroll.chip text: 'Skills', onClick: ->(action) do
+    action.dialogs_alert message: 'Perform action'
+  end
+
+  scroll.spacer height: 20
+  scroll.h2 text: 'Switch'
+  scroll.spacer height: 6
+  scroll.switch \
+    text: 'Email notification',
+    onEnabled: ->(action) do
+      action.dialogs_alert message: 'Enabled'
+    end
+  scroll.switch \
+    enabled: true,
+    text: 'Push notification',
+    onDisabled: ->(action) do
+      action.dialogs_alert message: 'Disabled'
+    end
+
+end

data/app/views/json_ui/garage/views/icons.json.jbuilder

@@ -11,4 +11,5 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
   scroll.spacer height: 20
   scroll.h2 text: 'Icon with color'
   scroll.icon name: 'home', color: '#9370DB'
+  scroll.icon name: 'home', color: '#9370DB80'
 end

data/app/views/json_ui/garage/views/index.json.jbuilder

@@ -13,6 +13,9 @@ json_ui_page json do |page|
         template.thumbnail title: 'Texts', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'views/texts')
         end
+        template.thumbnail title: 'Controls', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'views/controls')
+        end
         template.thumbnail title: 'Images', onClick: ->(action) do
           action.windows_open url: json_ui_garage_url(path: 'views/images')
         end

data/app/views/json_ui/garage/views/misc.json.jbuilder

@@ -5,14 +5,14 @@ json_ui_page json do |page|
 
   page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
 
-    scroll.h2 text: 'Unordered List'
-    scroll.spacer height: 6
-    scroll.panels_ul childViews: ->(ul) do
-      ul.button text: 'Button', styleClass: 'link', onClick: ->(action) do
-        action.windows_open url: json_ui_garage_url(path: 'home/blank')
-      end
-      ul.label text: 'Label'
-    end
+    # scroll.h2 text: 'Unordered List'
+    # scroll.spacer height: 6
+    # scroll.panels_ul childViews: ->(ul) do
+    #   ul.button text: 'Button', styleClass: 'link', onClick: ->(action) do
+    #     action.windows_open url: json_ui_garage_url(path: 'home/blank')
+    #   end
+    #   ul.label text: 'Label'
+    # end
 
     scroll.spacer height: 20
     scroll.h2 text: 'Time'

data/app/views/json_ui/garage/views/texts.json.jbuilder

@@ -32,13 +32,4 @@ page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
     ' comes from a line in section 1.10.32.' + "\n\n" +
     'The standard chunk of Lorem Ipsum used since the 1500s is reproduced below for those interested. Sections 1.10.32 and 1.10.33 from "de Finibus Bonorum et Malorum"'\
     ' by Cicero are also reproduced in their exact original form, accompanied by English versions from the 1914 translation by H. Rackham.'
-
-  scroll.spacer height: 20
-  scroll.h2 text: 'Chip'
-  scroll.spacer height: 6
-  scroll.chip styleClass: 'success', text: 'pending'
-  scroll.spacer height: 6
-  scroll.chip text: 'Skills', onClick: ->(action) do
-    action.dialogs_alert message: 'Perform action'
-  end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: glib-web
 version: !ruby/object:Gem::Version
-  version: 0.5.68
+  version: 0.5.72
 platform: ruby
 authors:
 - ''
@@ -146,9 +146,9 @@ files:
 - app/views/json_ui/garage/forms/generic_post.json.jbuilder
 - app/views/json_ui/garage/forms/get_request.json.jbuilder
 - app/views/json_ui/garage/forms/index.json.jbuilder
-- app/views/json_ui/garage/forms/misc.json.jbuilder
-- app/views/json_ui/garage/forms/misc_two.json.jbuilder
 - app/views/json_ui/garage/forms/new_rich_text.json.jbuilder
+- app/views/json_ui/garage/forms/online_participant1.json.jbuilder
+- app/views/json_ui/garage/forms/online_participant2.json.jbuilder
 - app/views/json_ui/garage/forms/pickers.json.jbuilder
 - app/views/json_ui/garage/forms/ratings.json.jbuilder
 - app/views/json_ui/garage/forms/rich_text.json.jbuilder
@@ -160,6 +160,7 @@ files:
 - app/views/json_ui/garage/forms/submission_indicator.json.jbuilder
 - app/views/json_ui/garage/forms/submission_indicator_post.json.jbuilder
 - app/views/json_ui/garage/forms/text_validation.json.jbuilder
+- app/views/json_ui/garage/forms/timers.json.jbuilder
 - app/views/json_ui/garage/home/blank.json.jbuilder
 - app/views/json_ui/garage/home/index.json.jbuilder
 - app/views/json_ui/garage/home/slow.json.jbuilder
@@ -196,7 +197,9 @@ files:
 - app/views/json_ui/garage/panels/outlined.json.jbuilder
 - app/views/json_ui/garage/panels/responsive.json.jbuilder
 - app/views/json_ui/garage/panels/split.json.jbuilder
+- app/views/json_ui/garage/panels/ul.json.jbuilder
 - app/views/json_ui/garage/panels/vertical.json.jbuilder
+- app/views/json_ui/garage/panels/web.json.jbuilder
 - app/views/json_ui/garage/services/dynamic_text.json.jbuilder
 - app/views/json_ui/garage/services/image.json.jbuilder
 - app/views/json_ui/garage/services/index.json.jbuilder
@@ -211,6 +214,7 @@ files:
 - app/views/json_ui/garage/views/banners.json.jbuilder
 - app/views/json_ui/garage/views/calendar_data.json.jbuilder
 - app/views/json_ui/garage/views/charts.json.jbuilder
+- app/views/json_ui/garage/views/controls.json.jbuilder
 - app/views/json_ui/garage/views/icon_names.json.jbuilder
 - app/views/json_ui/garage/views/icons.json.jbuilder
 - app/views/json_ui/garage/views/images.json.jbuilder

data/app/views/json_ui/garage/forms/misc.json.jbuilder

@@ -1,71 +0,0 @@
-json.title 'Forms'
-
-page = json_ui_page json
-render "#{@path_prefix}/nav_menu", json: json, page: page
-
-online_channel = 'OnlineChannel'
-first_user = User.first
-
-page.form \
-  url: json_ui_garage_url(path: 'forms/generic_post'),
-  method: 'post',
-  padding: glib_json_padding_body,
-  childViews: ->(form) do
-
-  form.spacer height: 20
-  form.h2 text: 'Standard (Backward)'
-  form.spacer height: 6
-  form.fields_timer \
-    name: 'user[timer]',
-    value: 60,
-    min: 30
-
-  form.spacer height: 20
-  form.h2 text: 'Stop Watch (Forward)'
-  form.spacer height: 6
-  form.fields_timer \
-    name: 'user[stop_watch]',
-    value: 10,
-    max: 20,
-    forward: true
-
-  form.spacer height: 20
-  form.h2 text: 'Reset timer by ActionCable'
-  online_socket_config = {
-        channel: online_channel,
-        filterKey: first_user.id,
-        params: {
-          conversation: 2
-        }
-      }
-
-  form.fields_timer \
-    actionCable: online_socket_config,
-    name: 'user[online_timer]',
-    value: 10
-
-  form.label \
-    text: 'Participant is online',
-    showIf: {
-      ">": [
-        {
-          "var": 'user[online_timer]'
-        },
-        0
-      ]
-    }
-
-  form.label \
-    text: 'Participant is offline',
-    showIf: {
-      "<=": [
-        {
-          "var": 'user[online_timer]'
-        },
-        0
-      ]
-    }
-
-  form.spacer height: 20
-  form.fields_submit text: 'Submit'
-end