tsanie/ui-lib
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

sync

Browse Source
This commit is contained in:
Chen Lily
2024-01-17 17:31:41 +08:00
parent 84190ed9f1
commit fb9e920c15
35 changed files with 3003 additions and 1304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

274
lib/element/schedule.js Normal file
View File

@ -0,0 +1,274 @@
import { Grid, GridColumn, createElement, setTooltip, createIcon, createCheckbox, createRadiobox, showAlert, showConfirm, Popup, Dropdown, validation } from "../ui";
import { r as lang, nullOrEmpty, formatUrl, escapeEmoji, isEmail, isPhone } from "../utility";
let r = lang;
function datepicker(element) {
if (typeof $?.fn?.datepicker === 'function') {
$(element).datepicker({
autoHide: true,
format: 'm/dd/yyyy'
});
}
return element;
}
export default class ScheduleItem {
_var = {};
constructor(opt) {
this._var.option = opt ?? {};
const getText = opt?.getText;
if (typeof getText === 'function') {
r = getText;
}
}
get checkOccurOnce() { return this._var.container.querySelector('.schedule-id-box-occur-once>input'); }
get checkOccurEvery() { return this._var.container.querySelector('.schedule-id-box-occur-every>input'); }
get inputOccurOnce() { return this._var.container.querySelector('.schedule-id-occur-once'); }
get inputOccurEvery() { return this._var.container.querySelector('.schedule-id-occur-every'); }
get inputOccurStarting() { return this._var.container.querySelector('.schedule-id-occur-starting') }
get inputOccurEnding() { return this._var.container.querySelector('.schedule-id-occur-ending') }
changeDailyFrequency(once) {
this.inputOccurOnce.disabled = !once;
this.inputOccurEvery.disabled = once;
this.inputOccurStarting.disabled = once;
this.inputOccurEnding.disabled = once;
}
getParameters() {
return {
Enabled: this._var.container.querySelector('.schedule-id-enabled>input').checked,
Schedule: {
Frequency: Number(this.dropFrequency.selected.value),
Daily: {
OcurrsOnce: this.checkOccurOnce.checked,
OcurrsOnceAt: this.inputOccurOnce.value,
OcurrsInterval: Number(this.inputOccurEvery.value),
StartingAt: this.inputOccurStarting.value,
EndingAt: this.inputOccurEnding.value
},
Monday: this._var.container.querySelector('.schedule-id-1>input').checked,
Tuesday: this._var.container.querySelector('.schedule-id-2>input').checked,
Wednesday: this._var.container.querySelector('.schedule-id-3>input').checked,
Thursday: this._var.container.querySelector('.schedule-id-4>input').checked,
Friday: this._var.container.querySelector('.schedule-id-5>input').checked,
Saturday: this._var.container.querySelector('.schedule-id-6>input').checked,
Sunday: this._var.container.querySelector('.schedule-id-7>input').checked,
DayOfMonth: Number(this._var.container.querySelector('.schedule-id-dayofmonth').value),
StartDate: this._var.container.querySelector('.schedule-id-duration-start').value,
EndDate: this._var.container.querySelector('.schedule-id-duration-end').value
}
};
}
getDateTime(s) {
if (typeof s === 'string') {
const d = new Date(s);
return isNaN(d.getTime()) ? new Date() : d;
}
return s;
}
getTimeString(s) {
const d = this.getDateTime(s);
return String(d.getHours()).padStart(2, '0') + ':' + String(d.getMinutes()).padStart(2, '0');
}
getDateString(s) {
const d = this.getDateTime(s);
return String(d.getMonth() + 1).padStart(2, '0') + '/' + String(d.getDate()).padStart(2, '0') + '/' + String(d.getFullYear());
}
setParameters(p) {
this._var.container.querySelector('.schedule-id-enabled>input').checked = p.Enabled;
const schedule = p.Schedule || {};
this.dropFrequency.select(String(schedule.Frequency));
let checker = schedule.Daily.OcurrsOnce ? this.checkOccurOnce : this.checkOccurEvery;
checker.checked = true;
checker.dispatchEvent(new Event('change'));
this.inputOccurOnce.value = this.getTimeString(schedule.Daily.OcurrsOnceAt);
this.inputOccurEvery.value = String(schedule.Daily.OcurrsInterval);
this.inputOccurStarting.value = this.getTimeString(schedule.Daily.StartingAt);
this.inputOccurEnding.value = this.getTimeString(schedule.Daily.EndingAt);
this._var.container.querySelector('.schedule-id-1>input').checked = schedule.Monday;
this._var.container.querySelector('.schedule-id-2>input').checked = schedule.Tuesday;
this._var.container.querySelector('.schedule-id-3>input').checked = schedule.Wednesday;
this._var.container.querySelector('.schedule-id-4>input').checked = schedule.Thursday;
this._var.container.querySelector('.schedule-id-5>input').checked = schedule.Friday;
this._var.container.querySelector('.schedule-id-6>input').checked = schedule.Saturday;
this._var.container.querySelector('.schedule-id-7>input').checked = schedule.Sunday;
this._var.container.querySelector('.schedule-id-dayofmonth').value = String(schedule.DayOfMonth);
const start = this.getDateString(schedule.StartDate);
const end = this.getDateString(schedule.EndDate);
if (typeof $?.fn?.datepicker === 'function') {
$(this._var.container.querySelector('.schedule-id-duration-start')).datepicker('setDate', new Date(start));
$(this._var.container.querySelector('.schedule-id-duration-end')).datepicker('setDate', new Date(end));
} else {
this._var.container.querySelector('.schedule-id-duration-start').value = start;
this._var.container.querySelector('.schedule-id-duration-end').value = end;
}
}
create() {
const option = this._var.option;
const drop = new Dropdown({ selected: '0' });
this.dropFrequency = drop;
drop.source = [
{ value: '0', text: 'Daily' },
{ value: '1', text: 'Weekly' },
{ value: '2', text: 'Monthly' }
];
drop.onselected = item => {
container.querySelector('.schedule-item-weekly').style.display = item.value === '1' ? '' : 'none';
const monthly = item.value === '2';
container.querySelector('.schedule-item-monthly').style.display = monthly ? '' : 'none';
if (!monthly) {
const dayofmonth = this._var.container.querySelector('.schedule-id-dayofmonth');
if (dayofmonth.classList.contains('validation-error')) {
dayofmonth.value = '1';
}
}
};
const container = createElement('div', 'schedule-item-container',
createElement('fieldset', 'schedule-item-frequency',
createElement('legend', legend => legend.innerText = 'Frequency'),
createElement('div', 'schedule-item-line',
createElement('span', span => span.innerText = 'Occurs'),
drop.create()
),
createElement('div', div => {
div.className = 'schedule-item-panel schedule-item-weekly';
div.style.display = 'none';
},
createElement('table', 'schedule-item-table',
createElement('tr', 'schedule-item-tr',
createElement('td', null, createCheckbox({ className: 'schedule-id-1', label: 'Monday' })),
createElement('td', null, createCheckbox({ className: 'schedule-id-3', label: 'Wednesday' })),
createElement('td', null, createCheckbox({ className: 'schedule-id-5', label: 'Friday' })),
createElement('td', null, createCheckbox({ className: 'schedule-id-6', label: 'Saturday' }))
),
createElement('tr', 'schedule-item-tr',
createElement('td', null, createCheckbox({ className: 'schedule-id-2', label: 'Tuesday' })),
createElement('td', null, createCheckbox({ className: 'schedule-id-4', label: 'Thursday' })),
createElement('td'),
createElement('td', null, createCheckbox({ className: 'schedule-id-7', label: 'Sunday' }))
)
)
),
createElement('div', div => {
div.className = 'schedule-item-panel schedule-item-monthly';
div.style.display = 'none';
},
createElement('div', 'schedule-item-line',
createElement('span', span => span.innerText = 'On day'),
validation(
createElement('input', i => { i.type = 'text', i.className = 'ui-input schedule-id-dayofmonth', i.maxLength = 2 }),
/^([0]?[1-9]|[12][0-9]|[3][01])$/
),
createElement('span', span => span.innerText = 'of the month')
)
)
),
createElement('fieldset', 'schedule-item-daily-frequency',
createElement('legend', legend => legend.innerText = 'Daily frequency'),
createElement('div', 'schedule-item-line',
createRadiobox({
name: 'schedule-daily-occurs',
checked: true,
className: 'schedule-id-box-occur-once',
label: 'Occurs once at',
onchange: e => this.changeDailyFrequency(e.target.checked)
}),
validation(
createElement('input', i => { i.type = 'text', i.className = 'ui-input schedule-id-occur-once', i.maxLength = 5 }),
/^([01][0-9]|[2][0-3]):[0-5][0-9]$/
)
),
createElement('div', 'schedule-item-line schedule-item-line-occur-every',
createRadiobox({
name: 'schedule-daily-occurs',
className: 'schedule-id-box-occur-every',
label: 'Occurs every',
onchange: e => this.changeDailyFrequency(!e.target.checked)
}),
validation(
createElement('input', i => { i.type = 'text', i.className = 'ui-input schedule-id-occur-every', i.maxLength = 5 }),
/^([0][1-9]+|[1-9][0-9]*)$/
),
createElement('span', span => span.innerText = 'minute(s)'),
createElement('div', 'schedule-item-placeholder'),
createElement('div', 'schedule-item-block',
createElement('div', 'scheldule-item-line',
createElement('span', span => span.innerText = 'Starting at'),
validation(
createElement('input', i => { i.type = 'text', i.className = 'ui-input schedule-id-occur-starting', i.maxLength = 5 }),
/^([01][0-9]|[2][0-3]):[0-5][0-9]$/
)
),
createElement('div', 'scheldule-item-line',
createElement('span', span => span.innerText = 'Ending at'),
validation(
createElement('input', i => { i.type = 'text', i.className = 'ui-input schedule-id-occur-ending', i.maxLength = 5 }),
/^([01][0-9]|[2][0-3]):[0-5][0-9]$/
)
)
)
)
),
createElement('fieldset', 'schedule-item-duration',
createElement('legend', legend => legend.innerText = 'Duration'),
createElement('div', 'schedule-item-line schedule-item-line-duration',
createElement('span', span => span.innerText = 'Start date'),
datepicker(
validation(
createElement('input', i => { i.type = 'text', i.className = 'ui-input schedule-id-duration-start', i.maxLength = 10 }),
/^([0]?[1-9]|[1][0-2])\/([0]?[1-9]|[12][0-9]|[3][01])\/[0-9]{4}$/
)
),
createElement('div', 'schedule-item-placeholder'),
createElement('span', span => span.innerText = 'End date'),
datepicker(
validation(
createElement('input', i => { i.type = 'text', i.className = 'ui-input schedule-id-duration-end', i.maxLength = 10 }),
/^([0]?[1-9]|[1][0-2])\/([0]?[1-9]|[12][0-9]|[3][01])\/[0-9]{4}$/
)
)
),
createElement('div', 'schedule-item-line',
createCheckbox({ className: 'schedule-id-enabled', checked: true, label: 'Enabled' })
)
)
);
this._var.container = container;
if (option.parameter == null) {
option.parameter = {
Enabled: true,
Schedule: {
Frequency: 0,
Daily: {
OcurrsOnce: true,
OcurrsOnceAt: '00:00',
OcurrsInterval: 60,
StartingAt: '00:00',
EndingAt: '23:00'
},
Monday: true,
Tuesday: false,
Wednesday: false,
Thursday: false,
Friday: false,
Saturday: false,
Sunday: false,
DayOfMonth: 1,
StartDate: '',
EndDate: ''
}
};
}
this.setParameters(option.parameter);
return container;
}
}

