glib-web 0.5.5

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

@@ -0,0 +1,40 @@
+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: { 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>'
+
+    json.child! do
+      json.view 'fields/richText-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
+      end
+    end
+
+    form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+  end
+end

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

@@ -0,0 +1,70 @@
+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.spacer height: 20
+    form.h2 text: 'Basic select fields'
+    form.spacer height: 6
+    languages = {
+      'brisbane' => 'Brisbane',
+      'canberra' => 'Canberra',
+      'melbourne' => 'Melbourne',
+      'sydney' => 'Sydney',
+    }
+    form.fields_select name: 'user[city]', width: 'matchParent', label: 'Primary Language', options: languages.map { |k, v| { value: k, text: v } }, value: 'canberra'
+    form.fields_select name: 'user[cities][]', width: 'matchParent', label: 'Preferred Languages', options: languages.map { |k, v| { value: k, text: v } }, value: ['melbourne', 'sydney'], multiple: true
+
+    form.spacer height: 20
+    form.h2 text: 'Select fields with grouping'
+    form.spacer height: 6
+    form.label text: 'Applicable to select fields with many options'
+    form.spacer height: 6
+
+    languages = {
+      "East Asia" => {
+        "zh" => "Chinese",
+        "ja" => "Japanese",
+        "ko" => "Korean",
+      },
+      "Middle East" => {
+        "ar" => 'Arabic',
+        "hi" => "Hindi",
+      },
+      "Europe" => {
+        "nl" => "Dutch",
+        "en" => "English",
+        "fr" => "French",
+        "de" => "German",
+        "it" => "Italian",
+        "pt" => "Portuguese",
+        "es" => "Spanish",
+      },
+      "Eastern Europe" => {
+        "ru" => "Russian",
+      }
+    }
+    options = []
+    languages.each do |group, sub|
+      options << { type: 'label', text: group }
+      options.concat(sub.map { |k, v| { value: k, text: v } })
+      options << { type: 'divider' }
+    end
+
+    form.fields_select name: 'user[language]', width: 'matchParent', label: 'Primary Language', options: options, value: 'nl'
+    form.fields_select name: 'user[languages][]', width: 'matchParent', label: 'Primary Language', options: options, value: ['ja', 'de'], multiple: true
+
+    form.spacer height: 20
+    form.h2 text: 'Autocomplete (select with manual entry)'
+    form.spacer height: 6
+    skills = ['Singing', 'Dancing', 'Fighting']
+    form.fields_autocomplete name: 'user[skill]', width: 'matchParent', label: 'Skill', options: skills, value: 'Singing'
+    form.fields_autocomplete name: 'user[skills][]', width: 'matchParent', label: 'Skills', options: skills, value: ['Dancing', 'Fencing'], multiple: true
+
+    form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+
+  end
+
+end

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

@@ -0,0 +1,88 @@
+json.title 'Forms'
+
+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: glib_json_padding_body, childViews: ->(form) do
+  form.h1 text: 'Text'
+  form.fields_password name: 'user[text1]', width: 'matchParent', label: 'Type "show"'
+  form.label text: 'Typed', showIf: {
+    "==": [
+      {
+        "var": 'user[text1]'
+      },
+      'show'
+    ]
+  }
+
+  form.spacer height: 20
+  form.h1 text: 'Textarea'
+  form.fields_textarea name: 'user[textarea1]', width: 'matchParent', label: 'Type "show"'
+  form.label text: 'Typed', showIf: {
+    "==": [
+      {
+        "var": 'user[textarea1]'
+      },
+      'show'
+    ]
+  }
+
+  form.spacer height: 20
+  form.h1 text: 'Check'
+  form.fields_check name: 'user[check1]', value: 'on', label: 'Show text'
+  form.spacer height: 10
+  form.label text: 'Checked', showIf: {
+    "==": [
+      {
+        "var": 'user[check1]'
+      },
+      'on'
+    ]
+  }
+
+  form.spacer height: 20
+  form.h1 text: 'Radio Group'
+  form.fields_radioGroup name: 'user[radio1]', value: 'F', childViews: ->(group) do
+    group.fields_radio value: 'show', label: 'Show'
+    group.fields_radio value: 'hide', label: 'Hide'
+  end
+  form.spacer height: 10
+  form.label text: 'Chosen', showIf: {
+    "==": [
+      {
+        "var": 'user[radio1]'
+      },
+      'show'
+    ]
+  }
+
+  form.spacer height: 20
+  form.h1 text: 'Select'
+  options = ['show', 'hide']
+  form.fields_select name: 'user[select1]', width: 'matchParent', label: 'Select "show"', options: options
+  form.label text: 'Selected', showIf: {
+    "==": [
+      {
+        "var": 'user[select1]'
+      },
+      'show'
+    ]
+  }
+
+  form.spacer height: 20
+  form.h1 text: 'Combo1'
+  form.label text: 'Select the same option on both the radio and select fields above'
+  form.spacer height: 10
+  form.h3 text: 'Same!', showIf: {
+    "==": [
+      {
+        "var": 'user[radio1]'
+      },
+      {
+        "var": 'user[select1]'
+      },
+    ]
+  }
+
+  form.spacer height: 40
+end

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

@@ -0,0 +1,32 @@
+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: 'Search', 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_stripeToken name: 'user[stripe_token_outlined]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'outlined'
+
+    form.spacer height: 14
+    form.fields_stripeToken name: 'user[stripe_token_individual]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx', styleClass: 'individual'
+
+    form.spacer height: 14
+    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
+
+end

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

@@ -0,0 +1,17 @@
+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'
+      group.spacer height: 6
+      group.fields_radio value: 'close_reload', label: 'close+reload - useful for form submission in mobile apps'
+      group.fields_radio value: 'open', label: 'open - useful for form submission in web app'
+      group.fields_radio value: 'close_alert', label: 'close+alert - useful for non-model form (e.g. contact us) in both mobile/web'
+      group.fields_radio value: 'alert_close', label: 'alert+close - useful for non-model form (e.g. contact us) in both mobile/web'
+    end
+    form.button text: 'Submit', onClick: ->(action) { action.forms_submit }
+  end
+end

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

@@ -0,0 +1,24 @@
+
+flow = params.require(:user)[:flow] if params[:user]
+json_ui_response json do |action|
+  if !flow.present?
+    action.dialogs_alert message: 'Please enter all required information'
+  else
+    case flow
+    when 'close_reload'
+      action.windows_close onClose: ->(action) do
+        action.windows_reload
+      end
+    when 'close_alert'
+      action.windows_close onClose: ->(action) do
+        action.dialogs_alert message: 'Thanks for the submission!'
+      end
+    when 'alert_close'
+      action.dialogs_alert message: 'Thanks for the submission!', onClose: ->(action) do
+        action.windows_close
+      end
+    when 'open'
+      action.windows_open url: json_ui_garage_url(path: 'forms/index')
+    end
+  end
+end

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

@@ -0,0 +1,63 @@
+json.title 'Forms'
+
+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.panels_form width: 'matchParent', styleClasses: ['card', 'outlined'], padding: glib_json_padding_body, url: json_ui_garage_url(path: 'forms/submission_indicator_post'), method: 'post', childViews: ->(form) do
+    form.label text: 'These buttons get disabled on submit'
+    form.spacer height: 14
+    form.button text: 'Normal Button', onClick: ->(action) { action.forms_submit }
+    form.spacer height: 14
+    form.fields_submit text: 'Submit Button'
+
+    form.fab icon: 'send', onClick: ->(action) { action.forms_submit }
+  end
+
+  scroll.spacer height: 14
+
+  scroll.panels_form width: 'matchParent', styleClasses: ['card', 'outlined'], padding: glib_json_padding_body, url: json_ui_garage_url(path: 'forms/submission_indicator_post', mode: 'slow_open'), method: 'post', childViews: ->(form) do
+    form.fields_submit text: 'Submit button with slow window/open'
+  end
+
+  scroll.spacer height: 14
+
+  scroll.panels_form width: 'matchParent', styleClasses: ['card', 'outlined'], padding: glib_json_padding_body, url: json_ui_garage_url(path: 'forms/submission_indicator_post', mode: 'slow_openWeb'), method: 'post', childViews: ->(form) do
+    form.fields_submit text: 'Submit button with slow window/openWeb'
+  end
+
+  scroll.spacer height: 14
+
+  scroll.panels_form width: 'matchParent', styleClasses: ['card', 'outlined'], padding: glib_json_padding_body, url: json_ui_garage_url(path: 'forms/submission_indicator_post', mode: 'timeout_once'), method: 'post', childViews: ->(form) do
+    form.fields_submit text: 'Submit Button with timeouts/set once'
+  end
+
+  scroll.spacer height: 14
+
+  scroll.panels_form width: 'matchParent', styleClasses: ['card', 'outlined'], padding: glib_json_padding_body, url: json_ui_garage_url(path: 'forms/submission_indicator_post', mode: 'timeout_chain', count: 0), method: 'post', childViews: ->(form) do
+    form.fields_submit text: 'Submit Button with timeouts/set chain'
+  end
+
+  # This needs to be long enough that the FAB is roughly at the bottom of a mobile screen.
+  # Ideally the spacer can expand dynamically depending on available space.
+  scroll.spacer height: 400
+
+end
+
+# page.form url: json_ui_garage_url(path: 'forms/submission_indicator_post'), method: 'post', padding: { top: 12, left: 20, right: 20, bottom: 12 }, childViews: ->(form) do
+#   form.label text: 'These buttons get disabled on submit'
+#   form.spacer height: 10
+#   form.button text: 'Normal Button', onClick: ->(action) { action.forms_submit }
+#   form.spacer height: 10
+#   form.fields_submit text: 'Submit Button'
+
+#   # This needs to be long enough that the FAB is roughly at the bottom of a mobile screen.
+#   # Ideally the spacer can expand dynamically depending on available space.
+#   form.spacer height: 400
+
+#   form.fab icon: 'send', onClick: ->(action) { action.forms_submit }
+# end
+
+# page.form url: json_ui_garage_url(path: 'forms/submission_indicator_post', timeout: true), method: 'post', padding: { top: 12, left: 20, right: 20, bottom: 12 }, childViews: ->(form) do
+#   form.fields_submit text: 'Submit Button with Timeout'
+# end

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

@@ -0,0 +1,25 @@
+sleep 0.5
+
+json_ui_response json do |action|
+  case params[:mode]
+  when 'timeout_once'
+    action.timeouts_set interval: 2000, onTimeout: ->(subaction) do
+      subaction.dialogs_alert message: 'Success!'
+    end
+  when 'timeout_chain'
+    count = params[:count].to_i
+    if count > 3
+      action.dialogs_alert message: 'Success!'
+    else
+      action.timeouts_set interval: 500, onTimeout: ->(subaction) do
+        subaction.http_post url: json_ui_garage_url(path: 'forms/submission_indicator_post', mode: 'timeout_chain', count: count + 1)
+      end
+    end
+  when 'slow_open'
+    action.windows_open url: json_ui_garage_url(path: 'home/slow')
+  when 'slow_openWeb'
+    action.windows_openWeb url: 'https://www.google.com'
+  else
+    action.dialogs_alert message: 'Success!'
+  end
+end

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

@@ -0,0 +1,22 @@
+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.fields_email name: 'user[email]', width: 'matchParent', label: 'Email'
+    form.fields_url name: 'user[url]', width: 'matchParent', label: 'URL'
+    form.fields_number name: 'user[number]', width: 'matchParent', label: 'Number', validation: { required: { message: 'Required' } }
+    form.fields_password name: 'user[password]', width: 'matchParent', label: 'Password'
+    form.fields_textarea name: 'user[textarea]', width: 'matchParent', label: 'Textarea with maxLength', maxLength: 50, validation: { required: { message: 'Required' } }
+
+    options = ['male', 'female'].map { |i| { text: i.humanize, value: i } }
+    form.fields_select name: 'user[gender]', width: 'matchParent', label: 'Gender', validation: { required: { message: 'Required' } }, options: options
+
+    form.spacer height: 20
+    form.fields_stripeToken name: 'user[stripe_token]', width: 'matchParent', publicKey: 'pk_test_TYooMQauvdEDq54NiTphI7jx'
+
+    form.spacer height: 30
+    form.fields_submit text: 'Submit'
+  end
+end

data/app/views/json_ui/garage/home/blank.json.jbuilder

@@ -0,0 +1,11 @@
+sleep 0.5
+
+json.title 'Menu'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: false
+
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+    scroll.label text: 'Blank page'
+  end
+end

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

@@ -0,0 +1,32 @@
+json.title 'Menu'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
+  
+  page.list firstSection: ->(section) do
+    section.rows builder: ->(template) do
+      template.thumbnail title: 'Pages', onClick: ->(action) do 
+        action.windows_open url: json_ui_garage_url(path: 'pages/index')
+      end
+      template.thumbnail title: 'Lists', onClick: ->(action) do 
+        action.windows_open url: json_ui_garage_url(path: 'lists/index')
+      end
+      template.thumbnail title: 'Forms', onClick: ->(action) do 
+        action.windows_open url: json_ui_garage_url(path: 'forms/index')
+      end
+      template.thumbnail title: 'Panels', onClick: ->(action) do 
+        action.windows_open url: json_ui_garage_url(path: 'panels/index')
+      end
+      template.thumbnail title: 'Views', onClick: ->(action) do 
+        action.windows_open url: json_ui_garage_url(path: 'views/index')
+      end
+      template.thumbnail title: 'Actions', onClick: ->(action) do 
+        action.windows_open url: json_ui_garage_url(path: 'actions/index')
+      end
+      template.thumbnail title: 'Tables (Web Only)', onClick: ->(action) do 
+        action.windows_open url: json_ui_garage_url(path: 'tables/index')
+      end
+    end
+
+  end
+end

data/app/views/json_ui/garage/home/slow.json.jbuilder

@@ -0,0 +1,11 @@
+sleep 2.0
+
+json.title 'Menu'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: false
+
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+    scroll.label text: 'Blank page'
+  end
+end