[ref] Refactor js/etersoft/timer.js. #14950

parent 103d7dc8
//Номер баги
var bugId = getIdFromUrl() || getBugIdFromField();
let bugId = getIdFromUrl() || getBugIdFromField();
// Если id нет, то мы имеем дело с новой багой
if (!bugId) {
// Присвоим текущее время, чтобы при создании следующей баги значения не сохранились
bugId = "c" + new Date().getTime();
const currentTime = new Date().getTime()
// Присвоим текущее время, чтобы при создании следующей баги значения не сохранились
bugId = `c${currentTime}`;
}
var protocol = window.location.protocol;
// получим протокол
const {
protocol
} = window.location;
//Изменение баги
var changed_remain = 0;
//Создание баги
var etersoft_create = window.location.href.search("enter") !== -1 ? 1 : 0;
// Создание баги
const isBugCreation = window.location.pathname.includes("enter");
// Объект таймера, создается при инициализации
// Подробнее про таймер см. timer_common.js
var timer;
function initTimer(config) {
// Показываем время только сотрудникам Etersoft
if (!isEtersoft()) return;
// достанем все необходимые параметры
// для конфигурирования таймера
const {
updateInterval,
selector,
protocol,
bugId,
udpateTimerCallback
} = config
// покажем сам таймер
document.querySelector(selector).style.display = "block";
// Интервал обновления таймера в мс, на точность не влияет
var UPDATE_INTERVAL = 1000;
const timer = new Timer(`bug:${protocol}${bugId}`, udpateTimerCallback);
timer.setAutoUpdate(updateInterval);
function initTimer() {
// Показываем время только сотрудникам Etersoft
if (!isetersoft()) return;
return timer
}
// Конфиг для валидации комментарии
const VALIDATION_CONFIG = {
minLength: 9,
maxTime: 8,
}
document.getElementById("timerblock").style.display = "block";
timer = new Timer("bug:" + protocol + bugId, updateTimer);
timer.setAutoUpdate(UPDATE_INTERVAL);
// Конфиг таймера
const TIMER_CONFIG = {
// Интервал обновления таймера в мс, на точность не влияет
updateInterval: 1000,
// Селектор элемента, в котором лежит сам таймер
selector: "#timerblock",
// протокол
protocol,
// номер баги
bugId,
// функция updateTimer
udpateTimerCallback: updateTimer
}
// Объект таймера, создается при инициализации
// Подробнее про таймер см. timer_common.js
const timer = initTimer(TIMER_CONFIG);
// this при вызове - объект таймера
function updateTimer() {
setPauseDisplay(this.isPaused());
document.querySelector("#timespent").value = this.getFormattedString();
setPauseDisplay(this.isPaused());
document.querySelector("#timespent").value = this.getFormattedString();
}
//Установка в поле отработанного времени в минутах
// Установка в поле отработанного времени в минутах
function setWorkTime(manualTime) {
var minutes = Math.ceil(timer.getElapsedSeconds() / 60);
const minutes = Math.ceil(timer.getElapsedSeconds() / 60);
document.querySelector("#realworktime").value = manualTime
? manualTime
: minutes;
document.querySelector("#realworktime").value = manualTime ?
manualTime :
minutes;
}
function setPauseDisplay(pause) {
document.querySelector("#timespent").style.color = pause ? "gray" : "black";
document.querySelector("#timer_pause").style.visibility = pause
? "hidden"
: "visible";
document.querySelector("#timer_play").style.visibility = pause
? "visible"
: "hidden";
// переключение видимости по селектору
function toggleVisibility(selector, isHidden) {
document.querySelector(selector).style.visibility = isHidden ?
"hidden" :
"visible"
}
/////////////////////////////////////////////////////
function showDiv() {
document.querySelector("#timeQuestionDiv").style.display = "block";
document.querySelector("#realworktime").focus();
}
// меняем вид таймера при паузе
function setPauseDisplay(pause) {
document.querySelector("#timespent").style.color = pause ? "gray" : "black";
function closeDiv() {
document.querySelector("#timeQuestionDiv").style.display = "none";
// прячем кнопку для паузы
toggleVisibility("#timer_pause", pause);
// показываем кнопку для включения
toggleVisibility("#timer_play", !pause);
}
/* Получение номера баги из поля */
// Получение номера баги из поля
function getBugIdFromField() {
var field = document.querySelector("#changeform input[name=id]");
if (field) {
return parseInt(field.value);
}
return false;
const field = document.querySelector("#changeform input[name=id]");
if (field) {
return parseInt(field.value);
}
return false;
}
////////////////////////////////////////////
// Является ли пользователь сотрудником Etersoft
function isEtersoft() {
const email = document.getElementById("useremail").className;
//Является ли пользователь сотрудником Etersoft
function isetersoft() {
var email = document.getElementById("useremail").className;
if (!email) return false;
if (!email) return false;
var domain = email.split("@")[1];
const domain = email.split("@")[1];
return domain === "etersoft.ru";
return domain === "etersoft.ru";
}
//Является ли пользователь ответственным
function isworker() {
var useremail = document.getElementById("useremail");
var assigntoemail = document.getElementById("assigntoemail");
var email = useremail.className;
var assignemail = assigntoemail.className;
// Является ли пользователь ответственным
function isWorker() {
const email = document.getElementById("useremail").className;
const assignemail = document.getElementById("assigntoemail").className;
return email == assignemail;
return email == assignemail;
}
window.addEventListener("load", function() {
// функция для получения времени с таймера в минутах
function getTimespentValue() {
return Math.round(timer.getElapsedSeconds() / 60);
}
function getTimespentValue() {
let timespent = document.querySelector("#timespent").value;
let timespentValue = timespent.split(":");
// лямбда для получения числового значения времени по селектору
const parseTimeInt = (selector) => parseInt(document.querySelector(selector).value);
// let's calc how many time is spent in minutes
let hours = parseInt(timespentValue[0]) * 60;
let minutes = parseInt(timespentValue[1]);
let seconds = Math.round(parseInt(timespentValue[2]) / 60);
// лямбда для получения числового значения времени из элемента
const parseTimeIntFromData = (elem) => parseInt(elem.dataset["time"]);
timespentValue = hours + minutes + seconds;
// лямбда для перевода времени из минут в часы
const calcTimeValue = (time) => Math.ceil((time / 60) * 100) / 100;
return timespentValue;
}
// функция для обновления оставшегося времени
function updateRemainingTime(workTimeValue) {
// получаем estimatedTime
const estimatedTimeElement = document.querySelector('#estimated_time');
const workedTimeElement = document.querySelector('.bz_time_tracking_table > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(3)');
// add listener for comment commit
let openButton = document.querySelector("#commit");
let closeButton = document.querySelectorAll("#timeQuestionDiv .close");
let dialog = document.querySelector("#timeQuestionDiv");
if (estimatedTimeElement && workedTimeElement) {
const estimatedTime = Number(estimatedTimeElement.value);
openButton.addEventListener("click", function(event) {
// cancel form submiting
event.preventDefault();
// получаем отработанное время
const workedTime = Number(workedTimeElement.innerText);
if (!isetersoft()) {
const comment = document.querySelector('#comment').value.length;
// пересчитанное отработанное время
const updatedWorkedTime = ((workedTime * 100) + (workTimeValue * 100)) / 100;
// считаем сколько осталось
const remainingTimeValue = Math.ceil(((estimatedTime * 100) - (updatedWorkedTime * 100))) / 100;
// обновляем оставшееся время
document.querySelector("#remaining_time").value = remainingTimeValue > 0 ? remainingTimeValue : 0;
}
}
// функция для отправки комментария
function submitComment(commentData) {
const validatedComment = validateComment(...commentData);
const { error, text } = validatedComment;
if (!comment) {
alert('Поле комментария не может быть пустым!');
return
}
if (error) {
alert(text);
return;
}
const bugForm = isBugCreation ? "#Create" : "#changeform";
document.querySelector(bugForm).submit();
timer.clear();
localStorage.removeItem("time");
}
// функция для валидации комментария
function validateComment(comment, workTimeValue, productiveTimeValue, validationConfig = VALIDATION_CONFIG) {
const commentLength = comment.length;
const isMinLength = commentLength > validationConfig.minLength;
const isMaxWorkTime = workTimeValue > validationConfig.maxTime;
const isMaxProductiveTime = productiveTimeValue > validationConfig.maxTime;
const bugForm = etersoft_create === 1 ? "#Create" : "#changeform";
document.querySelector(bugForm).submit();
const isProductiveTimeHigher = productiveTimeValue > workTimeValue;
return
const isNotCommentTooShort = productiveTimeValue > 2 &&
comment.length < productiveTimeValue * 60;
const isZeroTime = !comment.length && workTimeValue === 0 && productiveTimeValue === 0;
let error = "";
if (commentLength) {
if (!isMinLength) {
error = "Слишком короткий комментарий";
} else if (isMaxWorkTime || isMaxProductiveTime) {
error = "Недопустимо указывать отработанное/продуктивное время более восьми часов. Правильным следованием рабочему процессу было бы выполнение работы по частям, о каждой из которых будет написано отдельно.";
} else if (isNotCommentTooShort) {
error = "Недопустимо коротко комментировать длительные работы. Мы ожидаем не менее 60 символов на каждый указанный час.";
} else if (isProductiveTimeHigher) {
error = "Продуктивное время не может быть больше отработанного!";
}
} else if (!isZeroTime) {
error = "Поле комментария не может быть пустым!";
}
let timespentValue = getTimespentValue();
const errorObj = {
error: false,
text: ""
};
if (error) {
errorObj.error = true;
errorObj.text = error;
}
dialog.style.display = "block";
focusManager.capture(dialog);
return errorObj;
}
// write work time in input value
document.querySelector("#realworktime").value =
localStorage.time === undefined ? timespentValue : localStorage.time;
document.querySelector("#saveTime").dataset["time"] = timespentValue;
});
window.addEventListener("load", function() {
// работа с модальным окном
const openButton = document.querySelector("#commit");
const closeButton = document.querySelector("#timeQuestionDiv .close");
const dialog = document.querySelector("#timeQuestionDiv");
let openButtonTop = document.getElementById("commit_top");
// функция для открытия модального окна для ввода времени
function opetTimeModal(event) {
event.preventDefault();
if (openButtonTop) {
closeButton.addEventListener("click", () => {
dialog.style.display = "none";
})
openButtonTop.addEventListener("click", function(event) {
// cancel form submiting
event.preventDefault();
if (!isEtersoft()) {
const comment = document.querySelector('#comment').value.length;
if (!isetersoft()) {
const comment = document.querySelector('#comment').value.length;
if (!comment) {
alert('Поле комментария не может быть пустым!');
return
}
const bugForm = isBugCreation ? "#Create" : "#changeform";
document.querySelector(bugForm).submit();
if (!comment) {
alert('Поле комментария не может быть пустым!');
return
}
const bugForm = etersoft_create === 1 ? "#Create" : "#changeform";
document.querySelector(bugForm).submit();
const timespentValue = getTimespentValue();
return
}
dialog.style.display = "block";
let timespentValue = getTimespentValue();
focusManager.capture(dialog);
dialog.style.display = "block";
focusManager.capture(dialog);
// записываем отработанное время
document.querySelector("#realworktime").value =
!localStorage.time ? timespentValue : localStorage.time;
// write work time in input value
document.querySelector("#realworktime").value =
localStorage.time === undefined ? timespentValue : localStorage.time;
document.querySelector("#saveTime").dataset["time"] = timespentValue;
});
document.querySelector("#saveTime").dataset["time"] = timespentValue;
}
}
document
.querySelector("#realworktime")
.addEventListener("change", function() {
document.querySelector("#saveTime").dataset["time"] = this.value;
localStorage.time = this.value;
console.log(
"time changed:",
document.querySelector("#saveTime").dataset["time"]
);
});
openButton.addEventListener("click", opetTimeModal);
// если кнопка сохранить есть сверху, то добавим то же событие
// и на неё
const openButtonTop = document.getElementById("commit_top");
document.querySelector("#realworktime").addEventListener("paste", function() {
document.querySelector("#saveTime").dataset["time"] = this.value;
localStorage.time = this.value;
console.log(
"time changed:",
document.querySelector("#saveTime").dataset["time"]
);
});
// add listener for enter key down to work time input
document.querySelector("#realworktime").addEventListener("keyup", (event) => {
if (event.key === "Enter") {
document.querySelector("#realworktime").blur();
document.querySelector("#ProductTime").focus();
if (openButtonTop) {
openButtonTop.addEventListener("click", opetTimeModal);
}
});
// add listener for enter key down to productive time input
document.querySelector("#ProductTime").addEventListener("keyup", () => {
if (event.key === "Enter") {
document.querySelector("#saveTime").click();
function updateTimeValue() {
document.querySelector("#saveTime").dataset["time"] = this.value;
localStorage.time = this.value;
}
});
// add listener for time commit
let btn = document.querySelector("#saveTime");
btn.addEventListener("click", function(event) {
// cancel form submiting
event.preventDefault();
// let's calc time for #work_time input
let workTime = parseInt(document.querySelector("#realworktime").value);
workTime =
workTime === parseInt(btn.dataset["time"])
? parseInt(btn.dataset["time"])
: workTime;
workTime = workTime > 0 ? workTime : 0;
let workTimeValue = Math.ceil((workTime / 60) * 100) / 100;
let productiveTime = parseInt(document.querySelector("#ProductTime").value);
productiveTime = productiveTime > 0 ? productiveTime : workTime;
let productiveTimeValue = Math.ceil((productiveTime / 60) * 100) / 100;
document.querySelector("#work_time").value = workTimeValue;
document.querySelector("#productive_time").value = productiveTimeValue;
// получаем estimatedTime
const estimatedTimeElement = document.querySelector('#estimated_time');
const workedTimeElement = document.querySelector('.bz_time_tracking_table > tbody:nth-child(1) > tr:nth-child(2) > td:nth-child(3)');
document
.querySelector("#realworktime")
.addEventListener("change", updateTimeValue);
if (estimatedTimeElement && workedTimeElement) {
const estimatedTime = Number(estimatedTimeElement.value);
document
.querySelector("#realworktime")
.addEventListener("paste", updateTimeValue);
// получаем отработанное время
const workedTime = Number(workedTimeElement.innerText);
// add listener for enter key down to work time input
document.querySelector("#realworktime").addEventListener("keyup", (event) => {
if (event.key === "Enter") {
document.querySelector("#realworktime").blur();
document.querySelector("#ProductTime").focus();
}
});
// пересчитанное отработанное время
const updatedWorkedTime = ((workedTime * 100) + (workTimeValue * 100)) / 100;
// add listener for enter key down to productive time input
document.querySelector("#ProductTime").addEventListener("keyup", () => {
if (event.key === "Enter") {
document.querySelector("#saveTime").click();
}
});
// считаем сколько осталось
const remainingTimeValue = Math.ceil(((estimatedTime * 100) - (updatedWorkedTime * 100))) / 100;
// add listener for time commit
const saveTimeButton = document.querySelector("#saveTime");
// обновляем оставшееся время
document.querySelector("#remaining_time").value = remainingTimeValue > 0 ? remainingTimeValue : 0;
}
saveTimeButton.addEventListener("click", function(event) {
// cancel form submiting
event.preventDefault();
// now we ready for submiting all forms
let mainCommitBtn = document.querySelector("#commit_top");
// check comment before submit
let comment = document.querySelector("#comment").value;
if (comment.length !== 0) {
if (comment.length < 9) {
alert("Слишком короткий комментарий");
} else if (productiveTimeValue > 8 || workTimeValue > 8) {
alert(
"Недопустимо указывать отработанное/продуктивное время более восьми часов. Правильным следованием рабочему процессу было бы выполнение работы по частям, о каждой из которых будет написано отдельно."
);
} else if (
productiveTimeValue > 2 &&
comment.length < productiveTimeValue * 60
) {
alert(
"Недопустимо коротко комментировать длительные работы. Мы ожидаем не менее 60 символов на каждый указанный час."
);
} else if (productiveTimeValue > workTimeValue) {
alert("Продуктивное время не может быть больше отработанного!");
} else {
let bugForm = etersoft_create === 1 ? "#Create" : "#changeform";
document.querySelector(bugForm).submit();
timer.clear();
localStorage.removeItem("time");
}
} else if (!comment.length && workTimeValue === 0 && productiveTimeValue === 0) {
let bugForm = etersoft_create === 1 ? "#Create" : "#changeform";
document.querySelector(bugForm).submit();
timer.clear();
localStorage.removeItem("time");
} else {
alert("Поле комментария не может быть пустым!");
}
});
// let's calc time for #work_time input
let workTime = parseTimeInt("#realworktime");
const timeFromButton = parseTimeIntFromData(saveTimeButton);
// если время совпадает с тем что ввёл пользователь
// будем использовать его
// иначе будем использовать отработанное
workTime = workTime === timeFromButton
? timeFromButton
: workTime;
// если время не задано, то пусть будет нулём
workTime = workTime || 0;
const workTimeValue = calcTimeValue(workTime);
const productiveTime = parseTimeInt("#ProductTime") || workTime;
const productiveTimeValue = calcTimeValue(productiveTime);
document.querySelector("#work_time").value = workTimeValue;
document.querySelector("#productive_time").value = productiveTimeValue;
// обновим оставшееся время
updateRemainingTime(workTimeValue);
// check comment before submit
const comment = document.querySelector("#comment").value;
const commentData = [
comment,
workTimeValue,
productiveTimeValue
];
submitComment(commentData);
});
});
// let's validate!
function validate(evt) {
let theEvent = evt || window.event;
let key = theEvent.keyCode || theEvent.which;
key = String.fromCharCode(key);
let regex = /[0-9\s]/;
if (!regex.test(key)) {
theEvent.returnValue = false;
if (theEvent.preventDefault) theEvent.preventDefault();
}
function validate(_event) {
console.log(_event);
const event = _event || window.event;
console.log(event);
let key = event.keyCode || event.which;
key = String.fromCharCode(key);
const regex = /[0-9\s]/;
if (!regex.test(key)) {
event.returnValue = false;
if (event.preventDefault) event.preventDefault();
}
}
document.querySelector("#realworktime").onkeypress = function() {
validate(event);
};
document.querySelector("#realworktime").onpaste = function() {
validate(event);
};
document.querySelector("#ProductTime").onkeypress = function() {
validate(event);
};
document.querySelector("#ProductTime").onpaste = function() {
validate(event);
};
//////////////////////////////////////////////////////////////
if (typeof window.addEventListener != "undefined") {
//gecko, safari, konqueror and standard
window.addEventListener("load", initTimer, false);
} else if (typeof document.addEventListener != "undefined") {
//opera 7
document.addEventListener("load", initTimer, false);
} else if (typeof window.attachEvent != "undefined") {
//win/ie
window.attachEvent("onload", initTimer);
function addValidationToElement(selector) {
// добавляем слушатель на keypress
document
.querySelector(selector)
.addEventListener("keypress", validate);
// добавляем слушатель на paste
document
.querySelector(selector)
.addEventListener("paste", validate);
}
addValidationToElement("#realworktime");
addValidationToElement("#ProductTime");
......@@ -39,11 +39,11 @@
<fieldset>
<button class="workTime__button--save" id="saveTime" tabindex="11">Сохранить</button>
</fieldset>
<button onclick="closeDiv();" class="close" tabindex="12">&times;</button>
<button class="close" tabindex="12">&times;</button>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" src="js/etersoft/focusManager.js"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer_common.js?25_10_2017"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer.js?24_02_2021"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer.js?22_04_2021"></script>
......@@ -39,11 +39,11 @@
<fieldset>
<button class="workTime__button--save" id="saveTime" tabindex="11">Сохранить</button>
</fieldset>
<button onclick="closeDiv();" class="close" tabindex="12">&times;</button>
<button class="close" tabindex="12">&times;</button>
</div>
</div>
</div>
<script language="javascript" type="text/javascript" src="js/etersoft/focusManager.js"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer_common.js?25_10_2017"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer.js?24_02_2021"></script>
<script language="javascript" type="text/javascript" src="js/etersoft/timer.js?22_04_2021"></script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment