glib-web 0.5.4 → 0.5.11

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/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/show_hide.json.jbuilder

@@ -3,7 +3,7 @@ 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
+page.form url: json_ui_garage_url(path: 'forms/generic_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: {
@@ -29,7 +29,7 @@ page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', pad
 
   form.spacer height: 20
   form.h1 text: 'Check'
-  form.fields_check name: 'user[check1]', value: 'on', label: 'Show text'
+  form.fields_check name: 'user[check1]', checkValue: 'on', label: 'Show text'
   form.spacer height: 10
   form.label text: 'Checked', showIf: {
     "==": [
@@ -70,7 +70,7 @@ page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', pad
   }
 
   form.spacer height: 20
-  form.h1 text: 'Combo1'
+  form.h1 text: 'Combined conditions'
   form.label text: 'Select the same option on both the radio and select fields above'
   form.spacer height: 10
   form.h3 text: 'Same!', showIf: {
@@ -84,5 +84,22 @@ page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', pad
     ]
   }
 
+  form.spacer height: 20
+  form.h1 text: 'Show/hide another field'
+  form.label text: ''
+  form.spacer height: 10
+  form.fields_check name: 'user[check2]', checkValue: 'on', label: 'Show field'
+  form.spacer height: 10
+  form.fields_text width: 'matchParent', label: 'Comment (optional)', name: 'user[comment]', value: 'This field can be submitted when it is hidden, but it is not necessary (i.e. up to the app)', showIf: {
+    "==": [
+      {
+        "var": 'user[check2]'
+      },
+      'on'
+    ]
+  }
+
+  form.spacer height: 20
+  form.fields_submit text: 'Submit'
   form.spacer height: 40
 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/forms/text_validation.json.jbuilder

@@ -7,7 +7,7 @@ json_ui_page json do |page|
     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_password name: 'user[password]', width: 'matchParent', label: 'Password', hint: 'Should contain at least 6 characters'
     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 } }

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

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

@@ -1,21 +1,33 @@
 json.title 'Pages'
 
-json_ui_page json do |page|
-  render "#{@path_prefix}/nav_menu", json: json, page: page
-  
-  page.rightNavButtons do |menu|
-    menu.button icon: 'search', onClick: ->(action) do 
-      action.dialogs_alert message: 'Perform some action'
-    end
-    menu.button icon: { name: 'star', badge: { text: '1', backgroundColor: '#ff0000' } }, onClick: ->(action) do 
-      action.dialogs_alert message: 'Perform some action'
-    end
-    menu.button icon: { name: 'map', badge: '2' }, onClick: ->(action) do 
-      action.dialogs_alert message: 'Perform some action'
-    end
-  end
+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.label text: 'See the right menu buttons on the nav bar'
+page.navBar backgroundColor: '#a8c4e3', rightButtons: ->(menu) do
+  menu.button icon: 'search', onClick: ->(action) do 
+    action.dialogs_alert message: 'Perform some action'
+  end
+  menu.button icon: { name: 'star', badge: { text: '1', backgroundColor: '#ff0000' } }, onClick: ->(action) do 
+    action.dialogs_alert message: 'Perform some action'
+  end
+  menu.button icon: { name: 'map', badge: '2' }, onClick: ->(action) do 
+    action.dialogs_alert message: 'Perform some action'
   end
 end
+
+# page.rightNavButtons do |menu|
+#   menu.button icon: 'search', onClick: ->(action) do 
+#     action.dialogs_alert message: 'Perform some action'
+#   end
+#   menu.button icon: { name: 'star', badge: { text: '1', backgroundColor: '#ff0000' } }, onClick: ->(action) do 
+#     action.dialogs_alert message: 'Perform some action'
+#   end
+#   menu.button icon: { name: 'map', badge: '2' }, onClick: ->(action) do 
+#     action.dialogs_alert message: 'Perform some action'
+#   end
+# end
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  scroll.label text: 'See the right menu buttons on the nav bar'
+end

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

@@ -0,0 +1,40 @@
+json.title 'Pages'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+# page.template 'fullWidth'
+
+page.header childViews: ->(header) do
+  header.panels_vertical width: 'matchParent', styleClass: 'card', padding: glib_json_padding_body, childViews: ->(vertical) do
+    vertical.h1 text: 'Header'
+  end
+  header.spacer height: 10
+end
+
+page.footer childViews: ->(footer) do
+  footer.spacer height: 10
+  footer.panels_vertical width: 'matchParent', styleClass: 'card', padding: glib_json_padding_body, childViews: ->(vertical) do
+    vertical.h1 text: 'Footer'
+  end
+end
+
+page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+  scroll.label text: 'Inner Header'
+  scroll.label text: 'Inner Header'
+  scroll.label text: 'Inner Header'
+  scroll.spacer height: 20
+
+  scroll.panels_vertical width: 'matchParent', styleClass: 'card', backgroundColor: glib_color_panel_background, padding: glib_json_padding_body.merge(right: nil), childViews: ->(padder) do
+    padder.panels_scroll width: 'matchParent', height: 300, childViews: ->(inner_scroll) do
+      (1..100).each do |index|
+        inner_scroll.label text: 'Content'
+      end
+    end
+  end
+
+  scroll.spacer height: 20
+  scroll.label text: 'Inner Footer'
+  scroll.label text: 'Inner Footer'
+  scroll.label text: 'Inner Footer'
+end

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

