glib-web 0.5.5

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

@@ -0,0 +1,20 @@
+
+# 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
+    row.thumbnail title: "Item #{index}"
+  end
+end

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

@@ -0,0 +1,19 @@
+json.title 'Lists'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  page.list firstSection: ->(section) do
+    section.rows builder: ->(template) do
+      template.thumbnail title: 'Click menu (web) or swipe left (Android/iOS)', editButtons: ->(menu) do
+        menu.button text: 'Edit', onClick: ->(action) do
+          action.dialogs_alert message: 'Perform action'
+        end
+        menu.button text: 'Delete', onClick: ->(action) do
+          action.dialogs_alert message: 'Perform action'
+        end
+      end
+    end
+
+  end
+end

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

@@ -0,0 +1,14 @@
+json.title 'Lists'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  # page.body height: 'matchParent', padding: glib_json_padding_body, childViews: ->(body) do
+  page.body childViews: ->(body) do
+    body.fab icon: 'add', onClick: ->(action) { action.dialogs_alert message: 'Perform action' }
+
+    body.panels_list width: 'matchParent', firstSection: ->(section) do
+      render 'json_ui/garage/lists/infinite_scroll_section', json: json, page: 0
+    end
+  end
+end

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

@@ -0,0 +1,23 @@
+json.title 'Lists'
+
+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 icon: 'list', title: 'Templating', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'lists/templating')
+      end
+      template.thumbnail title: 'Edit Actions', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'lists/edit_actions')
+      end
+      template.thumbnail title: 'Infinite Scroll', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'lists/infinite_scroll')
+      end
+      template.thumbnail title: 'FAB (Floating Action Button)', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'lists/fab')
+      end
+    end
+
+  end
+end

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

@@ -0,0 +1,38 @@
+
+page_index = params[:page].to_i
+next_page = {
+  url: json_ui_garage_url(path: 'lists/infinite_scroll', page: page_index + 1, section_only: 'v1'),
+  # TODO: rename, e.g. autoloadAsNeeded vs autoloadAll
+  autoLoad: true
+}
+
+# TODO: Cater
+# - for SEO: one URL for a standalone page and one URL for pagination only
+# - for generic approach, e.g. excluding nav_menu when there is no change
+if params[:section_only].present?
+  json.nextPage next_page
+  json.sections do
+    json.child! do
+      render 'json_ui/garage/lists/infinite_scroll_section', json: json, page: page_index
+    end
+  end
+else
+  json.title 'Lists'
+
+  # options = { nextPage: nextPage }
+  # json_body_with_list json, nil, nil, options do
+  #   render 'json_ui/garage/lists/infinite_scroll_section', json: json, page: page
+  # end
+
+  page = json_ui_page json
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  page.list nextPage: next_page, firstSection: ->(section) do
+    render 'json_ui/garage/lists/infinite_scroll_section', json: json, page: page_index
+  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/lists/templating.json.jbuilder

@@ -0,0 +1,35 @@
+json.title 'Lists'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  page.list firstSection: ->(section) do
+    section.header padding: { top: 12, left: 16, right: 16, bottom: 12 }, childViews: ->(header) do
+      header.h3 text: 'Section Header'
+    end
+
+    section.rows builder: ->(template) do
+      template.thumbnail title: 'Click me', onClick: ->(action) do
+        action.windows_open url: json_ui_garage_url(path: 'home/blank')
+      end
+      template.thumbnail title: 'Item with subtitle', subtitle: 'Item subtitle'
+      template.thumbnail title: 'Item with chips', chips: ->(menu) do
+        menu.button text: 'Finished', styleClass: 'info'
+        menu.button props: { text: 'Succeeded', styleClass: 'success' }
+      end
+
+      template.thumbnail title: 'Item with thumbnail image', subtitle: 'Item subtitle', imageUrl: glib_json_image_standard_url
+      template.featured title: 'Featured with featured image', subtitle: 'Item subtitle', imageUrl: glib_json_image_standard_url
+
+      # TODO
+      # template.thumbnail title: 'Item with accessories (Experimental)', subtitle: 'Item subtitle', accessoryViews: ->(thumbnail) do
+      #   thumbnail.panels_horizontal childViews: ->(horizontal) do
+      #     horizontal.chip text: 'finished'
+      #     horizontal.spacer width: 10
+      #     horizontal.chip text: 'succeeded'
+      #   end
+      # end
+
+    end
+  end
+end

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

@@ -0,0 +1,18 @@
+json.title 'Notifications'
+
+page = json_ui_page json
+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: 'Send Desktop Notification', onClick: ->(action) do
+      action.dialogs_notification title: 'Hello World', message: 'This is a notification', onClick: ->(subaction) do
+        subaction.dialogs_alert message: 'Perform action'
+      end
+    end
+
+    template.thumbnail title: 'WebSocket Real-time Update', onClick: ->(action) do
+      action.windows_open url: json_ui_garage_url(path: 'notifications/web_socket')
+    end
+  end
+end

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

