From b111b22b9420ab99d4a8bd9588417056187fdeac Mon Sep 17 00:00:00 2001 From: Benjamin ter Kuile Date: Tue, 22 Jul 2014 19:00:12 +0200 Subject: [PATCH] Better dashboard --- .../supplier/app/models/list.js.coffee | 12 +-- .../supplier/app/models/order.js.coffee | 4 + .../supplier/app/templates/active_list.emblem | 6 +- .../supplier/app/templates/table.emblem | 6 +- .../supplier/foundation1/qsupplier.js.coffee | 12 ++- .../supplier/foundation1/_qicons.css.sass | 7 ++ .../components/_dashboard.css.sass | 5 +- .../components/_section_tables.css.sass} | 80 +++++++++++-------- 8 files changed, 81 insertions(+), 51 deletions(-) rename app/assets/stylesheets/supplier/{base1-shared/section_tables.css.sass => foundation1/components/_section_tables.css.sass} (65%) diff --git a/app/assets/javascripts/supplier/app/models/list.js.coffee b/app/assets/javascripts/supplier/app/models/list.js.coffee index 81dbf5fe..0081f95d 100644 --- a/app/assets/javascripts/supplier/app/models/list.js.coffee +++ b/app/assets/javascripts/supplier/app/models/list.js.coffee @@ -7,11 +7,7 @@ Qsupplier.App.List = DS.Model.extend users: DS.hasMany('user') is_paid: attr 'boolean' #has_active_orders: attr 'boolean' - has_active_orders: (-> - return false unless @get('state') == 'active' - #!!@get('orders').filterProperty('state', 'active').length - !!@get('orders').filter( (order) -> order.get('state') is 'active' or order.get('state') is 'placed').length - ).property('state', 'orders.@each.state') + price: attr 'number' closed_at: DS.attr('date') #table_number: attr 'number' @@ -40,7 +36,11 @@ Qsupplier.App.List = DS.Model.extend total: (-> @get('relevant_orders').getEach('total').reduce(((sum, total) -> sum + total), 0) ).property('relevant_orders.@each.total') - + has_active_orders: (-> + return false unless @get('state') == 'active' + #!!@get('orders').filterProperty('state', 'active').length + !!@get('orders').filter( (order) -> order.get('state') is 'active' or order.get('state') is 'placed').length + ).property('state', 'orders.@each.state') close: -> @markClosed() $.post Routes.supplier_close_list_path(), list_id: @id diff --git a/app/assets/javascripts/supplier/app/models/order.js.coffee b/app/assets/javascripts/supplier/app/models/order.js.coffee index 3a4b210b..ae595680 100644 --- a/app/assets/javascripts/supplier/app/models/order.js.coffee +++ b/app/assets/javascripts/supplier/app/models/order.js.coffee @@ -21,6 +21,10 @@ Qsupplier.App.Order = DS.Model.extend @set 'state', 'closed' markCancelled: -> @set 'state', 'cancelled' + markDelivered: -> + @set 'state', 'closed' + markActive: -> + @set 'state', 'active' total: (-> @get('product_orders').getEach('total').reduce(((sum, total) -> sum + total), 0) ).property('product_orders.@each.total') diff --git a/app/assets/javascripts/supplier/app/templates/active_list.emblem b/app/assets/javascripts/supplier/app/templates/active_list.emblem index 05548a8b..5c6dea76 100644 --- a/app/assets/javascripts/supplier/app/templates/active_list.emblem +++ b/app/assets/javascripts/supplier/app/templates/active_list.emblem @@ -13,6 +13,8 @@ td.actions span.fa-stack.fa-2x.fa-stack-sized i.fa.fa-bell.fa-stack-small i.fa.fa-ban.revoke - /span.button-text=t 'list.is_helped_button' - button.close_list{ action closeList view.content.id}: span + button.close_list{ action closeList view.content.id} + span.fa-stack.fa-2x.fa-stack-sized + i.fa.fa-credit-card + i.fa-stack-check button.show-list.button{action "showList" view.content.id}: span diff --git a/app/assets/javascripts/supplier/app/templates/table.emblem b/app/assets/javascripts/supplier/app/templates/table.emblem index d01f0c1c..36245793 100644 --- a/app/assets/javascripts/supplier/app/templates/table.emblem +++ b/app/assets/javascripts/supplier/app/templates/table.emblem @@ -1,8 +1,8 @@ .table-number {{table.number}} .status-icons - span.needs_payment.icon-flag - span.needs_help.icon-bell - span.active_order.icon-glass + span.needs_payment + span.needs_help + span.active_order div class="table-actions table-actions-#{unbound table.id}" .title {{table.number}} if table.active_list.needs_help diff --git a/app/assets/javascripts/supplier/foundation1/qsupplier.js.coffee b/app/assets/javascripts/supplier/foundation1/qsupplier.js.coffee index 24a0be93..913e0c79 100644 --- a/app/assets/javascripts/supplier/foundation1/qsupplier.js.coffee +++ b/app/assets/javascripts/supplier/foundation1/qsupplier.js.coffee @@ -51,11 +51,15 @@ root.Qsupplier= $('#list-is-helped-button-'+list_id).addClass('hide') $('.section-table-list-'+list_id).removeClass('needs_help') else if e.event == 'order_being_processed' - $('#order-in-process-button-'+e.data.id).hide() - $('.order-row-'+e.data.id).removeClass('placed').addClass('active') + if Qsupplier.App and order = Qsupplier.App.Order.findCached(e.data.id) + order.markActive() + # $('#order-in-process-button-'+e.data.id).hide() + # $('.order-row-'+e.data.id).removeClass('placed').addClass('active') else if e.event == 'order_being_delivered' - $('.order-row-'+e.data.id).remove() - $('.section-table-list-'+e.data.list_id).removeClass('active_order') + if Qsupplier.App and order = Qsupplier.App.Order.findCached(e.data.id) + order.markDelivered() + # $('.order-row-'+e.data.id).remove() + # $('.section-table-list-'+e.data.list_id).removeClass('active_order') else if e.event == 'orders_in_process_count' $('.supplier-orders-in-process-count-number').text e.data.count else if e.event == 'orders_placed_count' diff --git a/app/assets/stylesheets/supplier/foundation1/_qicons.css.sass b/app/assets/stylesheets/supplier/foundation1/_qicons.css.sass index 6f27aa5e..161cb4d5 100644 --- a/app/assets/stylesheets/supplier/foundation1/_qicons.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/_qicons.css.sass @@ -57,3 +57,10 @@ button, .button &.fa-stack-small margin-left: -1.35rem vertical-align: 30% + .fa-stack-check:last-child + @extend .fa + @extend .fa-check + color: #ffd600 + margin-left: -2rem + vertical-align: 0 + text-shadow: 1px 4px 1px rgba(0, 0, 0, 0.45) diff --git a/app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass b/app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass index 5b746268..d1cd81e5 100644 --- a/app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/components/_dashboard.css.sass @@ -8,10 +8,13 @@ $button-spacing: 8px width: 100% .mark_list_as_helped +button-icon-only + vertical-align: top + padding-left: 8px //do not ask me why, just looks + padding-right: 2px //do not ask me why, just looks margin-right: $button-spacing .close_list +button-icon-only - span + //span @extend .fa @extend .fa-2x @extend .fa-times // This is not good!!! diff --git a/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass b/app/assets/stylesheets/supplier/foundation1/components/_section_tables.css.sass similarity index 65% rename from app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass rename to app/assets/stylesheets/supplier/foundation1/components/_section_tables.css.sass index 2e68bd74..7c4f1dd7 100644 --- a/app/assets/stylesheets/supplier/base1-shared/section_tables.css.sass +++ b/app/assets/stylesheets/supplier/foundation1/components/_section_tables.css.sass @@ -22,7 +22,14 @@ border-right: $section-border border-bottom: $section-border border: $section-border + position: relative + padding: 0 + height: 400px + //background-image: image-url('textures/wood4.jpg') + //background-color: rgba(0,0,0,0.4) .section-table + position: absolute + cursor: pointer background-color: #ccc //TODO remove width and height for ember control height: 48px @@ -31,8 +38,41 @@ box-shadow: 5px 5px 5px #888888 color: black border-radius: 3px + .status-icons + // float: right + // width: 16px + margin-top: -18px + .needs_help, .needs_payment, .occupied, .active_order + display: none + float: right + @extend .fa + .needs_help + @extend .fa-bell + .needs_payment + @extend .fa-money + .active_order + @extend .fa-coffee + &.occupied + background-color: #ffa + &.needs_help + background-color: #7f7 + .status-icons .needs_help + display: inline-block + &.needs_payment + // background-image: image-url('icons/needs-payment.png') + // background-position: 40px 2px + .status-icons .needs_payment + display: inline-block + &.active_order + .active_order + display: block + .status-icons .active_order + display: inline-block + //background-color: #f77 a color: black + &:hover + text-decoration: none //background-image: image-url('icons/section-table.png') .table-link margin-top: -45px @@ -44,12 +84,7 @@ width: 45px font-size: 42px text-align: center - .status-icons - float: right - width: 16px - span - display: none - float: right + .action-button-container margin-right: -20px .table-actions @@ -73,37 +108,12 @@ top: -30px select width: 92px - &.section-tables-active - position: relative - padding: 0 - height: 400px - //background-image: image-url('textures/wood4.jpg') - //background-color: rgba(0,0,0,0.4) - .section-table - position: absolute - cursor: pointer - &.occupied - background-color: #ffa - &.needs_help - background-color: #7f7 - .needs_help - display: block - &.needs_payment - background-image: image-url('icons/needs-payment.png') - background-position: 40px 2px - .needs_payment - display: block - &.active_order - .active_order - display: block - //background-color: #f77 - a - &:hover - text-decoration: none - &.section-tables-manage + //&.section-tables-active + + //&.section-tables-manage .section-table cursor: move - &.section-tables-inactive + //&.section-tables-inactive .section-table position: relative margin-top: 10px