glib-web 0.5.2 → 0.5.8

data/app/views/json_ui/garage/actions/dialogs_oauth_post.json.jbuilder

@@ -0,0 +1,6 @@
+facebook_graph = Koala::Facebook::API.new(params[:credentials][:token])
+profile = facebook_graph.get_object('me')
+
+json_ui_response json do |action|
+  action.dialogs_alert message: profile
+end

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

@@ -5,6 +5,8 @@ json_ui_page json do |page|
 
   page.list sections: [
     ->(section) do
+      render "#{@path_prefix}/actions/reload", section: section
+    end, ->(section) do
       render "#{@path_prefix}/actions/dialogs", section: section
     end, ->(section) do
       render "#{@path_prefix}/actions/snackbars", section: section
@@ -16,8 +18,6 @@ json_ui_page json do |page|
       render "#{@path_prefix}/actions/timeouts", section: section
     end, ->(section) do
       render "#{@path_prefix}/actions/http", section: section
-    end, ->(section) do
-      render "#{@path_prefix}/actions/reload", section: section
     end
   ]
 end

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

@@ -10,7 +10,8 @@ json_ui_page json do |page|
     value = [
       {
         'question': 'Punctuality',
-        'type': 'rating'
+        'type': 'rating',
+        'enabled': '1'
       },
       {
         'question': 'Quality of work',
@@ -21,30 +22,20 @@ json_ui_page json do |page|
         'type': 'yes_no'
       }
     ]
-    # form.fields_dynamicGroup width: 'matchParent', name: 'user[evaluation]', value: value, groupTitlePrefix: 'Entry', groupTemplateViews: ->(group) do
-    #   group.spacer height: 10
-    #   group.fields_text width: 'matchParent', name: 'question', label: 'Question'
-    #   group.fields_text width: 'matchParent', name: 'type', label: 'Answer type'
-    # end
-
-    # form.fields_dynamicGroup width: 'matchParent', name: 'user[evaluation]', value: value, group: ->(group) do
-    #   group.titlePrefix 'Entry'
-    #   group.template childViews: ->(template) do
-    #     template.spacer height: 10
-    #     template.fields_text width: 'matchParent', name: 'question', label: 'Question'
-    #     template.fields_text width: 'matchParent', name: 'type', label: 'Answer type'
-    #   end
-    # end
 
     form.fields_dynamicGroup width: 'matchParent', name: 'user[evaluation]', value: value, titlePrefix: 'Entry', content: ->(group) do
       group.template padding: { left: 32 }, childViews: ->(template) do
         template.spacer height: 10
-        template.fields_text width: 'matchParent', name: 'question', label: 'Question'
-        template.fields_text width: 'matchParent', name: 'type', label: 'Answer type'
+        template.fields_text width: 'matchParent', name: 'question', label: 'Question', placeholder: 'Question'
+        options = [ :rating, :yes_no ]
+        template.fields_select width: 'matchParent', name: 'type', label: 'Answer Type', placeholder: 'Answer Type', options: options.map { |o| { text: o.to_s.humanize, value: o } }
+        template.fields_check width: 'matchParent', name: 'enabled', label: 'Enable', checkValue: '1'
+
+        template.spacer height: 14
       end
     end
 
     form.spacer height: 20
-    form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    form.fields_submit text: 'Submit'
   end
 end

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

@@ -6,18 +6,33 @@ if page < 2
   json.nextPageUrl json_ui_garage_url(path: 'forms/dynamic_select_data', page: page + 1)
 end
 
-json.rows do
+# json.rows do
 
+#   count_per_page = 20
+#   count_per_page.times do |i|
+#     json.child! do
+#       index = page * count_per_page + i
+#       json.template 'thumbnail'
+#       json.title "City #{index} (#{params[:q]})"
+#       json.subtitle "State #{index}"
+#       json.subsubtitle "Country #{index}"
+#       json.value "id#{index}"
+#       json.text "Item #{index}"
+#     end
+#   end
+# end
+
+section = json_ui_section json
+section.rows builder: ->(row) do
   count_per_page = 20
   count_per_page.times do |i|
-    json.child! do
-      index = page * count_per_page + i
-      json.template 'thumbnail'
-      json.title "City #{index} (#{params[:q]})"
-      json.subtitle "State #{index}"
-      json.subsubtitle "Country #{index}"
-      json.value "id#{index}"
-      json.text "Item #{index}"
-    end
+    index = page * count_per_page + i
+    row.custom title: "City #{index} (#{params[:q]})",
+      subtitle: "State #{index}",
+      subsubtitle: "Country #{index}",
+      extra: {
+        value: "id#{index}",
+        text: "Item #{index}"
+      }
   end
 end

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

