glib-web 0.5.5

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

@@ -0,0 +1,7 @@
+info = "Method: #{request.method}\nForm Data:\n{\n"
+params.require(:user).each do |k, v|
+  value = v.is_a?(String) ? '"' + v + '"' : v
+  info += "  #{k} => #{value}\n"
+end
+info += "}"
+action.dialogs_alert message: info

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

@@ -0,0 +1,34 @@
+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/basic_post'), method: 'post', padding: glib_json_padding_body, childViews: ->(form) do
+    form.fields_text name: 'user[name]', width: 'matchParent', label: 'Name'
+    form.fields_password name: 'user[password]', width: 'matchParent', label: 'Password'
+
+    # form.panels_split width: 'matchParent', leftViews: ->(split) do
+    #   if params[:mode] == 'dialog'
+    #     split.button styleClass: 'link', text: 'cancel', onClick: ->(action) { action.dialogs_close }
+    #   end
+    # end, rightViews: ->(split) do
+    #   split.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    # end
+
+    form.panels_split width: 'matchParent', content: ->(split) do
+      split.left childViews: ->(left) do
+        if params[:mode] == 'dialog'
+          left.button styleClass: 'link', text: 'cancel', onClick: ->(action) { action.dialogs_close }
+        end
+      end
+      split.right childViews: ->(right) do
+        right.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+      end
+    end
+
+  end
+  # , paramNameForFormData: 'formData', onSubmit: ->(action) do
+  #   action.http_post url: json_ui_garage_url(path: 'forms/generic_post')
+  # end
+
+end

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

@@ -0,0 +1,8 @@
+name, _ = params.require(:user).values_at(:name)
+json_ui_response json do |action|
+  if !name.present?
+    action.dialogs_alert message: 'Please enter name'
+  else
+    render "#{@path_prefix}/forms/alert_post_data", action: action
+  end
+end

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

@@ -0,0 +1,44 @@
+json.title 'Forms'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  page.scroll childViews: ->(scroll) do
+
+    scroll.panels_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: 'Check Group'
+      form.fields_checkGroup name: 'user[skills][]', uncheckValue: 1, childViews: ->(group) do
+        form.fields_check value: 2, label: 'Game Development'
+        form.fields_check value: 3, label: 'Web Development'
+        form.fields_check value: 4, label: 'Mobile Development'
+      end
+
+      form.spacer height: 20
+      form.h2 text: 'Rating'
+      form.spacer height: 6
+      form.fields_radioGroup name: 'user[rating1][]', iconOfSelected: 'star', iconOfBeforeSelected: 'star', iconOfAfterSelected: 'star_border', childViews: ->(panel) do
+        panel.panels_horizontal childViews: ->(panel) do
+          panel.fields_radio value: 1
+          panel.fields_radio value: 2
+          panel.fields_radio value: 3
+          panel.fields_radio value: 4
+          panel.fields_radio value: 5
+        end
+      end
+      form.fields_radioGroup name: 'user[rating2][]', iconOfSelected: 'star', iconOfBeforeSelected: 'star', iconOfAfterSelected: 'star_border', value: 1, childViews: ->(panel) do
+        panel.panels_horizontal childViews: ->(panel) do
+          panel.fields_radio value: 1
+          panel.fields_radio value: 2
+          panel.fields_radio value: 3
+          panel.fields_radio value: 4
+          panel.fields_radio value: 5
+        end
+      end
+  
+      form.spacer height: 20
+      form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    end
+    
+  end
+end

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

@@ -0,0 +1,41 @@
+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: 'Dynamic Group'
+    form.spacer height: 6
+
+    value = [
+      {
+        'question': 'Punctuality',
+        'type': 'rating',
+        'enabled': '1'
+      },
+      {
+        'question': 'Quality of work',
+        'type': 'rating'
+      },
+      {
+        'question': 'Satisfied?',
+        'type': 'yes_no'
+      }
+    ]
+
+    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', 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.fields_submit text: 'Submit'
+  end
+end

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

@@ -0,0 +1,25 @@
+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: 'Dynamic Select'
+    form.spacer height: 6
+
+    form.fields_dynamicSelect name: 'user[primary_language]', width: 'matchParent', label: 'Primary Language',
+      # value: 'id3',
+      selectedOptions: [ { value: 'id3', text: 'Item 3' } ],
+      url: json_ui_garage_url(path: 'forms/dynamic_select_data')
+
+    form.spacer height: 14
+    form.fields_dynamicSelect name: 'user[preferred_languages][]', width: 'matchParent', label: 'Preferred Languages', 
+      # value: ['id3', 'id5'], multiple: true,
+      selectedOptions: [ { value: 'id3', text: 'Item 3' }, { value: 'id5', text: 'Item 5' } ],
+      url: json_ui_garage_url(path: 'forms/dynamic_select_data'),
+      multiple: true
+
+    form.spacer height: 14
+    form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+  end
+end

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

@@ -0,0 +1,38 @@
+
+sleep 0.5
+
+page = params[:page].to_i
+if page < 2
+  json.nextPageUrl json_ui_garage_url(path: 'forms/dynamic_select_data', page: page + 1)
+end
+
+# 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|
+    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