@@ -1,16 +1,37 @@
 json.title 'Panels'
 
-image_url1 = 'http://ichef.bbci.co.uk/news/976/cpsprodpb/18106/production/_97266589_gettyimages-474547165.jpg'
+image_url1 = 'https://ichef.bbci.co.uk/news/976/cpsprodpb/18106/production/_97266589_gettyimages-474547165.jpg'
 image_url2 = 'https://s.abcnews.com/images/International/Guam03-gty-jrl-170809_16x9_992.jpg'
 
 json_ui_page json do |page|
   render "#{@path_prefix}/nav_menu", json: json, page: page
-  
+
   page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
-    scroll.h1 text: 'Carousel panel'
+    scroll.label text: "\n"
+    scroll.h1 text: 'Carousel with labels'
+    scroll.panels_carousel width: 'matchParent', childViews: ->(carousel) do
+      carousel.label text: 'Item 1'
+      carousel.label text: 'Item 2'
+    end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Carousel with images'
     scroll.panels_carousel width: 'matchParent', childViews: ->(carousel) do
       carousel.image url: image_url1, width: 'matchParent'
       carousel.image url: image_url2, width: 'matchParent'
     end
+
+    scroll.label text: "\n"
+    scroll.h1 text: 'Carousel with complex layout'
+    scroll.panels_carousel width: 'matchParent', childViews: ->(carousel) do
+      carousel.panels_vertical childViews: ->(panel) do
+        panel.h3 text: 'Item 1'
+        panel.image url: image_url1, width: 'matchParent'
+      end
+      carousel.panels_vertical childViews: ->(panel) do
+        panel.h3 text: 'Item 2'
+        panel.image url: image_url2, width: 'matchParent'
+      end
+    end
   end
 end

data/app/views/json_ui/garage/tables/autoload_as_needed.json.jbuilder

@@ -0,0 +1,37 @@
+
+page_index = params[:page].to_i
+next_page = {
+  url: json_ui_garage_url(path: 'tables/autoload_all', page: page_index + 1, section_only: 'v1'),
+  autoload: 'asNeeded'
+}
+
+page = json_ui_page json
+column_indexes = (1..3)
+
+if params[:section_only].present?
+  json.nextPage next_page if page_index < 3
+  json.sections do
+    json.child! do
+      render 'json_ui/garage/tables/autoload_section', page: page, page_index: page_index, column_indexes: column_indexes
+    end
+  end
+else
+  json.title 'Tables'
+
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  page.table nextPage: next_page, firstSection: ->(section) do
+    section.header cellViews: ->(header) do
+      column_indexes.each do |i|
+        header.label text: "Heading#{i}"
+      end
+    end
+
+    render "#{@path_prefix}/tables/autoload_section", page: page, page_index: page_index, column_indexes: column_indexes
+  end, onScrollToBottom: ->(action) do
+    action.snackbars_alert message: 'Scrolled to Bottom'
+  end, onScrollToTop: ->(action) do
+    action.snackbars_alert message: 'Scrolled to Top'
+  end
+
+end

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

@@ -17,6 +17,9 @@ json_ui_page json do |page|
       template.thumbnail title: 'Autoload All', onClick: ->(action) do
         action.windows_open url: json_ui_garage_url(path: 'tables/autoload_all')
       end
+      template.thumbnail title: 'Autoload as Needed', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'tables/autoload_as_needed')
+      end
     end
 
   end

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

@@ -0,0 +1,22 @@
+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
+  # TODO: Scrape all names from https://material.io/resources/icons
+  icon_names = [
+    'info', 'info', 'info', 'info', 'info', 'info', 'info', 'info',
+    'info', 'info', 'info', 'info', 'info', 'info', 'info', 'info',
+    'info', 'info', 'info', 'info', 'info', 'info', 'info', 'info',
+  ]
+  icon_names.each do |icon_name|
+    scroll.panels_column lg: { cols: 2 }, childViews: ->(column) do
+      column.panels_horizontal align: 'middle', childViews: ->(horizontal) do
+        horizontal.icon spec: icon_name
+        horizontal.spacer width: 6
+        horizontal.label text: icon_name
+      end
+    end
+  end
+end