glib-web 0.5.47 → 0.5.53

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

@@ -1,40 +1,39 @@
 json.title 'Forms'
 
-json_ui_page json do |page|
-  render "#{@path_prefix}/nav_menu", json: json, page: page
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
 
-  page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: { top: 12, left: 20, right: 20, bottom: 12 }, childViews: ->(form) do
-    form.fields_text name: 'user[name]', width: 'matchParent', label: 'Name'
+page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: { top: 12, left: 20, right: 20, bottom: 12 }, childViews: ->(form) do
+  form.fields_text name: 'user[name]', width: 'matchParent', label: 'Name'
 
-    # images = [
-    #   {
-    #     value: "eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--193dc0d939b9558fc4973fafbba91d989cbb04d4",
-    #     fileUrl: "https://imageserver-demo.herokuapp.com/image/itinerarybuilder-demo/o6CKzNt67PWnkPdUEnWMt7pr?h=100&w=100"
-    #   }
-    # ]
-    # form.fields_richText name: 'user[bio]', width: 'matchParent', label: 'Content', images: images, value: '<p>Test {{image1}}</p>'
+  # images = [
+  #   {
+  #     value: "eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--193dc0d939b9558fc4973fafbba91d989cbb04d4",
+  #     fileUrl: "https://imageserver-demo.herokuapp.com/image/itinerarybuilder-demo/o6CKzNt67PWnkPdUEnWMt7pr?h=100&w=100"
+  #   }
+  # ]
+  # form.fields_richText name: 'user[bio]', width: 'matchParent', label: 'Content', images: images, value: '<p>Test {{image1}}</p>'
 
-    json.child! do
-      json.view 'fields/newRichText-v1'
-      json.width 'matchParent'
-      json.label 'Content'
-      json.name 'user[bio]'
-      json.value '<p>Test {{image1}}</p>'
+  json.child! do
+    json.view 'fields/newRichText-v1'
+    json.width 'matchParent'
+    json.label 'Content'
+    json.name 'user[bio]'
+    json.value '<p>Test {{image1}}</p>'
 
-      json.images do
-        json.child! do
-          json.value "eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--193dc0d939b9558fc4973fafbba91d989cbb04d4"
-          # json.fileTitle "hita i hanom hg.jpg"
-          json.fileUrl "https://imageserver-demo.herokuapp.com/image/itinerarybuilder-demo/o6CKzNt67PWnkPdUEnWMt7pr?h=100&w=100"
-        end
-      end
-
-      json.imageUploader do
-        json.accepts(fileType: "image/*", maxFileSize: 5000)
-        json.directUploadUrl rails_direct_uploads_url
+    json.images do
+      json.child! do
+        json.value "eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--193dc0d939b9558fc4973fafbba91d989cbb04d4"
+        # json.fileTitle "hita i hanom hg.jpg"
+        json.fileUrl "https://imageserver-demo.herokuapp.com/image/itinerarybuilder-demo/o6CKzNt67PWnkPdUEnWMt7pr?h=100&w=100"
       end
     end
 
-    form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    json.imageUploader do
+      json.accepts(fileType: "image/*", maxFileSize: 5000)
+      json.directUploadUrl rails_direct_uploads_url
+    end
   end
+
+  form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
 end

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

@@ -1,48 +1,46 @@
 json.title 'Forms'
 