1
lib/element/style.css Normal file
View File

@ -0,0 +1 @@
.schedule-item-container fieldset{margin-top:10px;border-width:1px;border-radius:4px;border-color:var(--border-color)}.schedule-item-container fieldset legend,.schedule-item-container fieldset span{font-weight:400;font-size:var(--font-size);padding-left:8px;padding-right:6px;color:var(--color)}.schedule-item-container fieldset .ui-input{line-height:20px}.schedule-item-container fieldset .schedule-item-monthly{margin-top:5px}.schedule-item-container fieldset .schedule-item-monthly .ui-input{width:40px}.schedule-item-container fieldset.schedule-item-daily-frequency .ui-input{vertical-align:top;margin-top:5px}.schedule-item-container fieldset .schedule-item-table{width:100%}.schedule-item-container fieldset .schedule-item-line-occur-every{display:flex;align-items:flex-start}.schedule-item-container fieldset .schedule-item-line-occur-every>.schedule-item-block>.scheldule-item-line{display:flex;align-items:center;margin-top:5px}.schedule-item-container fieldset .schedule-item-line-occur-every>.schedule-item-block>.scheldule-item-line>span{flex:1 1 auto}.schedule-item-container fieldset .schedule-item-line-occur-every>.schedule-item-block>.scheldule-item-line>.ui-input{margin-top:0}.schedule-item-container fieldset .schedule-item-line-occur-every>span{line-height:36px}.schedule-item-container fieldset .schedule-item-line-occur-every .ui-input{width:70px}.schedule-item-container fieldset .schedule-item-line-duration{display:flex;align-items:center;height:36px}.schedule-item-container fieldset .schedule-item-line>.schedule-item-placeholder{flex:1 1 auto}.schedule-item-container .schedule-item-frequency{margin-top:0}

