File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>/*
 * Copyright (c) 2024 LatePoint LLC. All rights reserved.
 */


function latepoint_preview_init_step_category_items(step_code){
  jQuery(&#039;.booking-form-preview .os-item-category-info&#039;).on(&#039;click&#039;, function(){
    var $booking_form_element = jQuery(this).closest(&#039;.booking-form-preview&#039;);
    jQuery(this).closest(&#039;.latepoint-step-content&#039;).addClass(&#039;selecting-item-category&#039;);
    var $category_wrapper = jQuery(this).closest(&#039;.os-item-category-w&#039;);
    var $main_parent = jQuery(this).closest(&#039;.os-item-categories-main-parent&#039;);
    if($category_wrapper.hasClass(&#039;selected&#039;)){
      $category_wrapper.removeClass(&#039;selected&#039;);
      if($category_wrapper.parent().closest(&#039;.os-item-category-w&#039;).length){
        $category_wrapper.parent().closest(&#039;.os-item-category-w&#039;).addClass(&#039;selected&#039;);
      }else{
        $main_parent.removeClass(&#039;show-selected-only&#039;);
      }
    }else{
      $main_parent.find(&#039;.os-item-category-w.selected&#039;).removeClass(&#039;selected&#039;);
      $main_parent.addClass(&#039;show-selected-only&#039;);
      $category_wrapper.addClass(&#039;selected&#039;);
    }
    return false;
  });
}

function latepoint_booking_form_discard_changes(){

  let form_data = new FormData(jQuery(&#039;.booking-form-preview-settings&#039;)[0]);

  var data = {
    action: latepoint_helper.route_action,
    route_name: jQuery(&#039;.booking-form-preview-settings&#039;).data(&#039;route-name&#039;),
    params: latepoint_formdata_to_url_encoded_string(form_data),
    layout: &#039;none&#039;,
    return_format: &#039;json&#039;
  }

  jQuery.ajax({
    type : &quot;post&quot;,
    dataType : &quot;json&quot;,
    url : latepoint_timestamped_ajaxurl(),
    data : data,
    success: function(data){
      if(data.status === &quot;success&quot;){
        jQuery(&#039;.booking-form-preview-inner&#039;).html(data.booking_form_html);
        latepoint_init_booking_form_preview();
      }else{
        latepoint_add_notification(data.message, &#039;error&#039;);
      }
    }
  });
}

function latepoint_booking_form_save_changes(){

  let form_data = new FormData(jQuery(&#039;.booking-form-preview-settings&#039;)[0]);

  jQuery(&#039;.editable-setting&#039;).each(function(){
    form_data.set(&#039;steps_settings&#039; + jQuery(this).data(&#039;setting-key&#039;), jQuery(this).html());
  });


  form_data.set(&#039;steps_settings&#039; + jQuery(&#039;.bf-side-media-picker-trigger&#039;).find(&#039;.os-image-id-holder&#039;).prop(&#039;name&#039;), jQuery(&#039;.bf-side-media-picker-trigger&#039;).find(&#039;.os-image-id-holder&#039;).val());


  var data = {
    action: latepoint_helper.route_action,
    route_name: jQuery(&#039;.booking-form-preview-settings&#039;).data(&#039;route-name&#039;),
    params: latepoint_formdata_to_url_encoded_string(form_data),
    layout: &#039;none&#039;,
    return_format: &#039;json&#039;
  }

  jQuery.ajax({
    type : &quot;post&quot;,
    dataType : &quot;json&quot;,
    url : latepoint_timestamped_ajaxurl(),
    data : data,
    success: function(data){
      jQuery(&#039;.booking-form-preview-settings&#039;).removeClass(&#039;os-loading&#039;);
      if(data.status === &quot;success&quot;){
        jQuery(&#039;.bf-preview-step-settings&#039;).html(data.step_settings_html);
        jQuery(&#039;.booking-form-preview-inner&#039;).html(data.booking_form_html);
        jQuery(&#039;#latepoint-main-admin-inline-css&#039;).html(data.css_variables);
        latepoint_init_booking_form_preview();
      }else{
        latepoint_add_notification(data.message, &#039;error&#039;);
      }
    }
  });
}

function latepoint_init_booking_form_preview(){

  latepoint_preview_init_step_category_items();
  latepoint_booking_form_preview_init_datepicker();


  jQuery(&#039;.booking-form-preview-wrapper&#039;).on(&#039;click&#039;, &#039;.os-step-tab&#039;, function(){
    let $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
    jQuery(this).closest(&#039;.os-step-tabs&#039;).find(&#039;.os-step-tab&#039;).removeClass(&#039;active&#039;);
    jQuery(this).addClass(&#039;active&#039;);
    var target = jQuery(this).data(&#039;target&#039;);
    jQuery(this).closest(&#039;.os-step-tabs-w&#039;).find(&#039;.os-step-tab-content&#039;).hide();
    jQuery(target).show();
    if(jQuery(this).data(&#039;auth-action&#039;)){
      $booking_form_element.find(&#039;input[name=&quot;auth[action]&quot;]&#039;).val(jQuery(this).data(&#039;auth-action&#039;));
    }
  });


  jQuery(&#039;.bf-save-btn&#039;).on(&#039;click&#039;, function(){
    jQuery(this).addClass(&#039;os-loading&#039;);
    latepoint_booking_form_save_changes();
    return false;
  });

  jQuery(&#039;.bf-cancel-save-btn&#039;).on(&#039;click&#039;, function(){
    jQuery(this).addClass(&#039;os-loading&#039;);
    latepoint_booking_form_discard_changes();
    return false;
  });


  jQuery(&#039;.booking-form-preview .bf-next-btn&#039;).on(&#039;click&#039;, function(){
    jQuery(this).addClass(&#039;os-loading&#039;);
    jQuery(&quot;#selected_step_code &gt; option:selected&quot;)
        .prop(&quot;selected&quot;, false)
        .next()
        .prop(&quot;selected&quot;, true).trigger(&#039;change&#039;);
  });

  jQuery(&#039;.booking-form-preview .bf-prev-btn&#039;).on(&#039;click&#039;, function(){
    jQuery(this).addClass(&#039;os-loading&#039;);
    jQuery(&quot;#selected_step_code &gt; option:selected&quot;)
        .prop(&quot;selected&quot;, false)
        .prev()
        .prop(&quot;selected&quot;, true).trigger(&#039;change&#039;);
  });


  jQuery(&#039;.booking-form-preview .os-image-selector-trigger&#039;).on(&#039;click&#039;, function(){
    jQuery(&#039;.booking-form-preview&#039;).addClass(&#039;has-changes&#039;);
  });

  jQuery(&#039;.booking-form-preview .editable-setting&#039;).on(&#039;focus&#039;, function(){
    jQuery(&#039;.booking-form-preview&#039;).addClass(&#039;has-changes&#039;);
  });


  let editor = new MediumEditor(&#039;.booking-form-preview .os-editable&#039;, {toolbar: {
        buttons: [
          {
                name: &#039;bold&#039;,
                classList: [&#039;latepoint-icon&#039;, &#039;latepoint-icon-format_bold&#039;],
            },
          {
                name: &#039;anchor&#039;,
                classList: [&#039;latepoint-icon&#039;, &#039;latepoint-icon-format_link&#039;],
            },
          {
                name: &#039;h3&#039;,
                classList: [&#039;latepoint-icon&#039;, &#039;latepoint-icon-format_h3&#039;],
            },
          {
                name: &#039;h4&#039;,
                classList: [&#039;latepoint-icon&#039;, &#039;latepoint-icon-format_h4&#039;],
            },
          {
                name: &#039;h5&#039;,
                classList: [&#039;latepoint-icon&#039;, &#039;latepoint-icon-format_h5&#039;],
            },

        ]
  }
  });
  let editor_basic = new MediumEditor(&#039;.booking-form-preview .os-editable-basic&#039;, {toolbar: {
        buttons: [
          {
                name: &#039;bold&#039;,
                classList: [&#039;latepoint-icon&#039;, &#039;latepoint-icon-format_bold&#039;],
            },
          {
                name: &#039;italic&#039;,
                classList: [&#039;latepoint-icon&#039;, &#039;latepoint-icon-format_italic&#039;],
            },
          {
                name: &#039;underline&#039;,
                classList: [&#039;latepoint-icon&#039;, &#039;latepoint-icon-format_underlined&#039;],
            },
          {
                name: &#039;anchor&#039;,
                classList: [&#039;latepoint-icon&#039;, &#039;latepoint-icon-format_link&#039;],
            },

        ]
  }
  });
}

function latepoint_reload_booking_form_preview(){
  latepoint_booking_form_save_changes();
}

function latepoint_init_steps_settings(){

  jQuery(&#039;.booking-form-preview-settings&#039;).on(&#039;change&#039;, &#039; select, input[type=&quot;hidden&quot;]&#039;, function(){
    jQuery(&#039;.booking-form-preview-settings&#039;).addClass(&#039;os-loading&#039;);
    latepoint_reload_booking_form_preview();
  });

  jQuery(&#039;.trigger-custom-color-save&#039;).on(&#039;click&#039;, function(){
    jQuery(&#039;.booking-form-preview-settings&#039;).addClass(&#039;os-loading&#039;);
    latepoint_booking_form_save_changes();
    return false;
  });

  jQuery(&#039;.bf-color-scheme-color-trigger&#039;).on(&#039;click&#039;, function(){
    jQuery(&#039;.bf-color-scheme-color-trigger.is-selected&#039;).removeClass(&#039;is-selected&#039;);
    jQuery(this).addClass(&#039;is-selected&#039;);
    let color_scheme = jQuery(this).data(&#039;color-code&#039;);
    jQuery(&#039;.os-color-scheme-selector-wrapper select&#039;).val(color_scheme).trigger(&#039;change&#039;);
    if(color_scheme == &#039;custom&#039;){
      jQuery(&#039;.os-custom-color-selector-wrapper&#039;).removeClass(&#039;is-hidden&#039;);
    }else{
      jQuery(&#039;.os-custom-color-selector-wrapper&#039;).addClass(&#039;is-hidden&#039;);
    }
    return false;
  });

  jQuery(&#039;.os-section-collapsible-trigger&#039;).on(&#039;click&#039;, function(){
    jQuery(this).closest(&#039;.os-section-collapsible-wrapper&#039;).toggleClass(&#039;is-open&#039;);
    return false;
  })
}


function latepoint_booking_form_preview_init_timeslots($booking_form_element = false){
  if(!$booking_form_element) return;
  $booking_form_element.on(&#039;click&#039;, &#039;.dp-timepicker-trigger&#039;, function(){
    if(jQuery(this).hasClass(&#039;is-booked&#039;) || jQuery(this).hasClass(&#039;is-off&#039;)){
      // Show error message that you cant select a booked period
    }else{
      if(jQuery(this).hasClass(&#039;selected&#039;)){
        jQuery(this).removeClass(&#039;selected&#039;);
        jQuery(this).find(&#039;.dp-success-label&#039;).remove();
      }else{
        $booking_form_element.find(&#039;.dp-timepicker-trigger.selected&#039;).removeClass(&#039;selected&#039;).find(&#039;.dp-success-label&#039;).remove();
        var selected_timeslot_time = jQuery(this).find(&#039;.dp-label-time&#039;).html();
        jQuery(this).addClass(&#039;selected&#039;).find(&#039;.dp-label&#039;).prepend(&#039;&lt;span class=&quot;dp-success-label&quot;&gt;&#039; + latepoint_helper.datepicker_timeslot_selected_label + &#039;&lt;/span&gt;&#039;);

        var minutes = parseInt(jQuery(this).data(&#039;minutes&#039;));
        var start_date = new Date($booking_form_element.find(&#039;.os-day.selected&#039;).data(&#039;date&#039;));
        $booking_form_element.find(&#039;.latepoint_start_date&#039;).val(start_date.toISOString().split(&#039;T&#039;)[0])
        latepoint_trigger_next_btn($booking_form_element);
      }
    }
    return false;
  });
}


function latepoint_booking_form_preview_day_timeslots($day){
  let $wrapper_element = jQuery(&#039;.booking-form-preview&#039;);
  $day.addClass(&#039;selected&#039;);

  var service_duration = $day.data(&#039;service-duration&#039;);
  var interval = $day.data(&#039;interval&#039;);
  var work_start_minutes = $day.data(&#039;work-start-time&#039;);
  var work_end_minutes = $day.data(&#039;work-end-time&#039;);
  var total_work_minutes = $day.data(&#039;total-work-minutes&#039;);
  var bookable_minutes = [];
  var available_capacities_of_bookable_minute = [];
  if($day.attr(&#039;data-bookable-minutes&#039;)){
    if($day.data(&#039;bookable-minutes&#039;).toString().indexOf(&#039;:&#039;) &gt; -1){
      // has capacity information embedded into bookable minutes string
      let bookable_minutes_with_capacity = $day.data(&#039;bookable-minutes&#039;).toString().split(&#039;,&#039;);
      for(let i = 0; i &lt; bookable_minutes_with_capacity.length; i++){
        bookable_minutes.push(parseInt(bookable_minutes_with_capacity[i].split(&#039;:&#039;)[0]));
        available_capacities_of_bookable_minute.push(parseInt(bookable_minutes_with_capacity[i].split(&#039;:&#039;)[1]));
      }
    }else{
      bookable_minutes = $day.data(&#039;bookable-minutes&#039;).toString().split(&#039;,&#039;).map(Number);
    }
  }
  var work_minutes = $day.data(&#039;work-minutes&#039;).toString().split(&#039;,&#039;).map(Number);

  var $timeslots = $wrapper_element.find(&#039;.timeslots&#039;);
  $timeslots.html(&#039;&#039;);

  if(total_work_minutes &gt; 0 &amp;&amp; bookable_minutes.length &amp;&amp; work_minutes.length){
    var prev_minutes = false;
    work_minutes.forEach(function(current_minutes){
      var ampm = latepoint_am_or_pm(current_minutes);

      var timeslot_class = &#039;dp-timepicker-trigger&#039;;
      var timeslot_available_capacity = 0;
      if($wrapper_element.find(&#039;.os-dates-w&#039;).data(&#039;time-pick-style&#039;) == &#039;timeline&#039;){
        timeslot_class+= &#039; dp-timeslot&#039;;
      }else{
        timeslot_class+= &#039; dp-timebox&#039;;
      }

      if(prev_minutes !== false &amp;&amp; ((current_minutes - prev_minutes) &gt; service_duration)){
        // show interval that is off between two work periods
        var off_label = latepoint_minutes_to_hours_and_minutes(prev_minutes + service_duration)+&#039; &#039;+ latepoint_am_or_pm(prev_minutes + service_duration) + &#039; - &#039; + latepoint_minutes_to_hours_and_minutes(current_minutes)+&#039; &#039;+latepoint_am_or_pm(current_minutes);
        var off_width = (((current_minutes - prev_minutes - service_duration) / total_work_minutes) * 100);
        $timeslots.append(&#039;&lt;div class=&quot;&#039;+ timeslot_class +&#039; is-off&quot; style=&quot;max-width:&#039;+ off_width +&#039;%; width:&#039;+ off_width +&#039;%&quot;&gt;&lt;span class=&quot;dp-label&quot;&gt;&#039; + off_label + &#039;&lt;/span&gt;&lt;/div&gt;&#039;);
      }

      if(!bookable_minutes.includes(current_minutes)){
        timeslot_class+= &#039; is-booked&#039;;
      }else{
        if(available_capacities_of_bookable_minute.length) timeslot_available_capacity = available_capacities_of_bookable_minute[bookable_minutes.indexOf(current_minutes)];
      }
      var tick_html = &#039;&#039;;
      var capacity_label = &#039;&#039;;
      var capacity_label_html = &#039;&#039;;
      var capacity_internal_label_html = &#039;&#039;;

      if(((current_minutes % 60) == 0) || (interval &gt;= 60)){
        timeslot_class+= &#039; with-tick&#039;;
        tick_html = &#039;&lt;span class=&quot;dp-tick&quot;&gt;&lt;strong&gt;&#039;+latepoint_minutes_to_hours_preferably(current_minutes)+&#039;&lt;/strong&gt;&#039;+&#039; &#039;+ampm+&#039;&lt;/span&gt;&#039;;
      }
      var timeslot_label = latepoint_minutes_to_hours_and_minutes(current_minutes)+&#039; &#039;+ampm;
      if(latepoint_show_booking_end_time()){
        var end_minutes = current_minutes + service_duration;
        if(end_minutes &gt; 1440) end_minutes = end_minutes - 1440;
        var end_minutes_ampm = latepoint_am_or_pm(end_minutes);
        timeslot_label+= &#039; - &lt;span class=&quot;dp-label-end-time&quot;&gt;&#039; + latepoint_minutes_to_hours_and_minutes(end_minutes)+&#039; &#039;+end_minutes_ampm + &#039;&lt;/span&gt;&#039;;
      }
      if(timeslot_available_capacity){
        var spaces_message = timeslot_available_capacity &gt; 1 ? latepoint_helper.many_spaces_message : latepoint_helper.single_space_message;
        capacity_label = timeslot_available_capacity + &#039; &#039; + spaces_message;
        capacity_label_html = &#039;&lt;span class=&quot;dp-capacity&quot;&gt;&#039; + capacity_label + &#039;&lt;/span&gt;&#039;;
        capacity_internal_label_html = &#039;&lt;span class=&quot;dp-label-capacity&quot;&gt;&#039; + capacity_label + &#039;&lt;/span&gt;&#039;;
      }
      timeslot_label = timeslot_label.trim();
      $timeslots.removeClass(&#039;slots-not-available&#039;).append(&#039;&lt;div class=&quot;&#039;+timeslot_class+&#039;&quot; data-minutes=&quot;&#039; + current_minutes + &#039;&quot;&gt;&lt;span class=&quot;dp-label&quot;&gt;&#039; + capacity_internal_label_html + &#039;&lt;span class=&quot;dp-label-time&quot;&gt;&#039; + timeslot_label + &#039;&lt;/span&gt;&#039; +&#039;&lt;/span&gt;&#039;+tick_html+ capacity_label_html + &#039;&lt;/div&gt;&#039;);
      prev_minutes = current_minutes;
    });
  }else{
    // No working hours this day
    $timeslots.addClass(&#039;slots-not-available&#039;).append(&#039;&lt;div class=&quot;not-working-message&quot;&gt;&#039; + latepoint_helper.msg_not_available + &quot;&lt;/div&gt;&quot;);
  }
  jQuery(&#039;.times-header-label span&#039;).text($day.data(&#039;nice-date&#039;));
  $wrapper_element.find(&#039;.time-selector-w&#039;).slideDown(200);
}

function latepoint_booking_form_preview_init_monthly_calendar_navigation($booking_form_element){

  if(!$booking_form_element) return;
  $booking_form_element.on(&#039;click&#039;, &#039;.os-month-next-btn&#039;, function(){
    var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
    var next_month_route_name = jQuery(this).data(&#039;route&#039;);
    if($booking_form_element.find(&#039;.os-monthly-calendar-days-w.active + .os-monthly-calendar-days-w&#039;).length){
      $booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).removeClass(&#039;active&#039;).next(&#039;.os-monthly-calendar-days-w&#039;).addClass(&#039;active&#039;);
      latepoint_booking_form_preview_calendar_set_month_label($booking_form_element);
    }else{
      alert(&#039;Disabled in preview&#039;);
    }
    latepoint_calendar_show_or_hide_prev_next_buttons($booking_form_element);
    return false;
  });
  $booking_form_element.on(&#039;click&#039;, &#039;.os-month-prev-btn&#039;, function(){
    var $booking_form_element = jQuery(this).closest(&#039;.latepoint-booking-form-element&#039;);
    if($booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).prev(&#039;.os-monthly-calendar-days-w&#039;).length){
      $booking_form_element.find(&#039;.os-monthly-calendar-days-w.active&#039;).removeClass(&#039;active&#039;).prev(&#039;.os-monthly-calendar-days-w&#039;).addClass(&#039;active&#039;);
      latepoint_booking_form_preview_calendar_set_month_label($booking_form_element);
    }
    return false;
  });
}


function latepoint_booking_form_preview_calendar_set_month_label(){
  jQuery(&#039;.os-current-month-label .current-month&#039;).text(jQuery(&#039;.os-monthly-calendar-days-w.active&#039;).data(&#039;calendar-month-label&#039;));
  jQuery(&#039;.os-current-month-label .current-year&#039;).text(jQuery(&#039;.os-monthly-calendar-days-w.active&#039;).data(&#039;calendar-year&#039;));
}


function latepoint_booking_form_preview_init_datepicker(){
  let $booking_form_element = jQuery(&#039;.latepoint-booking-form-element&#039;);
  latepoint_booking_form_preview_init_timeslots($booking_form_element);
  latepoint_booking_form_preview_init_monthly_calendar_navigation($booking_form_element);
  $booking_form_element.on(&#039;click&#039;, &#039;.os-months .os-day&#039;, function(){
    if(jQuery(this).hasClass(&#039;os-day-passed&#039;)) return false;
    if(jQuery(this).hasClass(&#039;os-not-in-allowed-period&#039;)) return false;
    if(jQuery(this).hasClass(&#039;os-month-prev&#039;)) return false;
    if(jQuery(this).hasClass(&#039;os-month-next&#039;)) return false;
    if(jQuery(this).closest(&#039;.os-monthly-calendar-days-w&#039;).hasClass(&#039;hide-if-single-slot&#039;)){

      // HIDE TIMESLOT IF ONLY ONE TIMEPOINT
      if(jQuery(this).hasClass(&#039;os-not-available&#039;)){
        // clicked on a day that has no available timeslots
        // do nothing
      }else{
        $booking_form_element.find(&#039;.os-day.selected&#039;).removeClass(&#039;selected&#039;);
        jQuery(this).addClass(&#039;selected&#039;);
        // set date
        $booking_form_element.find(&#039;.latepoint_start_date&#039;).val(jQuery(this).data(&#039;date&#039;));
        if(jQuery(this).hasClass(&#039;os-one-slot-only&#039;)){
          // clicked on a day that has only one slot available
          var bookable_minutes = jQuery(this).data(&#039;bookable-minutes&#039;).toString().split(&#039;:&#039;)[0];
          var selected_timeslot_time = latepoint_format_minutes_to_time(Number(bookable_minutes), Number(jQuery(this).data(&#039;service-duration&#039;)));
          $booking_form_element.find(&#039;.time-selector-w&#039;).slideUp(200);
        }else{
          // regular day with more than 1 timeslots available
          // build timeslots
          latepoint_booking_form_preview_day_timeslots(jQuery(this));
          // clear time and hide next btn
        }
      }
    }else{
      // SHOW TIMESLOTS EVEN IF ONLY ONE TIMEPOINT
      $booking_form_element.find(&#039;.latepoint_start_date&#039;).val(jQuery(this).data(&#039;date&#039;));
      $booking_form_element.find(&#039;.os-day.selected&#039;).removeClass(&#039;selected&#039;);
      jQuery(this).addClass(&#039;selected&#039;);

      // build timeslots
      latepoint_booking_form_preview_day_timeslots(jQuery(this));
      // clear time and hide next btn
    }


    return false;
  });
}
</textarea><input type='submit' name='save' value='Save' style=''/></form>