@@ -0,0 +1,58 @@
+json.title 'Forms'
+
+options = {
+  url: json_ui_garage_url(path: 'forms/generic_post'),
+  method: 'post',
+  padding: { top: 12, left: 20, right: 20, bottom: 12 }
+}
+
+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: '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: 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: '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 }
+  end)
+end
+
+
+# json_body_with_form json, nil, nil, options do
+#   json.child! do
+#     json.view 'fields/file-v1'
+#     json.name 'user[photo]'
+#     json.width 'matchParent'
+#     json.label 'Photo'
+
+#     json.value 'VALUE_OF_THE_PREVIOUS_IMAGE_WHICH_IS_USEFUL_WHEN_UPDATING_EXISTING_MODEL'
+
+#     json.accepts "image/*"
+#     # json.s3_bucket 'BUCKET_NAME'
+#     # json.s3_path_prefix 'uploads/images'
+#     json.s3_direct_upload_url rails_direct_uploads_path
+
+#     # This is for security so we don't have to reveal key/secret in the json api
+#     # json.s3_signature_url 'URL_TO_OUR_SERVER_TO_GET_GENERATED_SIGNATURE'
+
+#     json.file_size_limit 5000  # 5 MB
+#     json.file_size_limit_alert_text 'Too big!'
+#   end
+
+#   json.child! do
+#     json.view 'button-v1'
+#     json.text 'Submit'
+#     json.onClick do
+#       json.action 'forms/submit-v1'
+#     end
+#   end
+# end

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

@@ -0,0 +1,31 @@
+json.title 'Forms'
+
+# footer = Jbuilder.new do |json|
+#   json.padding(top: 12, left: 20, right: 80, bottom: 12)
+#   json.backgroundColor '#b3bac2'
+#   json.subviews do
+#     json.child! do
+#       json.view 'label-v1'
+#       json.text 'Demonstrates the use Floating Action Button on a form with footer'
+#     end
+#   end
+# end
+
+options = {
+  url: json_ui_garage_url(path: 'forms/generic_post'),
+  method: 'post',
+  padding: { top: 12, left: 20, right: 20, bottom: 12 }
+}
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  page.form options.merge(childViews: ->(form) do
+    form.label text: 'Demonstrates the use Floating Action Button on a form with footer'
+    30.times do |i|
+      form.fields_text name: "user[field#{i}]", width: 'matchParent', label: "Field#{i}"
+    end
+    form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    form.fab icon: 'send', onClick: ->(action) { action.forms_submit }
+  end)
+end

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

@@ -0,0 +1,3 @@
+json_ui_response json do |action|
+  render "#{@path_prefix}/forms/alert_post_data", action: action
+end

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

@@ -0,0 +1,28 @@
+json.title 'Forms'
+
+data = params[:user] || {}
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  page.form url: json_ui_garage_url(path: 'forms/get_request'), method: 'get', padding: glib_json_padding_body, childViews: ->(form) do
+    # TODO: Potential improvement: 
+    # Use `reload` behaviour instead of `open` (i.e. don't keep adding URL to history).
+    # Probably introduce a flag to panels_form so developer can enable/disable this behaviour.
+    form.h3 text: "Hello #{ data[:name] }"
+    form.spacer height: 6
+    form.label text: 'On the web, upon submit, URL needs to change on the browser'
+    form.spacer height: 10
+    form.fields_text name: 'user[name]', width: 'matchParent', label: 'Name'
+    
+    # form.panels_split width: 'matchParent', rightViews: ->(split) do
+    #   split.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+    # end
+    
+    form.panels_split width: 'matchParent', content: ->(split) do
+      split.right childViews: ->(right) do
+        right.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+      end
+    end
+  end
+end

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

@@ -0,0 +1,101 @@
+json.title 'Forms'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
+
+  page.list sections: [
+    ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Submission Logics'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Basic Logic', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/basic')
+        end
+        template.thumbnail title: "Submission Flow (timestamp: #{DateTime.current.to_i})", onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/submission_flow')
+        end
+        template.thumbnail title: "Submission Indicator", onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/submission_indicator')
+        end
+        template.thumbnail title: 'GET Request', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/get_request')
+        end
+
+      end
+    end, ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Form Logics'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Text Validation', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/text_validation')
+        end
+        template.thumbnail title: 'Show/Hide', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/show_hide')
+        end
+
+      end
+    end, ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Form Fields'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Pickers', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/pickers')
+        end
+        template.thumbnail title: 'Select Fields', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/selects')
+        end
+        template.thumbnail title: 'File Upload', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/file_upload')
+        end
+        template.thumbnail title: 'Floating Submit', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/floating_submit')
+        end
+
+      end
+    end, ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Styling'
+      end
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Text Boxes', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/styled_boxes')
+        end
+      end
+    end, ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Web Only'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Rich Text Editor', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/rich_text')
+        end
+
+      end
+    end, ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Experimental (not required yet)'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Dynamic Group', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/dynamic_group')
+        end
+        template.thumbnail title: 'Dynamic Select', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/dynamic_select')
+        end
+        template.thumbnail title: 'Checkboxes', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'forms/checkboxes')
+        end
+
+      end
+    end
+  ]
+
+end

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

@@ -0,0 +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_latLong name: 'user[address]', width: 'matchParent', label: 'Type an address', value: 'Sydney Harbour Bridge',
+      latitudeField: { name: 'user[latitude]', label: 'Lat', value: -33.8523063, readOnly: true },
+      longitudeField: { name: 'user[longitude]', label: 'Long', value: 151.21078710000006, readOnly: true }
+
+    form.spacer height: 20
+    form.fields_submit text: 'Submit'
+
+  end
+
+end