91
lib/element/style.scss Normal file
View File

@ -0,0 +1,91 @@
.schedule-item-container {
fieldset {
margin-top: 10px;
border-width: 1px;
border-radius: 4px;
border-color: var(--border-color);
legend,
span {
font-weight: 400;
font-size: var(--font-size);
padding-left: 8px;
padding-right: 6px;
color: var(--color);
}
.ui-input {
line-height: 20px;
height: 20px;
}
.schedule-item-monthly {
margin-top: 5px;
.ui-input {
width: 40px;
}
}
&.schedule-item-daily-frequency .ui-input {
vertical-align: top;
margin-top: 5px;
}
.schedule-item-table {
width: 100%;
}
.schedule-item-line-occur-every {
display: flex;
align-items: flex-start;
>.schedule-item-block>.scheldule-item-line {
display: flex;
align-items: center;
margin-top: 5px;
>span {
flex: 1 1 auto;
}
>.ui-input {
margin-top: 0;
}
}
>span {
line-height: 36px;
}
.ui-input {
width: 70px;
}
}
.schedule-item-line-duration {
display: flex;
align-items: center;
height: 36px;
}
.schedule-item-line {
>.schedule-item-placeholder {
flex: 1 1 auto;
}
}
}
.schedule-item-frequency {
margin-top: 0;
>.schedule-item-line {
line-height: 24px;
}
}
.ui-drop-wrapper>.ui-drop-header {
height: 24px;
}
}