Display and edit days, codes, and comments working.

This commit is contained in:
Ryan Pandya 2024-12-03 21:11:22 -08:00
parent 5625e9a6fd
commit c5fe7be77b
3 changed files with 24 additions and 9 deletions

View File

@ -16,7 +16,7 @@ import { EditableHourCode } from "./EditableHourCode";
import { EditableHourComment } from "./EditableHourComment"; import { EditableHourComment } from "./EditableHourComment";
import { api } from "@/lib/trpc"; import { api } from "@/lib/trpc";
import spacetime from 'spacetime'; import spacetime from 'spacetime';
import { eq } from "drizzle-orm"; import { eq, is } from "drizzle-orm";
export default function EditableHour({ export default function EditableHour({
hour: initialHour, hour: initialHour,
@ -58,7 +58,9 @@ export default function EditableHour({
function isActiveHour(hour: ZHour) { function isActiveHour(hour: ZHour) {
const now = new TZDate(); const now = new TZDate();
return (hour.date == format(now, "yyyy-MM-dd")) && (((now.getHours()) + (now.getTimezoneOffset() / 60) - (parseInt(hour.time))) == 0) const isCurrentHour = ((now.getHours() - localDateTime.hour()) == 0);
const isToday = (localDateTime.format("iso-short") == format(now, "yyyy-MM-dd"));
return isToday && isCurrentHour;
} }
return ( return (
<div <div

View File

@ -3,9 +3,12 @@
import { or } from "drizzle-orm"; import { or } from "drizzle-orm";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
function selectNext(time: number) { function selectHourCode(time: number) {
document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-code")[0].focus(); document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-code")[0].focus();
} }
function selectHourComment(time: number) {
document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-comment")[0].focus();
}
export function EditableHourCode({ export function EditableHourCode({
originalText, originalText,
@ -72,11 +75,15 @@ export function EditableHourCode({
} }
if (e.key == "ArrowDown") { if (e.key == "ArrowDown") {
e.preventDefault(); e.preventDefault();
selectNext(i + 1); selectHourCode(i + 1);
} }
if (e.key == "ArrowUp") { if (e.key == "ArrowUp") {
e.preventDefault(); e.preventDefault();
selectNext(i - 1); selectHourCode(i - 1);
}
if (e.key == "ArrowRight") {
e.preventDefault();
selectHourComment(i);
} }
}} }}
onClick={(e) => { onClick={(e) => {

View File

@ -3,8 +3,10 @@
import { or } from "drizzle-orm"; import { or } from "drizzle-orm";
import { useEffect, useRef } from "react"; import { useEffect, useRef } from "react";
function selectNext(time: number) { function selectHourCode(time: number) {
console.log(time); document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-code")[0].focus();
}
function selectHourComment(time: number) {
document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-comment")[0].focus(); document.getElementById("hour-" + (time).toString())?.getElementsByClassName("edit-hour-comment")[0].focus();
} }
@ -65,11 +67,15 @@ export function EditableHourComment({
} }
if (e.key == "ArrowDown") { if (e.key == "ArrowDown") {
e.preventDefault(); e.preventDefault();
selectNext(i + 1); selectHourComment(i + 1);
} }
if (e.key == "ArrowUp") { if (e.key == "ArrowUp") {
e.preventDefault(); e.preventDefault();
selectNext(i - 1); selectHourComment(i - 1);
}
if (e.key == "ArrowLeft") {
e.preventDefault();
selectHourCode(i);
} }
}} }}
onClick={(e) => { onClick={(e) => {