-json_ui_page json do |page|
-  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: 'Radio Group'
-    form.spacer height: 6
-    form.h4 text: 'Gender'
-    form.fields_radioGroup name: 'user[gender]', value: 'F', childViews: ->(group) do
-      group.fields_radio value: '', label: 'Unknown'
-      group.fields_radio value: 'M', label: 'Male'
-      group.fields_radio value: 'F', label: 'Female'
-    end
-
-    form.spacer height: 20
-    form.h2 text: 'Single Checkbox'
-    form.fields_check name: 'user[age_range]', value: '16+', checkValue: '16+', uncheckValue: '0-16', label: 'I am over 16 (has default value)'
-    form.fields_check 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'
-
-    form.spacer height: 20
-    form.h2 text: 'Date/Time'
-    form.spacer height: 6
-    form.fields_date name: 'user[date]', width: 'matchParent', label: 'Date', min: '2010-01-01', max: '2012-01-01', value: '2010-02-01'
-    form.fields_datetime name: 'user[date_time]', width: 'matchParent', label: 'Date Time', min: '2018-06-09T00:00', max: '2018-06-17T00:00', value: '2018-06-15T19:30'
-
-    form.spacer height: 20
-    form.h2 text: 'Country'
-    form.spacer height: 6
-    region_field = { name: 'user[city]', label: 'City' }
-    form.fields_country name: 'user[country]', width: 'matchParent', label: 'Country', region: region_field
-
-    form.spacer height: 20
-    form.h2 text: 'Map'
-    form.spacer height: 6
-    form.fields_location name: 'user[address]', width: 'matchParent', label: 'Type an address', value: 'Sydney Harbour Bridge',
-      autocompleteOptions: { componentRestrictions: { country: 'au' }, types: ['(cities)'] },
-      latitudeField: { view: 'fields/text', name: 'user[latitude]', label: 'Lat', value: -33.8523063, readOnly: true },
-      longitudeField: { view: 'fields/text', name: 'user[longitude]', label: 'Long', value: 151.21078710000006, readOnly: true },
-      zoomField: { view: 'fields/text', name: 'user[zoom]', label: 'Zoom' }
-
-    form.spacer height: 20
-    form.fields_submit text: 'Submit'
-
+page = json_ui_page json
+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: 'Radio Group'
+  form.spacer height: 6
+  form.h4 text: 'Gender'
+  form.fields_radioGroup name: 'user[gender]', value: 'F', childViews: ->(group) do
+    group.fields_radio value: '', label: 'Unknown'
+    group.fields_radio value: 'M', label: 'Male'
+    group.fields_radio value: 'F', label: 'Female'
   end
 
+  form.spacer height: 20
+  form.h2 text: 'Single Checkbox'
+  form.fields_check name: 'user[age_range]', value: '16+', checkValue: '16+', uncheckValue: '0-16', label: 'I am over 16 (has default value)'
+  form.fields_check 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'
+
+  form.spacer height: 20
+  form.h2 text: 'Date/Time'
+  form.spacer height: 6
+  form.fields_date name: 'user[date]', width: 'matchParent', label: 'Date', min: '2010-01-01', max: '2012-01-01', value: '2010-02-01'
+  form.fields_datetime name: 'user[date_time]', width: 'matchParent', label: 'Date Time', min: '2018-06-09T00:00', max: '2018-06-17T00:00', value: '2018-06-15T19:30'
+
+  form.spacer height: 20
+  form.h2 text: 'Country'
+  form.spacer height: 6
+  region_field = { name: 'user[city]', label: 'City' }
+  form.fields_country name: 'user[country]', width: 'matchParent', label: 'Country', region: region_field
+
+  form.spacer height: 20
+  form.h2 text: 'Map'
+  form.spacer height: 6
+  form.fields_location name: 'user[address]', width: 'matchParent', label: 'Type an address', value: 'Sydney Harbour Bridge',
+    autocompleteOptions: { componentRestrictions: { country: 'au' }, types: ['(cities)'] },
+    latitudeField: { view: 'fields/text', name: 'user[latitude]', label: 'Lat', value: -33.8523063, readOnly: true },
+    longitudeField: { view: 'fields/text', name: 'user[longitude]', label: 'Long', value: 151.21078710000006, readOnly: true },
+    zoomField: { view: 'fields/text', name: 'user[zoom]', label: 'Zoom' }
+
+  form.spacer height: 20
+  form.fields_submit text: 'Submit'
+
 end

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

@@ -2,7 +2,7 @@ json.title 'Forms'
 
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
-  
+
   page.form url: json_ui_garage_url(path: 'forms/submission_flow_post'), method: 'post', padding: { top: 12, left: 20, right: 20, bottom: 12 }, childViews: ->(form) do
     form.fields_radioGroup name: 'user[flow]', childViews: ->(group) do
       group.h3 text: 'Flow'

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

@@ -18,7 +18,17 @@ else
 
   render "#{@path_prefix}/nav_menu", json: json, page: page
 