@@ -0,0 +1,60 @@
+json.title 'Forms'
+
+page = json_ui_page json
+render "#{@path_prefix}/nav_menu", json: json, page: page
+
+json.ws({
+  "socket" => {
+    "endpoint" => "/socket/websocket",
+    "params" => {
+      vsn: '2.0.0',
+      token: 'TOKEN'
+    }
+  },
+  # "topic" => "room:30",
+  # "event" => "comments_updated",
+  "topic" => "links",
+  "events" => ["new_link_added"],
+  "header" => {
+    "user_id" => 2,
+    "prev_item_id" => nil,
+    "last_item_id" => nil
+  }
+})
+
+page.form url: json_ui_garage_url(path: 'forms/basic_post'), method: 'post', padding: glib_json_padding_body, paramNameForFormData: 'formData', onSubmit: ->(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"
+  })
+
+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'
+    #     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

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

@@ -0,0 +1,29 @@
+json.title 'Pages'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+
+  page.template 'flatCentered'
+
+  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: 20
+  end
+
+  page.footer childViews: ->(footer) do
+    footer.spacer height: 20
+    footer.panels_vertical width: 'matchParent', styleClass: 'card', padding: glib_json_padding_body, childViews: ->(vertical) do
+      vertical.h1 text: 'Footer'
+    end
+  end
+
+  page.body childViews: ->(scroll) do
+    scroll.panels_vertical width: 'matchParent', styleClass: 'card', padding: glib_json_padding_body, childViews: ->(vertical) do
+      (1..100).each do |index|
+        scroll.label text: 'Content'
+      end
+    end
+  end
+end

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

@@ -0,0 +1,29 @@
+json.title 'Pages'
+
+json_ui_page json do |page|
+  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.body childViews: ->(scroll) do
+    scroll.panels_vertical width: 'matchParent', styleClass: 'card', padding: glib_json_padding_body, childViews: ->(vertical) do
+      (1..100).each do |index|
+        vertical.label text: 'Content'
+      end
+    end
+  end
+end

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

@@ -0,0 +1,16 @@
+json.title 'Pages'
+
+page = json_ui_page json
+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.body height: 'matchParent', padding: glib_json_padding_body, childViews: ->(body) do
+  body.button width: 'matchParent', height: 'matchParent', text: 'Full Width/Height'
+end
+
+page.footer height: 80, padding: glib_json_padding_body, backgroundColor: '#b3bac2', childViews: ->(footer) do
+  footer.h1 text: 'Footer'
+end

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

@@ -0,0 +1,47 @@
+json.title 'Pages'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page, top_nav: true
+
+  page.list sections: [
+    ->(section) do
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Hamburger Layout', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/layout')
+        end
+
+        template.thumbnail title: 'Full Width/Height', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/full_width_height')
+        end
+
+        template.thumbnail title: 'Tab Bar', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/tab_bar')
+        end
+
+        template.thumbnail title: 'Nav Buttons', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/nav_buttons')
+        end
+
+        template.thumbnail title: 'Loading Indicator', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/loading_indicator')
+        end
+      end
+    end,
+    ->(section) do
+      section.header padding: glib_json_padding_list, childViews: ->(header) do
+        header.h2 text: 'Templates (Web Only)'
+      end
+
+      section.rows builder: ->(template) do
+        template.thumbnail title: 'Flat Centered', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/flat_centered')
+        end
+
+        template.thumbnail title: 'Full Width', onClick: ->(action) do
+          action.windows_open url: json_ui_garage_url(path: 'pages/full_width')
+        end
+      end
+    end
+  ]
+
+end

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

@@ -0,0 +1,19 @@
+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.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
+  end
+end

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

@@ -0,0 +1,10 @@
+sleep 1
+
+json.title 'Pages'
+
+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: 'On the web, the loading indicator should be show on the browser tab.'
+end

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

@@ -0,0 +1,21 @@
+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.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+    scroll.label text: 'See the right menu buttons on the nav bar'
+  end
+end

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

@@ -0,0 +1,27 @@
+json.title 'Pages'
+
+json_ui_page json do |page|
+  render "#{@path_prefix}/nav_menu", json: json, page: page
+  
+  page.header childViews: ->(header) do
+    header.tabBar width: 'matchParent', backgroundColor: '#ffca05', color: '#7f561b', buttons: ->(menu) do
+      
+      ['FIRST', 'SECOND', 'THIRD'].each_with_index do |text, index|
+        menu.button text: text, disabled: params[:tab].to_i == index, onClick: ->(action) do
+          action.windows_reload url: json_ui_garage_url(path: 'pages/tab_bar', tab: index)
+        end
+      end
+    end
+  end
+
+  page.scroll padding: glib_json_padding_body, childViews: ->(scroll) do
+    scroll.label text: "Tab index #{params[:tab].to_i} selected"
+
+    scroll.spacer height: 10
+
+    100.times do |i|
+      scroll.label text: "Line #{i + 1}"
+    end
+  end
+
+end