feat: implement last saved duration indicator

master
Katja Lutz 2 years ago
parent 01ed30ad9e
commit c6314c6338

@ -1,8 +1,76 @@
import { FlowComponent } from "solid-js";
import {
createEffect,
createMemo,
createSignal,
FlowComponent,
onCleanup,
useContext,
} from "solid-js";
import { UiStoreContext } from "~/stores";
import { de } from "date-fns/locale";
import { formatDistanceToNow, fromUnixTime, getUnixTime } from "date-fns";
const Page: FlowComponent = (props) => {
const [uiState] = useContext(UiStoreContext)!;
const [now, setNow] = createSignal(new Date());
createEffect(function () {
const interval = setInterval(function () {
setNow(new Date());
}, 10000);
onCleanup(() => clearInterval(interval));
});
const lastSavedWords = createMemo(function () {
now();
let words = "Nie";
if (uiState.lastSaved > 0) {
words = formatDistanceToNow(fromUnixTime(uiState.lastSaved), {
includeSeconds: true,
addSuffix: true,
locale: de,
});
}
return words;
});
const savedDistance = createMemo(function () {
now();
if (uiState.lastSaved === 0) {
return -1;
}
const nowUnix = getUnixTime(new Date());
const distance = nowUnix - uiState.lastSaved;
return distance;
});
return (
<div class="flex-1 flex items-start print:block overflow-y-hidden overflow-x-hidden xxl:overflow-y-auto justify-center xl:max-w-[none] max-h-screen xl:max-h-[none] min-h-screen print:min-h-0 p-5 print:p-0">
<div class="flex-1 flex flex-col justify-start print:block overflow-y-hidden overflow-x-hidden xxl:overflow-y-auto items-center xl:max-w-[none] max-h-screen xl:max-h-[none] min-h-screen print:min-h-0 p-5 pt-3 print:p-0">
<div
aria-disabled="true"
class="print:hidden text-xs text-black text-opacity-50 uppercase mb-2"
>
Zuletzt gespeichert:{" "}
<span
classList={{
"text-green-700 text-opacity-50":
savedDistance() >= 0 && savedDistance() < 60,
"text-lime-800 text-opacity-50":
savedDistance() >= 60 && savedDistance() < 120,
"text-yellow-700 text-opacity-60":
savedDistance() >= 120 && savedDistance() < 180,
"text-orange-700 text-opacity-70":
savedDistance() >= 180 && savedDistance() < 300,
"text-red-700 text-opacity-75": savedDistance() >= 300,
"font-bold": savedDistance() >= 600,
}}
>
{lastSavedWords()}
</span>
</div>
<div class="w-[1200px] shrink-0 scale-[.5] lg:scale-90 xl:scale-100 origin-top print:scale-100 shadow-md print:shadow-none print:w-full bg-white p-5 print:p-0">
{props.children}
</div>

@ -12,7 +12,7 @@ import {
onCleanup,
} from "solid-js";
import { createStore, reconcile, unwrap } from "solid-js/store";
import { format, fromUnixTime } from "date-fns";
import { format, fromUnixTime, getUnixTime } from "date-fns";
import z from "myzod";
import Big from "big.js";
import { generate } from "node-iso11649";
@ -199,6 +199,8 @@ const SettingsOverlay: Component = () => {
"application/json",
fileContent
);
setUiState("lastSaved", getUnixTime(new Date()));
};
const saveOnCtrlS = (e: KeyboardEvent) => {

@ -31,6 +31,7 @@ export const PRINT_TYPE_INVOICE = "INVOICE";
export const createUiStore = () =>
createStore_({
lastSaved: 0,
printType: PRINT_TYPE_INVOICE as
| typeof PRINT_TYPE_OFFER
| typeof PRINT_TYPE_CONFIRMATION

Loading…
Cancel
Save