extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 23:00:56 +01:00
Code Issues Packages Projects Releases Wiki Activity

Calendar refactors:

Browse Source 
- Remove some more jQueryUI.datepicker usages
This commit is contained in:
nathan 2022-05-02 15:23:03 -06:00
parent 1de2a89eeb
commit b0a57a05fd
5 changed files with 39 additions and 105 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/js/etemplate/Et2Date/Et2Date.ts
View File

@ -239,7 +239,7 @@ export function formatDate(date : Date, options = {dateFormat: ""}) : string
m: (date.getUTCMonth() < 9 ? "0" : "") + (date.getUTCMonth() + 1), m: (date.getUTCMonth() < 9 ? "0" : "") + (date.getUTCMonth() + 1),
Y: "" + date.getUTCFullYear() Y: "" + date.getUTCFullYear()
} }
let re = new RegExp(Object.keys(replace_map).join("|"), "gi"); let re = new RegExp(Object.keys(replace_map).join("|"), "g");
_value = dateformat.replace(re, function(matched) _value = dateformat.replace(re, function(matched)
{ {
return replace_map[matched]; return replace_map[matched];

30
calendar/js/app.ts
View File

@ -51,8 +51,10 @@ import {et2_checkbox} from "../../api/js/etemplate/et2_widget_checkbox";
import {et2_grid} from "../../api/js/etemplate/et2_widget_grid"; import {et2_grid} from "../../api/js/etemplate/et2_widget_grid";
import {Et2Textbox} from "../../api/js/etemplate/Et2Textbox/Et2Textbox"; import {Et2Textbox} from "../../api/js/etemplate/Et2Textbox/Et2Textbox";
import "./SidemenuDate"; import "./SidemenuDate";
import {parseDate} from "../../api/js/etemplate/Et2Date/Et2Date"; import {formatDate, formatTime, parseDate} from "../../api/js/etemplate/Et2Date/Et2Date";
import {EGW_KEY_PAGE_UP,EGW_KEY_PAGE_DOWN} from "../../api/js/egw_action/egw_action_constants"; import {EGW_KEY_PAGE_DOWN, EGW_KEY_PAGE_UP} from "../../api/js/egw_action/egw_action_constants";
import {nm_action} from "../../api/js/etemplate/et2_extension_nextmatch_actions";
import flatpickr from "flatpickr";
/** /**
* UI for calendar * UI for calendar
@ -3337,10 +3339,12 @@ export class CalendarApp extends EgwApp
if (state.name) if (state.name)
{ {
// 'blank' is the special name for no filters, send that instead of the nice translated name // 'blank' is the special name for no filters, send that instead of the nice translated name
state.state.favorite = jQuery.isEmptyObject(state) || jQuery.isEmptyObject(state.state||state.filter) ? 'blank' : state.name.replace(/[^A-Za-z0-9-_]/g, '_'); state.state.favorite = jQuery.isEmptyObject(state) || jQuery.isEmptyObject(state.state || state.filter) ? 'blank' : state.name.replace(/[^A-Za-z0-9-_]/g, '_');
// set date for "No Filter" (blank) favorite to todays date // set date for "No Filter" (blank) favorite to todays date
if (state.state.favorite == 'blank') if(state.state.favorite == 'blank')
state.state.date = jQuery.datepicker.formatDate('yymmdd', new Date); {
state.state.date = formatDate(new Date, {dateFormat: 'yymmdd'});
}
} }
menuaction = 'calendar.calendar_uilist.listview'; menuaction = 'calendar.calendar_uilist.listview';
state.state.ajax = 'true'; state.state.ajax = 'true';
@ -4022,7 +4026,7 @@ export class CalendarApp extends EgwApp
if (display_day) if (display_day)
{ {
range = jQuery.datepicker.formatDate('DD',first_format)+(datefmt[0] != 'd' ? ' ' : ', '); range = flatpickr.formatDate(first_format, 'l') + (datefmt[0] != 'd' ? ' ' : ', ');
} }
for (var i = 0; i < 5; i += 2) for (var i = 0; i < 5; i += 2)
{ {
@ -4034,7 +4038,7 @@ export class CalendarApp extends EgwApp
{ {
if (!month_before_day) if (!month_before_day)
{ {
range += jQuery.datepicker.formatDate('MM',first_format); range += flatpickr.formatDate(first_format, "F");
} }
if (first.getFullYear() != last.getFullYear() && datefmt[0] != 'Y') if (first.getFullYear() != last.getFullYear() && datefmt[0] != 'Y')
{ {
@ -4042,7 +4046,7 @@ export class CalendarApp extends EgwApp
} }
if (display_time) if (display_time)
{ {
range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),first_format); range += ' ' + formatTime(first_format);
} }
if (!last) if (!last)
{ {
@ -4057,14 +4061,14 @@ export class CalendarApp extends EgwApp
if (month_before_day) if (month_before_day)
{ {
range += jQuery.datepicker.formatDate('MM',last_format); range += flatpickr.formatDate(last_format, 'l');
} }
} }
else if (last) else if (last)
{ {
if (display_time) if (display_time)
{ {
range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),last_format); range += ' ' + formatTime(last_format);
} }
if(last) if(last)
{ {
@ -4078,7 +4082,7 @@ export class CalendarApp extends EgwApp
break; break;
case 'm': case 'm':
case 'M': case 'M':
range += ' '+jQuery.datepicker.formatDate('MM',month_before_day || !last ? first_format : last_format) + ' '; range += ' ' + flatpickr.formatDate(month_before_day || !last ? first_format : last_format, "l") + ' ';
break; break;
case 'Y': case 'Y':
if (datefmt[0] != 'm') if (datefmt[0] != 'm')
@ -4090,7 +4094,7 @@ export class CalendarApp extends EgwApp
} }
if (display_time && last) if (display_time && last)
{ {
range += ' '+jQuery.datepicker.formatDate(dateTimeFormat(timefmt),last_format); range += ' ' + formatTime(last_format);
} }
if (datefmt[4] == 'Y' && datefmt[0] == 'm') if (datefmt[4] == 'Y' && datefmt[0] == 'm')
{ {
@ -4123,7 +4127,7 @@ export class CalendarApp extends EgwApp
d.setUTCDate(d.getUTCDate() + 2); d.setUTCDate(d.getUTCDate() + 2);
} }
return jQuery.datepicker.iso8601Week(new Date(d.valueOf() + d.getTimezoneOffset() * 60 * 1000)); return flatpickr.formatDate(new Date(d.valueOf() + d.getTimezoneOffset() * 60 * 1000), "W");
}, },
start_of_week: function(date) start_of_week: function(date)
{ {

73
calendar/js/et2_widget_event.ts
View File

@ -26,6 +26,7 @@ import {egw} from "../../api/js/jsapi/egw_global";
import {et2_selectbox} from "../../api/js/etemplate/et2_widget_selectbox"; import {et2_selectbox} from "../../api/js/etemplate/et2_widget_selectbox";
import {et2_container} from "../../api/js/etemplate/et2_core_baseWidget"; import {et2_container} from "../../api/js/etemplate/et2_core_baseWidget";
import {Et2Dialog} from "../../api/js/etemplate/Et2Dialog/Et2Dialog"; import {Et2Dialog} from "../../api/js/etemplate/Et2Dialog/Et2Dialog";
import {formatTime} from "../../api/js/etemplate/Et2Date/Et2Date";
/** /**
* Class for a single event, displayed in either the timegrid or planner view * Class for a single event, displayed in either the timegrid or planner view
@ -391,26 +392,17 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
} }
else else
{ {
// @ts-ignore // @ts-ignore
const start_time = jQuery.datepicker.formatTime( const start_time = formatTime(event.start).trim();
egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
{
hour: event.start_m / 60,
minute: event.start_m % 60,
seconds: 0,
timezone: 0
},
{"ampm": (egw.preference("timeformat") === "12")}
).trim();
this.body
.html('<span class="calendar_calEventTitle">' + title + '</span>')
.append('<span class="calendar_calTimespan">' + start_time + '</span>');
if(this.options.value.description.trim())
{
this.body this.body
.html('<span class="calendar_calEventTitle">' + title + '</span>') .append('<p>' + egw.htmlspecialchars(this.options.value.description) + '</p>');
.append('<span class="calendar_calTimespan">' + start_time + '</span>'); }
if (this.options.value.description.trim())
{
this.body
.append('<p>' + egw.htmlspecialchars(this.options.value.description) + '</p>');
}
} }
// Clear tooltip for regeneration // Clear tooltip for regeneration
@ -768,26 +760,9 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
if (event['end_m'] > 24 * 60) if (event['end_m'] > 24 * 60)
{ {
// @ts-ignore // @ts-ignore
timespan = jQuery.datepicker.formatTime( timespan = formatTime(event.start)
egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm", // @ts-ignore
{ .trim() + ' - ' + formatTime(event.end).trim();
hour: event.start_m / 60,
minute: event.start_m % 60,
seconds: 0,
timezone: 0
},
{"ampm": (egw.preference("timeformat") === "12")}
// @ts-ignore
).trim() + ' - ' + jQuery.datepicker.formatTime(
egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
{
hour: event.end_m / 60,
minute: event.end_m % 60,
seconds: 0,
timezone: 0
},
{"ampm": (egw.preference("timeformat") === "12")}
).trim();
} }
else else
{ {
@ -802,28 +777,10 @@ export class et2_calendar_event extends et2_valueWidget implements et2_IDetached
duration = Math.floor(duration / 60) + this.egw().lang('h') + (duration % 60 ? duration % 60 : ''); duration = Math.floor(duration / 60) + this.egw().lang('h') + (duration % 60 ? duration % 60 : '');
// @ts-ignore // @ts-ignore
timespan = jQuery.datepicker.formatTime( timespan = formatTime(event.start).trim();
egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
{
hour: event.start_m / 60,
minute: event.start_m % 60,
seconds: 0,
timezone: 0
},
{"ampm": (egw.preference("timeformat") === "12")}
).trim();
// @ts-ignore // @ts-ignore
timespan += ' - ' + jQuery.datepicker.formatTime( timespan += ' - ' + formatTime(event.end);
egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
{
hour: event.end_m / 60,
minute: event.end_m % 60,
seconds: 0,
timezone: 0
},
{"ampm": (egw.preference("timeformat") === "12")}
).trim();
timespan += ': ' + duration; timespan += ': ' + duration;
} }

15
calendar/js/et2_widget_planner.ts
View File

@ -31,7 +31,7 @@ import {CalendarApp} from "./app";
import {sprintf} from "../../api/js/egw_action/egw_action_common.js"; import {sprintf} from "../../api/js/egw_action/egw_action_common.js";
import {et2_dataview_grid} from "../../api/js/etemplate/et2_dataview_view_grid"; import {et2_dataview_grid} from "../../api/js/etemplate/et2_dataview_view_grid";
import {et2_selectbox} from "../../api/js/etemplate/et2_widget_selectbox"; import {et2_selectbox} from "../../api/js/etemplate/et2_widget_selectbox";
import {formatDate} from "../../api/js/etemplate/Et2Date/Et2Date"; import {formatDate, formatTime} from "../../api/js/etemplate/Et2Date/Et2Date";
import {holidays} from "../../api/js/etemplate/Et2Date/Holidays"; import {holidays} from "../../api/js/etemplate/Et2Date/Holidays";
/** /**
@ -1771,18 +1771,9 @@ export class et2_calendar_planner extends et2_calendar_view implements et2_IDeta
*/ */
_drag_helper(element, position ,height) _drag_helper(element, position ,height)
{ {
var time = this._get_time_from_position(position.left, position.top); let time = this._get_time_from_position(position.left, position.top);
element.dropEnd = time; element.dropEnd = time;
var formatted_time = jQuery.datepicker.formatTime( let formatted_time = formatTime(time);
egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
{
hour: time.getUTCHours(),
minute: time.getUTCMinutes(),
seconds: 0,
timezone: 0
},
{"ampm": (egw.preference("timeformat") === "12")}
);
element.innerHTML = '<div class="calendar_d-n-d_timeCounter"><span class="calendar_timeDemo" >'+formatted_time+'</span></div>'; element.innerHTML = '<div class="calendar_d-n-d_timeCounter"><span class="calendar_timeDemo" >'+formatted_time+'</span></div>';

24
calendar/js/et2_widget_timegrid.ts
View File

@ -27,7 +27,7 @@ import {egw_getObjectManager, egwActionObject} from "../../api/js/egw_action/egw
import {et2_compileLegacyJS} from "../../api/js/etemplate/et2_core_legacyJSFunctions"; import {et2_compileLegacyJS} from "../../api/js/etemplate/et2_core_legacyJSFunctions";
import {Et2Dialog} from "../../api/js/etemplate/Et2Dialog/Et2Dialog"; import {Et2Dialog} from "../../api/js/etemplate/Et2Dialog/Et2Dialog";
import {EGW_AI_DRAG_OUT, EGW_AI_DRAG_OVER} from "../../api/js/egw_action/egw_action_constants.js"; import {EGW_AI_DRAG_OUT, EGW_AI_DRAG_OVER} from "../../api/js/egw_action/egw_action_constants.js";
import {formatDate} from "../../api/js/etemplate/Et2Date/Et2Date"; import {formatDate, formatTime, parseTime} from "../../api/js/etemplate/Et2Date/Et2Date";
/** /**
* Class which implements the "calendar-timegrid" XET-Tag for displaying a span of days * Class which implements the "calendar-timegrid" XET-Tag for displaying a span of days
@ -426,16 +426,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
else else
{ {
// @ts-ignore // @ts-ignore
time = jQuery.datepicker.formatTime( time = formatTime(parseTime(element.dropEnd.attr('data-hour') + ":" + element.dropEnd.attr('data-minute')));
egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
{
hour: element.dropEnd.attr('data-hour'),
minute: element.dropEnd.attr('data-minute'),
seconds: 0,
timezone: 0
},
{"ampm": (egw.preference("timeformat") == "12")}
);
} }
element.innerHTML = '<div style="font-size: 1.1em; text-align:center; font-weight: bold; height:100%;"><span class="calendar_timeDemo" >'+time+'</span></div>'; element.innerHTML = '<div style="font-size: 1.1em; text-align:center; font-weight: bold; height:100%;"><span class="calendar_timeDemo" >'+time+'</span></div>';
} }
@ -852,16 +843,7 @@ export class et2_calendar_timegrid extends et2_calendar_view implements et2_IDet
html += '<div class="calendar_calTimeRow' + working_hours + '" style="height: '+(100/row_count)+'%;">'; html += '<div class="calendar_calTimeRow' + working_hours + '" style="height: '+(100/row_count)+'%;">';
// show time for full hours, always for 45min interval and at least on every 3 row // show time for full hours, always for 45min interval and at least on every 3 row
// @ts-ignore // @ts-ignore
var time = jQuery.datepicker.formatTime( let time = formatTime(parseTime((t / 60) + ":" + (t % 60)));
egw.preference("timeformat") === "12" ? "h:mmtt" : "HH:mm",
{
hour: t / 60,
minute: t % 60,
seconds: 0,
timezone: 0
},
{"ampm": (egw.preference("timeformat") === "12")}
);
var time_label = (typeof show[granularity] === 'undefined' ? t % 60 === 0 : show[granularity].indexOf(t % 60) !== -1) ? time : ''; var time_label = (typeof show[granularity] === 'undefined' ? t % 60 === 0 : show[granularity].indexOf(t % 60) !== -1) ? time : '';
if(time_label && egw.preference("timeformat") == "12" && time_label.split(':')[0] < 10) if(time_label && egw.preference("timeformat") == "12" && time_label.split(':')[0] < 10)