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) 2023 LatePoint LLC. All rights reserved.
 */


function latepoint_init_daily_bookings_chart() {
  if (typeof Chart === &#039;undefined&#039; || !jQuery(&#039;#chartDailyBookings&#039;).length) return

  let $dailyBookingsChart = jQuery(&#039;#chartDailyBookings&#039;);
  let dailyBookingsLabels = $dailyBookingsChart.data(&#039;chart-labels&#039;).toString().split(&#039;,&#039;);
  let dailyBookingsValues = $dailyBookingsChart.data(&#039;chart-values&#039;).toString().split(&#039;,&#039;).map(Number);
  let dailyBookingsChartMax = Math.max.apply(Math, dailyBookingsValues);
  // calculate max Y to have space for a tooltip
  let canvasHeight = 200
  let spaceForTooltip = 160
  let maxValue = dailyBookingsChartMax + spaceForTooltip * dailyBookingsChartMax / canvasHeight + 1


  var fontFamily = latepoint_helper.body_font_family;

  Chart.Tooltip.positioners.top = function (items) {
    const pos = Chart.Tooltip.positioners.average(items);

    // Happens when nothing is found
    if (pos === false) {
      return false;
    }

    const chart = this.chart;

    return {
      x: pos.x,
      y: chart.chartArea.top,
      xAlign: &#039;center&#039;,
      yAlign: &#039;bottom&#039;,
    };
  };

  Chart.defaults.defaultFontFamily = fontFamily;
  Chart.defaults.defaultFontSize = 18;
  Chart.defaults.defaultFontStyle = &#039;400&#039;;
  Chart.defaults.plugins.tooltip.titleFont = {
    family: fontFamily,
    size: 14,
    color: &#039;rgba(255,255,255,0.6)&#039;,
    style: &#039;normal&#039;,
    weight: 400
  }

  Chart.defaults.plugins.tooltip.titleFont = {family: fontFamily, size: 14, weight: 400};
  Chart.defaults.plugins.tooltip.titleColor = &#039;rgba(255,255,255,0.6)&#039;;
  Chart.defaults.plugins.tooltip.backgroundColor = &#039;#000&#039;;
  Chart.defaults.plugins.tooltip.titleMarginBottom = 5;
  Chart.defaults.plugins.tooltip.bodyFont = {family: fontFamily, size: 24, weight: 700, lineHeight: 0.8};
  Chart.defaults.plugins.tooltip.displayColors = false;
  Chart.defaults.plugins.tooltip.padding = 10;
  Chart.defaults.plugins.tooltip.yAlign = &#039;bottom&#039;;
  Chart.defaults.plugins.tooltip.xAlign = &#039;center&#039;;
  Chart.defaults.plugins.tooltip.cornerRadius = 14;
  Chart.defaults.plugins.tooltip.caretSize = 5;
  Chart.defaults.plugins.tooltip.position = &#039;top&#039;;

  var ctx = $dailyBookingsChart[0].getContext(&quot;2d&quot;);
  var gradientStroke = ctx.createLinearGradient(500, 0, 100, 0);
  gradientStroke.addColorStop(0, &#039;#219ff8&#039;);
  gradientStroke.addColorStop(1, &#039;#219ff8&#039;);


  let gradientFill = ctx.createLinearGradient(0, 0, 0, 140);
  gradientFill.addColorStop(0, &#039;rgba(195, 229, 253, 0.9)&#039;);
  gradientFill.addColorStop(1, &#039;rgba(195, 229, 253, 0.1)&#039;);

  // line chart data
  var chartDailyBookingsData = {
    labels: dailyBookingsLabels,
    datasets: [{
      backgroundColor: gradientFill,
      borderColor: gradientStroke,
      label: &quot;&quot;,
      fill: true,
      lineTension: 0.3,
      borderWidth: 2,
      borderCapStyle: &#039;butt&#039;,
      borderDash: [],
      borderDashOffset: 0.0,
      borderJoinStyle: &#039;miter&#039;,
      pointBorderColor: &quot;#fff&quot;,
      pointBackgroundColor: &quot;#219ff8&quot;,
      pointRadius: 3,
      pointBorderWidth: 2,
      pointHoverRadius: 6,
      pointHoverBorderWidth: 4,
      pointHoverBackgroundColor: &quot;#219ff8&quot;,
      pointHoverBorderColor: &quot;#fff&quot;,
      pointHitRadius: 20,
      spanGaps: false,
      data: dailyBookingsValues,
    }]
  };


  let options = {
    animation: false,
    layout: {
      padding: {
        top: 0
      }
    },
    interaction: {
      mode: &#039;index&#039;,
      intersect: false,
    },
    maintainAspectRatio: false,
    plugins: {
      verticalLiner: {},
      legend: {
        display: false
      },
    },
    scales: {
      x: {
        display: true,
        ticks: {
          fontFamily: fontFamily,
          maxRotation: 0,
          color: &#039;#788291&#039;,
          font: {
            size: 10,
            family: fontFamily
          },
          callback: function (value, index, ticks) {
            if(ticks.length){
              return ((index + 2) % Math.round(ticks.length/8)) ? &#039;&#039; : this.getLabelForValue(value)
            }else{
              return this.getLabelForValue(value)
            }
          }
        },
        grid: {
          borderDash: [1, 5],
          color: &#039;rgba(0,0,0,0.35)&#039;,
          zeroLineColor: &#039;rgba(0,0,0,0.15)&#039;,
        },
      },
      y: {
        max: maxValue,
        grid: {
          color: &#039;rgba(0,0,0,0.05)&#039;,
          zeroLineColor: &#039;rgba(0,0,0,0.05)&#039;,
        },
        display: false,
        ticks: {
          beginAtZero: true,
          fontSize: &#039;10&#039;,
          fontColor: &#039;#000&#039;
        }
      }

    }
  }

  const plugin = {
    id: &#039;verticalLiner&#039;,
    afterInit: (chart, args, opts) =&gt; {
      chart.verticalLiner = {}
    },
    afterEvent: (chart, args, options) =&gt; {
      const {inChartArea} = args
      chart.verticalLiner = {draw: inChartArea}
    },
    beforeTooltipDraw: (chart, args, options) =&gt; {
      const {draw} = chart.verticalLiner
      if (!draw) return

      const {ctx} = chart
      const {top, bottom} = chart.chartArea
      const {tooltip} = args
      const x = tooltip.caretX
      if (!x) return

      ctx.save()

      ctx.beginPath()
      ctx.moveTo(x, top)
      ctx.lineTo(x, bottom)
      ctx.stroke()

      ctx.restore()
    }
  }

  // line chart init
  let chartDailyBookings = new Chart($dailyBookingsChart, {
    type: &#039;line&#039;,
    data: chartDailyBookingsData,
    options: options,
    plugins: [plugin],
  });
}


function latepoint_init_customer_donut_chart() {
  if (typeof Chart !== &#039;undefined&#039; &amp;&amp; jQuery(&#039;.os-customer-donut-chart&#039;).length) {
    var fontFamily = latepoint_helper.body_font_family;
    // set defaults
    Chart.defaults.defaultFontFamily = fontFamily;
    Chart.defaults.defaultFontSize = 16;
    Chart.defaults.defaultFontStyle = &#039;400&#039;;

    Chart.defaults.plugins.tooltip.titleFont = {family: fontFamily, size: 14, weight: 400};
    Chart.defaults.plugins.tooltip.titleColor = &#039;rgba(255,255,255,0.6)&#039;;
    Chart.defaults.plugins.tooltip.backgroundColor = &#039;#000&#039;;
    Chart.defaults.plugins.tooltip.titleMarginBottom = 1;
    Chart.defaults.plugins.tooltip.bodyFont = {family: fontFamily, size: 18, weight: 500};
    Chart.defaults.plugins.tooltip.displayColors = false;
    Chart.defaults.plugins.tooltip.padding = 5;
    Chart.defaults.plugins.tooltip.yAlign = &#039;bottom&#039;;
    Chart.defaults.plugins.tooltip.xAlign = &#039;center&#039;;
    Chart.defaults.plugins.tooltip.cornerRadius = 4;
    Chart.defaults.plugins.tooltip.intersect = false;
    jQuery(&#039;.os-customer-donut-chart&#039;).each(function (index) {
      var chart_colors = jQuery(this).data(&#039;chart-colors&#039;).toString().split(&#039;,&#039;);
      var chart_labels = jQuery(this).data(&#039;chart-labels&#039;).toString().split(&#039;,&#039;);
      var chart_values = jQuery(this).data(&#039;chart-values&#039;).toString().split(&#039;,&#039;).map(Number);
      var $chart_canvas = jQuery(this);
      var chartDonut = new Chart($chart_canvas, {
        type: &#039;doughnut&#039;,
        data: {
          labels: chart_labels,
          datasets: [{
            data: chart_values,
            backgroundColor: chart_colors,
            hoverBackgroundColor: chart_colors,
            borderWidth: 0,
            hoverBorderColor: &#039;transparent&#039;
          }]
        },
        options: {
          layout: {
            padding: {
              top: 10,
              bottom: 10,
              left: 10,
              right: 10
            }
          },
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              callbacks: {
                title: function (tooltipItem) {
                  return tooltipItem[0].label;
                },
                label: function (tooltipItem) {
                  return tooltipItem.parsed;
                },
              }
            },
          },
          animation: {
            animateRotate: false
          },
          cutout: &quot;90%&quot;,
          responsive: false,
          maintainAspectRatio: true,
        }
      });
    });
  }
}

function latepoint_init_donut_charts() {
  if (typeof Chart !== &#039;undefined&#039; &amp;&amp; jQuery(&#039;.os-donut-chart&#039;).length) {
    var fontFamily = latepoint_helper.body_font_family;
    // set defaults
    Chart.defaults.defaultFontFamily = fontFamily;
    Chart.defaults.defaultFontSize = 18;
    Chart.defaults.defaultFontStyle = &#039;400&#039;;

    Chart.defaults.plugins.tooltip.titleFont.family = fontFamily;
    Chart.defaults.plugins.tooltip.titleFont.size = 14;
    Chart.defaults.plugins.tooltip.titleColor = &#039;rgba(255,255,255,0.6)&#039;;
    Chart.defaults.plugins.tooltip.backgroundColor = &#039;#000&#039;;
    Chart.defaults.plugins.tooltip.titleFont.style = &#039;400&#039;;
    Chart.defaults.plugins.tooltip.titleMarginBottom = 1;
    Chart.defaults.plugins.tooltip.bodyFont.family = fontFamily;
    Chart.defaults.plugins.tooltip.bodyFont.size = 24;
    Chart.defaults.plugins.tooltip.bodyFont.style = &#039;500&#039;;
    Chart.defaults.plugins.tooltip.displayColors = false;
    Chart.defaults.plugins.tooltip.padding.x = 10;
    Chart.defaults.plugins.tooltip.padding.y = 8;
    Chart.defaults.plugins.tooltip.yAlign = &#039;bottom&#039;;
    Chart.defaults.plugins.tooltip.xAlign = &#039;center&#039;;
    Chart.defaults.plugins.tooltip.cornerRadius = 8;
    Chart.defaults.plugins.tooltip.intersect = false;
    jQuery(&#039;.os-donut-chart&#039;).each(function (index) {
      var chart_colors = jQuery(this).data(&#039;chart-colors&#039;).toString().split(&#039;,&#039;);
      var chart_labels = jQuery(this).data(&#039;chart-labels&#039;).toString().split(&#039;,&#039;);
      var chart_values = jQuery(this).data(&#039;chart-values&#039;).toString().split(&#039;,&#039;).map(Number);
      var $chart_canvas = jQuery(this);
      var chartDonut = new Chart($chart_canvas, {
        type: &#039;doughnut&#039;,
        data: {
          labels: chart_labels,
          datasets: [{
            data: chart_values,
            backgroundColor: chart_colors,
            hoverBackgroundColor: chart_colors,
            borderWidth: 0,
            hoverBorderColor: &#039;transparent&#039;
          }]
        },
        options: {
          layout: {
            padding: {
              top: 40
            }
          },
          plugins: {
            legend: {
              display: false
            },
            tooltip: {
              callbacks: {
                title: function (tooltipItem, data) {
                  return data[&#039;labels&#039;][tooltipItem[0][&#039;index&#039;]];
                },
                label: function (tooltipItem, data) {
                  return data[&#039;datasets&#039;][0][&#039;data&#039;][tooltipItem[&#039;index&#039;]];
                }
              }
            }
          },
          animation: {
            animateScale: true
          },
          cutoutPercentage: 96,
          responsive: false,
          maintainAspectRatio: true,
        }
      });
    });
  }
}


function latepoint_init_circles_charts() {
  jQuery(&#039;.circle-chart&#039;).each(function (index) {
    var chart_elem_id = jQuery(this).prop(&#039;id&#039;);
    var max_value = jQuery(this).data(&#039;max-value&#039;);
    var chart_value = jQuery(this).data(&#039;chart-value&#039;);
    var chart_color = jQuery(this).data(&#039;chart-color&#039;);
    var chart_color_fade = jQuery(this).data(&#039;chart-color-fade&#039;);
    var myCircle = Circles.create({
      id: chart_elem_id,
      radius: 25,
      value: chart_value,
      maxValue: max_value,
      width: 2,
      text: function (value) {
        return Math.round(value);
      },
      colors: [chart_color, chart_color_fade],
      duration: 200,
      wrpClass: &#039;circles-wrp&#039;,
      textClass: &#039;circles-text&#039;,
      valueStrokeClass: &#039;circles-valueStroke&#039;,
      maxValueStrokeClass: &#039;circles-maxValueStroke&#039;,
      styleWrapper: true,
      styleText: true
    });

  });


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