Editable timestamps and mobile horizontal scroll

This commit is contained in:
Matt Wiseley 2023-07-03 11:23:47 -04:00
parent 941c5e261b
commit 94631bc293
8 changed files with 171 additions and 57 deletions

3
.gitignore vendored
View file

@ -12,6 +12,9 @@ node_modules
# They should be uploaded to GitHub releases instead.
/main.js
# Exclude local settings
data.json
# Exclude sourcemaps
*.map

4
package-lock.json generated
View file

@ -1,12 +1,12 @@
{
"name": "simple-time-tracker",
"version": "0.1.6",
"version": "0.1.7",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "simple-time-tracker",
"version": "0.1.6",
"version": "0.1.7",
"license": "MIT",
"devDependencies": {
"@types/node": "^16.11.6",

View file

@ -40,6 +40,7 @@ export function loadTracker(json: string): Tracker {
}
export function displayTracker(tracker: Tracker, element: HTMLElement, file: string, getSectionInfo: () => MarkdownSectionInformation, settings: SimpleTimeTrackerSettings): void {
element.classList.add('simple-time-tracker-container');
// add start/stop controls
let running = isRunning(tracker);
let btn = new ButtonComponent(element)
@ -201,6 +202,10 @@ function formatTimestamp(timestamp: number, settings: SimpleTimeTrackerSettings)
return moment.unix(timestamp).format(settings.timestampFormat);
}
function unFormatTimestamp(formatted: string, settings: SimpleTimeTrackerSettings): number {
return moment(formatted, settings.timestampFormat).unix();
}
function formatDuration(totalTime: number, settings: SimpleTimeTrackerSettings): string {
let ret = "";
let duration = moment.duration(totalTime);
@ -268,18 +273,48 @@ function createTableSection(entry: Entry, settings: SimpleTimeTrackerSettings):
return ret;
}
class EditableField {
cell: HTMLTableCellElement;
label: HTMLSpanElement;
box: TextComponent;
constructor(row: HTMLTableRowElement, indent: number, value: string) {
this.cell = row.createEl("td");
this.label = this.cell.createEl("span", { text: value });
this.label.style.marginLeft = `${indent}em`;
this.box = new TextComponent(this.cell).setValue(value);
this.box.inputEl.width = 10;
this.box.inputEl.classList.add('simple-time-tracker-input');
this.box.inputEl.hide();
}
editing(): boolean {
return this.label.hidden;
}
beginEdit(value: string) {
this.label.hidden = true;
this.box.setValue(value);
this.box.inputEl.show();
}
endEdit(): string {
let value = this.box.getValue()
this.label.setText(value);
this.box.inputEl.hide();
this.label.hidden = false;
return value;
}
}
function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableElement, newSegmentNameBox: TextComponent, running: boolean, file: string, getSectionInfo: () => MarkdownSectionInformation, settings: SimpleTimeTrackerSettings, indent: number) {
let row = table.createEl("tr");
let name = row.createEl("td");
let namePar = name.createEl("span", {text: entry.name});
namePar.style.marginLeft = `${indent}em`;
let nameBox = new TextComponent(name).setValue(entry.name);
nameBox.inputEl.hidden = true;
let nameField = new EditableField(row, indent, entry.name);
row.createEl("td", {text: entry.startTime ? formatTimestamp(entry.startTime, settings) : ""});
row.createEl("td", {text: entry.endTime ? formatTimestamp(entry.endTime, settings) : ""});
row.createEl("td", {text: entry.endTime || entry.subEntries ? formatDuration(getDuration(entry), settings) : ""});
let startValue = entry.startTime ? formatTimestamp(entry.startTime, settings) : "";
let startField = new EditableField(row, indent, startValue);
let endValue = entry.endTime ? formatTimestamp(entry.endTime, settings) : "";
let endField = new EditableField(row, indent, endValue);
row.createEl("td", { text: entry.endTime || entry.subEntries ? formatDuration(getDuration(entry), settings) : "" });
let entryButtons = row.createEl("td");
if (!running) {
@ -297,19 +332,16 @@ function addEditableTableRow(tracker: Tracker, entry: Entry, table: HTMLTableEle
.setTooltip("Edit")
.setIcon("lucide-pencil")
.onClick(async () => {
if (namePar.hidden) {
namePar.hidden = false;
nameBox.inputEl.hidden = true;
editButton.setIcon("lucide-pencil");
if (nameBox.getValue()) {
entry.name = nameBox.getValue();
namePar.setText(entry.name);
if (nameField.editing()) {
entry.name = nameField.endEdit();
entry.startTime = unFormatTimestamp(startField.endEdit(), settings);
entry.endTime = unFormatTimestamp(endField.endEdit(), settings);
await saveTracker(tracker, this.app, file, getSectionInfo());
}
editButton.setIcon("lucide-pencil");
} else {
namePar.hidden = true;
nameBox.inputEl.hidden = false;
nameBox.setValue(entry.name);
nameField.beginEdit(entry.name);
startField.beginEdit(formatTimestamp(entry.startTime, settings));
endField.beginEdit(formatTimestamp(entry.endTime, settings));
editButton.setIcon("lucide-check");
}
});

View file

@ -1,3 +1,7 @@
.simple-time-tracker-container {
overflow-x: scroll;
}
.simple-time-tracker-support {
max-width: 50%;
width: 400px;
@ -62,3 +66,8 @@
.simple-time-tracker-table .clickable-icon {
display: inline;
}
.simple-time-tracker-input {
max-width: 150px;
min-width: 100px;
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,3 +1,7 @@
.simple-time-tracker-container {
overflow-x: scroll;
}
.simple-time-tracker-support {
max-width: 50%;
width: 400px;
@ -62,3 +66,8 @@
.simple-time-tracker-table .clickable-icon {
display: inline;
}
.simple-time-tracker-input {
max-width: 150px;
min-width: 100px;
}

View file

@ -1,3 +1,7 @@
.simple-time-tracker-container {
overflow-x: scroll;
}
.simple-time-tracker-support {
max-width: 50%;
width: 400px;
@ -62,3 +66,8 @@
.simple-time-tracker-table .clickable-icon {
display: inline;
}
.simple-time-tracker-input {
max-width: 150px;
min-width: 100px;
}