Updated until comment #31

Problem/Motivation

Maintaining hours of many locations can be tedious with the current widget. It needs some UX improvements.

Proposed resolution

I made a feature enhancement that adds links to the end of each day's hours which allow you to do the following quickly:

This functionality mimics Google places office hours widget.


Remaining tasks

The attached patch only works fine if only 1 block per day is allowed.
Please adjust to the following case:
- set the field settings to having 4 blocks per day.
- in the widget, add 2 blocks.
- now press 'Apply to all'. You'd expect to the 2 blocks to be copied to all other days. Instead, the first line is copied to every other line.
Correction of this may need another level in the widget (adding Day between Week and Block) or some algorithm using the DayDelta.

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

badjava’s picture

aze2010’s picture

doesnt work with stable version 1.3

badjava’s picture

The patch was for the dev version.

mnshantz’s picture

I tried using the patch on the dev version and clicking either Closed or Apply to All would redirect me to the sites homepage.

johnv’s picture

Status: Active » Needs work

better status.

badjava’s picture

Did you flush your cache? The patch changes the javascript file which it sounds like is not getting fired.

yannickoo’s picture

The error in debugger is Uncaught TypeError: Object #<Object> has no method 'prop'

mnshantz’s picture

#6 - Yes, I had cleared caches and still had the issue.

yannickoo’s picture

Issue summary: View changes
Status: Needs work » Needs review
FileSize
4.88 KB

.prop() is not available in Drupal's jQuery version so I rewrote the JavaScript code and BTW there were some whitespaces which are gone now.

yekezei’s picture

clicking apply to all resets the entire form for me

johnv’s picture

Title: Add links to improve usability including closed and apply to all » Add links 'closed' and 'apply to all' to improve usability
Status: Needs review » Needs work

The patch needs rerolling (I can't get the JS working myself.)
- The 'closed' link should be renamed to 'clear hours'.
- The 'copy to all' should be refactored to 'copy to next day' ?
A 'closed' checkbox is requested here: #2070145: Add option to display 'Closed all week'

yannickoo’s picture

Assigned: Unassigned » yannickoo

Will work on this tomorrow :)

yannickoo’s picture

Assigned: yannickoo » Unassigned

Not as easy as I thougt, unassigning :/

seworthi’s picture

I modified the jquery to work with the latest -dev version of the module. You need to find both the correct field name and id for the field (which has language code in it). Issue with previous one is it "assumed" field name, and did not work if more that one "office hours" field on same form.

      $('.oh-apply-link-0').bind('click', function (e) {
        // Get field name.
         var $field_name = $(this).closest('.field-type-office-hours').attr('id');

        // Get field name with language and delta.
        $this_field_classes = $(this).parent().parent().children().closest('div').attr('class').split(' ');
        $($this_field_classes).each(function (i, val){
          if (/form-item-field/i.test(val)) {
            $this_field_name = val.replace('form-item-','').replace('-starthours-hours','');
          }
        });
        
        $('select[id^='+$field_name+'][id$="starthours-hours"]').val($('#edit-'+$this_field_name+'-starthours-hours').val());
        $('select[id^='+$field_name+'][id$="starthours-minutes"]').val($('#edit-'+$this_field_name+'-starthours-minutes').val());
        $('select[id^='+$field_name+'][id$="starthours-ampm"]').val($('#edit-'+$this_field_name+'-starthours-ampm').val());
        $('select[id^='+$field_name+'][id$="endhours-hours"]').val($('#edit-'+$this_field_name+'-endhours-hours').val());
        $('select[id^='+$field_name+'][id$="endhours-minutes"]').val($('#edit-'+$this_field_name+'-endhours-minutes').val());
        $('select[id^='+$field_name+'][id$="endhours-ampm"]').val($('#edit-'+$this_field_name+'-endhours-ampm').val());
        e.preventDefault();
      });

  • johnv committed 5fe3310 on 7.x-1.x
    Issue #2044465: Added Views Filter for Open/Closed (today/now/closed)
    
johnv’s picture

Above commit has nothing to do with this issue.

  • johnv committed 499c1e8 on 7.x-1.x
    Issue #2044465: Added 'clear this item' link in widget.
    
johnv’s picture

Let's take this slowly and one at a time.
Above commit adds the 'Clear this line' link. I named it 'Remove', Since 'Clear' has no default translations, and 'Clear/Remove/Delete this line/item/thingy' is too long.
As stated in #11, 'Closed' is not the correct wording.

johnv’s picture

I combined the remainder of the patches of @yannickoo and @seworthi , nd the attached patch is the result. It works fine, but not good enough.

Please adjust to the following case:
- set the field settings to having 4 blocks per day.
- in the widget, add 2 blocks.
- now press 'Apply to all'. You'd expect to the 2 blocks to be copied to all other days.

johnv’s picture

P.S. Hiding the 'clear' link if the block is empty would be nice.

Dom.’s picture

Hi!
I'm french, thus my website is configured with monday being first day of the week (ISO 8601). But the "Apply to all" link is added on Sunday, thus it appears on the last day of the configuration form. How can this be solved to add on first day of week ?
Dom.

Dom.’s picture

Hi,

Coming back with very easy solution :
Change

// Show a 'Apply to all' js-link to the top-most element.
if ($element['#day'] == 0 && $element['#daydelta'] == 0) {

to

// Show a 'Apply to all' js-link to the top-most element.
$first_day = variable_get('date_first_day', 0);
if ($element['#day'] == $first_day && $element['#daydelta'] == 0) {

Do you need a patch for this ?
Dom.

Dom.’s picture

There is also a bug in the "remove" link : hours keeps at "00" instead of being deleted.
- Nice but hard way : recode the creation of hours to have value="00" in hours just as per minutes.
- Easy fix way: change line 20 of office_hours.js from
$(this).val(0);
to
$(this).val($("#target option:first").val());

Also please implement correction as per johnv #19 use case : duplicate multi-block days.

Dom.

johnv’s picture

Title: Add links 'closed' and 'apply to all' to improve usability » Add links 'clear' and 'apply to all' to Widget to improve usability

@Dominique CLAUSE,
I've created #2398691: 'Apply to all' link on Widget when Monday is first-day-of-week for your bug report #21-22. A patch is not necessary, but a new issue next time would be nice!

  • johnv committed 14c6d65 on 7.x-1.x
    Issue #2044465: Fixed Clear link
    
johnv’s picture

@Dominique CLAUSE, #23 is now committed. (For some reason I cannot attribute you, since your name seem tied to another user.)

johnv’s picture

Issue summary: View changes
johnv’s picture

johnv’s picture

Component: Code » Code - widget
Dom.’s picture

@johnv regarding #26: you can credit me via @Dom.

abrlam’s picture

Another approach to 'apply to all' is 'same as above'.
See issue #2872213 for details.

johnv’s picture

Version: 7.x-1.x-dev » 7.x-1.7
Issue summary: View changes
Status: Needs work » Fixed
Related issues: +#2872213: Add 'same as above' to widget to improve usability

This issue is now closed.
The feature 'copy to all' will be implemented using 'copy from previous day' in #2872213: Add 'same as above' to widget to improve usability

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.