@@ -8,18 +8,18 @@ options = {
 
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
-  
+
   page.form options.merge(childViews: ->(form) do
     rules1 = { fileType: "image/*", maxFileSize: 5000 }
     rules2 = { fileType: "image/*", maxFileSize: 1, fileTypeErrorText: 'Invalid!', maxFileSizeErrorText: 'Too big!' }
-    form.fields_file name: 'user[photo][]', width: 'matchParent', label: 'Photo', accepts: rules1, directUploadUrl: rails_direct_uploads_url, 
+    form.fields_file name: 'user[photo][]', width: 'matchParent', label: 'Landscape Photo', accepts: rules1, directUploadUrl: rails_direct_uploads_url, 
       value: 'eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBFQT09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--193dc0d939b9558fc4973fafbba91d989cbb04d4',
       fileUrl: 'https://imageserver-demo.herokuapp.com/image/itinerarybuilder-demo/o6CKzNt67PWnkPdUEnWMt7pr?h=100&w=100',
       fileTitle: '1 month ago',
-      placeholderView: { type: 'image', width: 100, height: 100 }
+      placeholderView: { type: 'image', width: 100, height: 75, url: 'https://www.atms.com.au/wp-content/uploads/2019/10/placeholder-1-1024x683.png?x93630' }
 
-    form.fields_file name: 'user[photo][]', width: 'matchParent', label: 'Photo', accepts: rules2, directUploadUrl: rails_direct_uploads_url,
-      placeholderView: { type: 'avatar', width: 100, height: 100 }
+    form.fields_file name: 'user[photo][]', width: 'matchParent', label: 'Avatar', accepts: rules2, directUploadUrl: rails_direct_uploads_url,
+      placeholderView: { type: 'avatar', width: 100, height: 100, url: 'data:image/jpeg;base64,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' }
 
     form.fields_submit text: 'Submit'
     # form.button text: 'Submit', onClick: ->(action) { action.forms_submit }

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

@@ -8,14 +8,16 @@ json_ui_page json do |page|
     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+', uncheckValue: '0-16', label: 'I am over 16 (has default value)'
-    form.fields_check name: 'user[employer]', value: 1, label: 'I am an employer (no default value)'
+    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'
@@ -36,7 +38,8 @@ json_ui_page json do |page|
       latitudeField: { name: 'user[latitude]', label: 'Lat', value: -33.8523063, readOnly: true },
       longitudeField: { name: 'user[longitude]', label: 'Long', value: 151.21078710000006, readOnly: true }
 
-    form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    form.spacer height: 20
+    form.fields_submit text: 'Submit'
 
   end
 

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

@@ -4,11 +4,14 @@ json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
 
   page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
-    form.fields_text name: 'user[name]', width: 'matchParent', label: 'Search', styleClasses: ['outlined', 'rounded']
+    form.fields_text name: 'user[name]', width: 'matchParent', label: 'Search', placeholder: 'Enter a keyword', styleClasses: ['outlined', 'rounded']
 
     form.spacer height: 14
     form.fields_password name: 'user[password]', width: 'matchParent', label: 'Password', placeholder: 'Type your password', styleClass: 'outlined'
 
+    form.spacer height: 14
+    form.fields_textarea name: 'user[bio]', width: 'matchParent', label: 'Bio', placeholder: 'Enter your bio', styleClasses: ['outlined']
+
     form.spacer height: 14
     form.fields_stripeToken name: 'user[stripe_token_outlined]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'outlined'
 

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

@@ -1,10 +1,20 @@
-json.rows do
+
+# json.rows do
+#   batch_count = 30
+#   batch_count.times do |i|
+#     index = page * batch_count + i
+#     json.child! do
+#       json.template 'thumbnail'
+#       json.title "Item #{index}"
+#     end
+#   end
+# end
+
+section = json_ui_section json
+section.rows builder: ->(row) do
   batch_count = 30
   batch_count.times do |i|
     index = page * batch_count + i
-    json.child! do
-      json.template 'thumbnail'
-      json.title "Item #{index}"
-    end
+    row.thumbnail title: "Item #{index}"
   end
 end

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

@@ -1,23 +1,5 @@
 json.title 'Notifications'
 
-# json.ws({
-#   "socket" => {
-#     "endpoint" => "/socket/websocket",
-#     "params" => {
-#       "vsn": "2.0.0"
-#     }
-#   },
-#   # "topic" => "room:30",
-#   # "event" => "comments_updated",
-#   "topic" => "links",
-#   "event" => "new_link_added",
-#   "header" => {
-#     "user_id" => 2,
-#     "prev_item_id" => nil,
-#     "last_item_id" => nil
-#   }
-# })
-
 page = json_ui_page json
 render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
 
@@ -31,31 +13,6 @@ page.list firstSection: ->(section) do
 
     template.thumbnail title: 'WebSocket Real-time Update', onClick: ->(action) do
       action.windows_open url: json_ui_garage_url(path: 'notifications/web_socket')
-      # dialogs_notification title: 'Hello World', message: 'This is a notification', onClick: ->(subaction) do
-      #   subaction.dialogs_alert message: 'Perform action'
-      # end
     end
-
-    # template.thumbnail title: 'Send WebSocket Notification', onClick: ->(action) do
-    #   json.action "ws/push"
-    #   json.topic "links"
-    #   json.event "new_link"
-    #   json.payload({
-    #     "club_id": "2",
-    #     "room_id": "30",
-    #     "user_id": "2"
-    #       #  title: "TITLE",
-    #       #  url: "URL"
-    #   })
-
-    #     # "topic": "room:30",
-    #     # "event": "create_comment",
-    #     # "payload": {
-    #     #   "club_id": "2",
-    #     #   "room_id": "30",
-    #     #   "user_id": "2"
-    #     # }
-
-    # end
   end
 end

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

@@ -14,7 +14,7 @@ json.ws({
   # "topic" => "room:30",
   # "event" => "comments_updated",
   "topic" => "links",
-  "event" => "new_link_added",
+  "events" => ["new_link_added"],
   "header" => {
     "user_id" => 2,
     "prev_item_id" => nil,
@@ -23,31 +23,29 @@ json.ws({
 })
 
 page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: glib_json_padding_body, paramNameForFormData: 'formData', onSubmit: ->(action) do
-  # action.dialogs_alert
-  
-    json.action "ws/push"
-    json.topic "links"
-    json.event "new_link"
-    json.payload({
-      "club_id": "2",
-      "room_id": "30",
-      "user_id": "2"
-        #  title: "TITLE",
-        #  url: "URL"
-    })
-
-      # "topic": "room:30",
-      # "event": "create_comment",
-      # "payload": {
-      #   "club_id": "2",
-      #   "room_id": "30",
-      #   "user_id": "2"
-      # }
+  json.action "ws/push"
+  json.topic "links"
+  json.event "new_link"
+  json.payload({
+    "club_id": "2",
+    "room_id": "30",
+    "user_id": "2"
+      #  title: "TITLE",
+      #  url: "URL"
+  })
 
 end, childViews: ->(form) do
+  form.spacer height: 14
+  form.label text: "Message: #{params[:message]}"
+  form.spacer height: 14
+
   form.fields_text name: 'user[name]', width: 'matchParent', label: 'Name'
+
+  # TODO: Change this to radio for selecting alert vs reload response
   form.fields_password name: 'user[password]', width: 'matchParent', label: 'Password'
   
+  form.fields_hidden name: 'baseUrl', width: 'matchParent', value: json_ui_garage_url(path: 'notifications/web_socket')
+
   form.panels_split width: 'matchParent', content: ->(split) do
     # split.left childViews: ->(left) do
     #   if params[:mode] == 'dialog'

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

@@ -41,6 +41,17 @@ json_ui_page json do |page|
           action.windows_open url: json_ui_garage_url(path: 'pages/full_width')
         end
       end
+    end,
+    ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Misc (Web Only)'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Nested Scroll', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/nested_scroll')
+        end
+      end
     end
   ]
 

data/app/views/json_ui/garage/pages/layout.json.jbuilder

@@ -1,19 +1,18 @@
 json.title 'Pages'
 
-json_ui_page json do |page|
-  render "#{@path_prefix}/nav_menu", json: json, page: page
-  
-  page.header padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(header) do
-    header.h1 text: 'Header'
-  end
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
 
-  page.footer padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(footer) do
-    footer.h1 text: 'Footer'
-  end
+page.header padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(header) do
+  header.h1 text: 'Header'
+end
+
+page.footer padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(footer) do
+  footer.h1 text: 'Footer'
+end
 
-  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
-    (1..100).each do |index|
-      scroll.label text: 'Content'
-    end
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  (1..100).each do |index|
+    scroll.label text: 'Content'
   end
 end