-  page.list nextPage: next_page, firstSection: ->(section) do
-    render 'json_ui/garage/lists/autoload_section', page: page, page_index: page_index, reorder: true
-  end
+  page.list nextPage: next_page, sections: [
+    ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h3 text: 'Section One'
+      end
+    end,
+    ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h3 text: 'Section Two'
+      end
+      render 'json_ui/garage/lists/autoload_section', page: page, page_index: page_index, reorder: true
+    end
+  ]
 end

data/app/views/json_ui/garage/notifications/action_cable.json.jbuilder

@@ -0,0 +1,97 @@
+json.title 'ActionCable Real-time Update'
+page = json_ui_page json
+
+# Implement a page that shows how ActionCable works in json_ui
+
+# 1. Example for list
+# column.panels_list actionCable: socket_config, width: 'matchParent', firstSection: ->(section) do
+#   section.rows objects: @messages, builder: -> (row, message, index) do
+#     render 'conversations/message', row: row, message: message, user: current_user
+#   end
+# end
+
+# page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
+#   form.fields_textarea \
+#     width: 'matchParent',
+#     label: 'Message',
+#     onKeyUp: ->(action) do
+#       action.cables_push channel: 'isTypingChannel', data: { conversationId: 1, userId: 1 }
+#     end
+# end
+
+
+# 3. Example for online status
+#    - TODO: Implement "repeat: true" in glib-web-npm
+# page.on load: ->(action) do
+#   action.timeouts_set interval: 10000, repeat: true, onTimeout: ->(subaction) do
+#     subaction.cables_push channel: 'message', event: 'online'
+#   end
+# end
+
+
+# put on app/channels/is_typing_channel.rb
+# class IsTypingChannel < Glib::Channel::IsTypingChannel
+#   self.channel_name = 'IsTypingChannel'
+# end
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+
+  channel = 'IsTypingChannel'
+  first_user = User.first
+  second_user = User.offset(1).first
+
+  scroll.panels_split width: 'matchParent', content: ->(content) do
+    content.left childViews: ->(left) do
+      left.fields_textarea \
+        width: 'matchParent',
+        label: "Messages from #{first_user.full_name}",
+        onTypeStart: lambda { |action|
+          action.cables_push \
+            channel: channel, event: 'typing',
+            payload: { status: true, user_id: first_user.id }
+        },
+        onTypeEnd: lambda { |action|
+          action.cables_push \
+            channel: channel,
+            event: 'typing',
+            payload: { status: false, user_id: first_user.id }
+        }
+      left.spacer height: 10
+
+      socket_config = {
+        channel: channel,
+        filterKey: first_user.id,
+        params: {
+          conversation: 2
+        }
+      }
+      left.label actionCable: socket_config, text: ' '
+    end
+    content.right childViews: ->(right) do
+      right.fields_textarea \
+        width: 'matchParent',
+        label: "Messages from #{second_user.full_name}",
+        onTypeStart: lambda { |action|
+          action.cables_push \
+            channel: channel, event: 'typing',
+            payload: { status: true, user_id: second_user.id }
+        },
+        onTypeEnd: lambda { |action|
+          action.cables_push \
+            channel: channel,
+            event: 'typing',
+            payload: { status: false, user_id: second_user.id }
+        }
+      right.spacer height: 10
+
+      socket_config = {
+        channel: channel,
+        filterKey: second_user.id,
+        params: {
+          conversation: 2
+        }
+      }
+      right.label actionCable: socket_config, text: ' '
+    end
+  end
+end

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

@@ -25,8 +25,12 @@ page.list firstSection: ->(section) do
       end
     end
 
-    template.thumbnail title: 'WebSocket Real-time Update', onClick: ->(action) do
+    template.thumbnail title: 'Phoenix WebSocket Real-time Update', onClick: ->(action) do
       action.windows_open url: json_ui_garage_url(path: 'notifications/web_socket')
     end
+
+    template.thumbnail title: 'ActionCable Real-time Update', onClick: ->(action) do
+      action.windows_open url: json_ui_garage_url(path: 'notifications/action_cable')
+    end
   end
 end