Unverified Commit d0e536d2 authored by zemua's avatar zemua Committed by GitHub
Browse files

Add UI for threshold date (#317)



* styles

* threshold picker

* datePicker

* datePickerThreshold

* form for threshold picker

* form threshold

* correcting threshold variable to match

* amend date selector conflict with 2 datepickers

Co-authored-by: default avatarransome <11188741+ransome1@users.noreply.github.com>
parent 3a40b612
"use strict";
import { userData, translations } from "../render.js";
import { _paq } from "./matomo.mjs";
import { resizeInput } from "./form.mjs";
import { formatDate } from "./helper.mjs";
import { items, currentTodo, editTodo } from "./todos.mjs";
import { RecExtension, SugarDueExtension, ThresholdExtension } from "./todotxtExtensions.mjs";
import "../../node_modules/jstodotxt/jsTodoExtensions.js";
import "../../node_modules/jstodotxt/jsTodoTxt.js";
import Datepicker from "../../node_modules/vanillajs-datepicker/js/Datepicker.js";
import de from "../../node_modules/vanillajs-datepicker/js/i18n/locales/de.js";
import it from "../../node_modules/vanillajs-datepicker/js/i18n/locales/it.js";
import es from "../../node_modules/vanillajs-datepicker/js/i18n/locales/es.js";
import fr from "../../node_modules/vanillajs-datepicker/js/i18n/locales/fr.js";
const autoCompleteContainer = document.getElementById("autoCompleteContainer");
const datePickerThresholdInput = document.getElementById("thresholdPickerInput");
const datePickerContainer = document.querySelector(".datepicker.datepicker-dropdown");
datePickerThresholdInput.onfocus = function () {
datePickerThreshold.show();
autoCompleteContainer.classList.remove("is-active");
resizeInput(datePickerThresholdInput);
};
datePickerThresholdInput.addEventListener("changeDate", function (e) {
// we only update the object if there is a date selected. In case of a refresh it would throw an error otherwise
if(document.getElementById("modalForm").classList.contains("is-active")) {
// generate the object on what is written into input, so we don't overwrite previous inputs of user
let todo = new TodoTxtItem(document.getElementById("modalFormInput").value, [ new SugarDueExtension(), new HiddenExtension(), new RecExtension(), new ThresholdExtension() ]);
if(datePickerThreshold.getDate()) {
todo.t = datePickerThreshold.getDate();
todo.tString = formatDate(datePickerThreshold.getDate());
} else {
// in case delete button is pushed
todo.t = undefined;
todo.tString = undefined;
}
// if suggestion box was open, it needs to be closed
autoCompleteContainer.classList.remove("is-active");
autoCompleteContainer.blur();
// if a due date is set, the recurrence picker will be shown);
document.getElementById("modalFormInput").value = todo.toString();
document.getElementById("modalFormInput").focus();
resizeInput(datePickerThresholdInput);
datePickerThreshold.hide();
// trigger matomo event
if(userData.matomoEvents) _paq.push(["trackEvent", "Form", "Datepicker used to add date to input"]);
} else {
// get position of current todo in array
const index = items.objects.map(function(item) {return item.toString(); }).indexOf(currentTodo.toString());
// change the date
if(datePickerThreshold.getDate()) {
currentTodo.t = datePickerThreshold.getDate();
currentTodo.tString = formatDate(datePickerThreshold.getDate());
} else {
// in case delete button is pushed
currentTodo.t = undefined;
currentTodo.tString = undefined;
}
// finally pass new todo on for changing
editTodo(index, currentTodo);
// trigger matomo event
if(userData.matomoEvents) _paq.push(["trackEvent", "Todo-Table", "Datepicker used to change a date"]);
}
document.querySelector(".datepicker.datepicker-dropdown").classList.remove("visible");
});
datePickerThresholdInput.placeholder = translations.formSelectThreshold;
Object.assign(Datepicker.locales, de, it, es, fr);
const datePickerThreshold = new Datepicker(datePickerThresholdInput, {
autohide: true,
language: userData.language,
format: "yyyy-mm-dd",
clearBtn: true,
calendarWeeks: true,
weekStart: 1,
beforeShowDay: function(date) {
let today = new Date();
if (date.getDate() == today.getDate() &&
date.getMonth() == today.getMonth() &&
date.getFullYear() == today.getFullYear()) {
return { classes: 'today'};
}
}
});
// document.querySelector(".datepicker .clear-btn").onclick = function() {
// let todo = new TodoTxtItem(document.getElementById("modalFormInput").value, [ new SugarDueExtension(), new HiddenExtension(), new RecExtension(), new ThresholdExtension() ]);
// todo.due = undefined;
// todo.dueString = undefined;
// document.getElementById("modalFormInput").value = todo.toString();
// resizeInput(datePickerThresholdInput);
// datePickerThreshold.hide();
// }
export { datePickerThresholdInput, datePickerThreshold };
......@@ -383,7 +383,6 @@ async function setPriority(priority) {
return Promise.reject(error);
}
}
function resetForm() {
try {
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "Zadané údaje nejsou kompletní. Přidejte prosím alespoň text úkolu.",
"formInfoNoInput": "Přidejte prosím do textového pole úkol. Pokud si nejste jisti, jak to udělat, nahlédněte do <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">syntaxe todo.txt</a>.",
"formSelectDueDate": "Bez data splnění",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "Použijte syntaxi todo.txt (A) @context +project due: rec: h:",
"function": "Funkce",
"help": "Nápověda",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "Deine Eingabe ist nicht vollständig, gebe mindestens einen Text ein.",
"formInfoNoInput": "Schreibe eine Aufgabe in das Textfeld und verwende dazu die todo.txt Syntax. Schau <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">hier</a> nach, welche Möglichkeiten es dabei gibt.",
"formSelectDueDate": "Keine Fälligkeit",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "Benutze die todo.txt Syntax (A) @context +project due: rec: h:",
"function": "Funktion",
"help": "Hilfe",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "Your input is incomplete, please add at least the (todo text).",
"formInfoNoInput": "Please add a todo into the text field. If you are unsure on how to do this, take a quick look at the <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">todo.txt syntax</a>.",
"formSelectDueDate": "No due date",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "Use the todo.txt Syntax (A) @context +project due: rec: h: t:",
"function": "Function",
"help": "Help",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "Su entrada está incompleta, agregue al menos el texto de la tarea.",
"formInfoNoInput": "Por favor, añada una tarea en el campo de texto. Si no estás seguro de cómo hacerlo, echa un vistazo rápido a <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">todo.txt syntax</a>.",
"formSelectDueDate": "Vencimiento",
"formSelectThreshold": "Fecha de inicio",
"todoTxtSyntax": "Usa la sintaxis de todo.txt (A) @contexto +proyecto due: rec: h:",
"function": "Función",
"help": "Ayuda",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "Entrée incomplète, veuillez ajouter au moins le texte de la tâche.",
"formInfoNoInput": "Veuillez ajouter une tâche dans le champ de saisie. Si vous n'êtes pas sûr de la manière de procéder, consultez la <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">syntaxe todo.txt</a>.",
"formSelectDueDate": "Échéance",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "Utiliser la syntaxe todo.txt (A) @context +project due: rec: h:",
"function": "Une fonction",
"help": "Aide",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "A bevitel befejezetlen. Legalább a (tennivaló szövegét) adja meg.",
"formInfoNoInput": "Adjon hozzá egy tennivalót a szövegmezőbe. Ha nem biztos abban, hogy ezt hogyan kell csinálni, akkor vessen egy pillantást a <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">todo.txt szintaxisára</a>.",
"formSelectDueDate": "Nincs határidő",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "A todo.txt szintaxis használata: (A) @környezet +projekt due: rec: h: t:",
"function": "Funkció",
"help": "Súgó",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "Il tuo input è incompleto, aggiungi almeno il testo del todo.",
"formInfoNoInput": "Si prega di aggiungere un todo nel campo di testo. Se non siete sicuri di come fare, date un'occhiata veloce a <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">todo.txt syntax</a>.",
"formSelectDueDate": "Scadenza",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "Usa il todo.txt Sintassi (A) @context +project due: rec: h:",
"function": "Funzione",
"help": "Assistenza",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "入力は不完全である. 少なくともタスク名を記載してください. ",
"formInfoNoInput": "テキストフィールドにタスクを追加してください. 詳細参照: <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">todo.txt syntax</a>.",
"formSelectDueDate": "期限なし",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "todo.txtシンタックスを利用 (A) @コンテキスト +プロジェクト due: rec: h:",
"function": "機能",
"help": "ヘルプ",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "Sua entrada está incompleta, adicione pelo menos o texto de tarefas.",
"formInfoNoInput": "Adicione uma tarefa no campo de texto. Se você não tiver certeza de como fazer isso, dê uma olhada rápida na <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">sintaxe todo.txt</a>.",
"formSelectDueDate": "Sem data de vencimento",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "Use a sintaxe todo.txt (A) @context +project due: rec: h:",
"function": "Função",
"help": "Ajuda",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "Eksik girdi, lütfen en azından yapılacak ekleyiniz.",
"formInfoNoInput": "Lütfen metin alanına yapılacak ekleyiniz. Eğer nasıl yapılacağından emin değilseniz, <a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">todo.txt sözdizimine</a> göz atın.",
"formSelectDueDate": "Bitiş tarihi yok",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "todo.txt sözdizimini kullanın (A) @bağlam +proje bitiş: rec: h:",
"function": "Fonksiyon",
"help": "Yardım",
......
......@@ -47,6 +47,7 @@
"formInfoIncomplete": "你的输入不完整, 请输入任务文本. ",
"formInfoNoInput": "请在文本里添加todo文件, 如果你不清楚如何使用, 请参见<a href=\"https://github.com/todotxt/todo.txt\" target=\"_blank\">todo.txt syntax</a>.",
"formSelectDueDate": "无到期",
"formSelectThreshold": "No threshold date",
"todoTxtSyntax": "使用 todo.txt 格式 (A) @context +project due: rec: h:",
"function": "功能",
"help": "帮助",
......
......@@ -207,7 +207,7 @@ strong {
}
}
#datePickerInput {
#datePickerInput, #thresholdPickerInput {
cursor: pointer;
}
......
Supports Markdown
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