using memo for rendiner stl because model rotating is not working after react render

main
alex 2023-06-29 19:45:39 +02:00
parent 0e6816ac73
commit 0300744d22
5 changed files with 143 additions and 131 deletions

6
package-lock.json generated
View File

@ -17339,9 +17339,9 @@
}
},
"node_modules/three": {
"version": "0.153.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.153.0.tgz",
"integrity": "sha512-OCP2/uQR6GcDpSLnJt/3a4mdS0kNWcbfUXIwLoEMgLzEUIVIYsSDwskpmOii/AkDM+BBwrl6+CKgrjX9+E2aWg==",
"version": "0.154.0",
"resolved": "https://registry.npmjs.org/three/-/three-0.154.0.tgz",
"integrity": "sha512-Uzz8C/5GesJzv8i+Y2prEMYUwodwZySPcNhuJUdsVMH2Yn4Nm8qlbQe6qRN5fOhg55XB0WiLfTPBxVHxpE60ug==",
"peer": true
},
"node_modules/three-stdlib": {

View File

@ -22,10 +22,12 @@ export default function AppRoutes() {
return (
<Routes>
<Route path="/" element={<Dashboard />} />
<Route
path={Constants.ROUTE_PATHS.GROUP_TASKS}
element={<GroupTasks isGroupTasksViewModalOpen={false} />}
/>
<Route
path={Constants.ROUTE_PATHS.GROUP_TASKS_VIEW + ":paramGroupTaskId"}
element={<GroupTasks isGroupTasksViewModalOpen={true} />}

View File

@ -2,118 +2,118 @@ import { useContext } from "react";
import { WebSocketContext } from "../../utils";
import { Card } from "antd";
const randomGreeting = Math.floor(Math.random() * 20);
function getGreeting(name) {
const currentTime = new Date();
const currentHour = currentTime.getHours();
let greeting;
if (currentHour < 5) {
const nightGreetings = [
`Guten Morgen, ${name}! Ein weiterer Tag, um deinem Ziel näher zu kommen!`,
`Hab eine ruhige Nacht gehabt, ${name}? Du bist auf dem richtigen Weg!`,
`Hallo, ${name}! Bereit für einen neuen Tag voller Möglichkeiten? Du schaffst das!`,
`Schlaf gut, ${name}! Morgen ist ein neuer Tag, um Großartiges zu erreichen!`,
`Guten Morgen! Wie hast du geschlafen, ${name}? Du bist unaufhaltsam!`,
`Hallo, ${name}! Bereit für einen neuen Tag voller Chancen und Erfolge?`,
`Ein neuer Tag bricht an, ${name}! Du bist auf dem richtigen Pfad!`,
`Guten Morgen! Lass uns den Tag beginnen, ${name}! Du kannst alles schaffen!`,
`Hallo, ${name}! Wie geht es dir heute Morgen? Sei stolz auf deine Fortschritte!`,
`Ein herzliches "Guten Morgen" an dich, ${name}! Jeder Tag ist eine Chance zu wachsen!`,
`Hab eine erholsame Nacht gehabt, ${name}? Jetzt kannst du wieder Vollgas geben!`,
`Hallo, ${name}! Starte frisch in den Tag! Du bist auf dem richtigen Weg!`,
`Guten Morgen! Was steht auf deiner Agenda, ${name}? Setze deine Ziele hoch!`,
`Beginne den Tag mit einem Lächeln, ${name}! Du bist stark und voller Potential!`,
`Ich wünsche dir einen wunderbaren Morgen, ${name}! Glaube an dich und deine Träume!`,
`Hallo, ${name}! Bereit für neue Herausforderungen? Du wirst sie meistern!`,
`Guten Morgen! Wie war deine Nacht, ${name}? Du bist auf dem Weg zum Erfolg!`,
`Hallo, ${name}! Starte den Tag mit positiver Energie! Du bist unaufhaltsam!`,
`Ich hoffe, du hast gut geschlafen, ${name}! Lass deine Träume Wirklichkeit werden!`,
`Hallo, ${name}! Was erwartet dich heute? Bleibe fokussiert und motiviert!`,
];
//greeting = nightGreetings[Math.floor(Math.random() * nightGreetings.length)];
greeting = nightGreetings[randomGreeting];
} else if (currentHour < 12) {
const morningGreetings = [
`Guten Morgen, ${name}! Ein weiterer Tag, um deinem Ziel näher zu kommen!`,
`Ein strahlender Morgen erwartet dich, ${name}! Du hast das Zeug dazu!`,
`Hab einen motivierten Tag, ${name}! Du bist auf dem richtigen Weg!`,
`Guten Morgen! Lass dich nicht von deinen Träumen abhalten, ${name}!`,
`Starte den Tag mit positiver Energie, ${name}! Du bist unaufhaltsam!`,
`Hallo, ${name}! Nutze die Chancen des Tages und zeige, was in dir steckt!`,
`Ein neuer Tag voller Möglichkeiten erwartet dich, ${name}! Glaube an dich selbst!`,
`Guten Morgen! Du bist auf dem richtigen Weg, ${name}! Heute ist dein Tag!`,
`Hallo, ${name}! Zeige der Welt, was du heute erreichen kannst! Du bist großartig!`,
`Begrüße den Tag mit Begeisterung, ${name}! Du hast das Potenzial, Berge zu versetzen!`,
`Guten Morgen! Glaube an dich selbst und verfolge deine Träume, ${name}!`,
`Hallo, ${name}! Du bist ein Champion, also zeig es ihnen! Du schaffst das!`,
`Ein weiterer Tag, um deine Träume zu verwirklichen, ${name}! Gib alles!`,
`Guten Morgen! Lass dein Licht heute strahlen, ${name}! Du bist einzigartig!`,
`Hallo, ${name}! Du bist auf dem richtigen Weg zu großartigen Dingen! Glaube an dich!`,
`Starte den Tag mit einem Lächeln und einer positiven Einstellung, ${name}! Du bist stark!`,
`Guten Morgen! Glaube an deine Stärken und gehe mit Zuversicht voran, ${name}!`,
`Hallo, ${name}! Nutze den Tag, um dein Bestes zu geben! Du bist unaufhaltsam!`,
`Ein neuer Tag, um zu wachsen und zu lernen, ${name}! Sei offen für neue Möglichkeiten!`,
`Guten Morgen! Du hast das Zeug dazu, Großes zu erreichen, ${name}! Glaube an dich!`,
];
//greeting = morningGreetings[Math.floor(Math.random() * morningGreetings.length)];
greeting = morningGreetings[randomGreeting];
} else if (currentHour < 18) {
const afternoonGreetings = [
`Guten Tag, ${name}! Ein weiterer Moment, um deinem Ziel näher zu kommen!`,
`Schön, dich zu sehen, ${name}! Du bist auf dem richtigen Weg!`,
`Hoffentlich läuft dein Tag gut, ${name}! Du schaffst das!`,
`Hallo, ${name}! Wie geht's? Halte dich an deine Ziele!`,
`Genieße deinen Nachmittag, ${name}! Du bist auf dem richtigen Kurs!`,
`Hallo, ${name}! Alles klar bei dir? Bleibe fokussiert!`,
`Schönen Tag noch, ${name}! Verliere nicht aus den Augen, was dir wichtig ist!`,
`Hallo, ${name}! Was steht auf deiner Agenda? Verfolge deine Träume!`,
`Freut mich, dich zu sehen, ${name}! Glaube an dich selbst!`,
`Hoffentlich hattest du einen produktiven Tag, ${name}! Halte die Motivation hoch!`,
`Hallo, ${name}! Wie läuft's? Bleibe positiv und lass dich nicht entmutigen!`,
`Ich hoffe, du hast einen tollen Tag, ${name}! Vertraue auf deine Fähigkeiten!`,
`Hallo, ${name}! Bist du bereit für den Rest des Tages? Zeige, was in dir steckt!`,
`Schön, dich hier zu haben, ${name}! Gib dein Bestes und glaube an dich!`,
`Hallo, ${name}! Wie war dein Vormittag? Halte die Motivation hoch!`,
`Ich wünsche dir einen angenehmen Nachmittag, ${name}! Verfolge deine Ziele mit Leidenschaft!`,
`Hallo, ${name}! Wie geht es dir heute? Denke daran, wie weit du schon gekommen bist!`,
`Freut mich, dass du da bist, ${name}! Glaube an dich und gehe deinen Weg!`,
`Hallo, ${name}! Was hast du heute vor? Halte den Fokus auf das Wesentliche!`,
`Schön, dich wiederzusehen, ${name}! Du bist auf dem Weg zum Erfolg!`,
];
//greeting = afternoonGreetings[Math.floor(Math.random() * afternoonGreetings.length)];
greeting = afternoonGreetings[randomGreeting];
} else {
const eveningGreetings = [
`Guten Abend, ${name}! Ein weiterer Tag ist fast vorbei! Du hast viel erreicht!`,
`Schön, dass du da bist, ${name}! Du hast den Tag gemeistert!`,
`Hast du einen produktiven Tag gehabt, ${name}? Sei stolz auf dich!`,
`Hallo, ${name}! Wie war dein Tag? Du bist auf dem richtigen Weg zum Erfolg!`,
`Einen entspannten Abend wünsche ich dir, ${name}! Du hast es dir verdient!`,
`Guten Abend! Wie geht es dir, ${name}? Halte dich an deine Träume!`,
`Hallo, ${name}! Was steht bei dir am Abend an? Entspanne dich und lade deine Energie auf!`,
`Ein herzliches "Guten Abend" an dich, ${name}! Denke daran, wie weit du schon gekommen bist!`,
`Genieße die Ruhe des Abends, ${name}! Du hast heute viel erreicht!`,
`Hallo, ${name}! Wie war dein Tag heute? Feiere deine Erfolge!`,
`Guten Abend! Was hast du heute erlebt, ${name}? Bleibe stolz auf dich!`,
`Ein angenehmer Abend liegt vor dir, ${name}! Lade deine Batterien auf und träume groß!`,
`Hallo, ${name}! Wie geht es dir am Ende des Tages? Sei dankbar für deine Fortschritte!`,
`Schön, dich noch zu sehen, ${name}! Reflektiere über deinen Tag und freue dich auf morgen!`,
`Guten Abend! Was möchtest du heute Abend machen, ${name}? Nutze die Zeit für dich selbst!`,
`Ein gemütlicher Abend steht bevor, ${name}! Entspanne dich und genieße den Moment!`,
`Hallo, ${name}! Wie war deine Arbeit heute? Erhole dich und sei stolz auf dich!`,
`Guten Abend! Du bist auf dem richtigen Weg zum Erfolg, ${name}! Glaube an dich!`,
];
//greeting = eveningGreetings[Math.floor(Math.random() * eveningGreetings.length)];
greeting = eveningGreetings[randomGreeting];
}
return greeting;
}
export default function Dashboard() {
const webSocketContext = useContext(WebSocketContext);
const getGreeting = (name) => {
const currentTime = new Date();
const currentHour = currentTime.getHours();
let greeting;
if (currentHour < 5) {
const nightGreetings = [
`Guten Morgen, ${name}! Ein weiterer Tag, um deinem Ziel näher zu kommen!`,
`Hab eine ruhige Nacht gehabt, ${name}? Du bist auf dem richtigen Weg!`,
`Hallo, ${name}! Bereit für einen neuen Tag voller Möglichkeiten? Du schaffst das!`,
`Schlaf gut, ${name}! Morgen ist ein neuer Tag, um Großartiges zu erreichen!`,
`Guten Morgen! Wie hast du geschlafen, ${name}? Du bist unaufhaltsam!`,
`Hallo, ${name}! Bereit für einen neuen Tag voller Chancen und Erfolge?`,
`Ein neuer Tag bricht an, ${name}! Du bist auf dem richtigen Pfad!`,
`Guten Morgen! Lass uns den Tag beginnen, ${name}! Du kannst alles schaffen!`,
`Hallo, ${name}! Wie geht es dir heute Morgen? Sei stolz auf deine Fortschritte!`,
`Ein herzliches "Guten Morgen" an dich, ${name}! Jeder Tag ist eine Chance zu wachsen!`,
`Hab eine erholsame Nacht gehabt, ${name}? Jetzt kannst du wieder Vollgas geben!`,
`Hallo, ${name}! Starte frisch in den Tag! Du bist auf dem richtigen Weg!`,
`Guten Morgen! Was steht auf deiner Agenda, ${name}? Setze deine Ziele hoch!`,
`Beginne den Tag mit einem Lächeln, ${name}! Du bist stark und voller Potential!`,
`Ich wünsche dir einen wunderbaren Morgen, ${name}! Glaube an dich und deine Träume!`,
`Hallo, ${name}! Bereit für neue Herausforderungen? Du wirst sie meistern!`,
`Guten Morgen! Wie war deine Nacht, ${name}? Du bist auf dem Weg zum Erfolg!`,
`Hallo, ${name}! Starte den Tag mit positiver Energie! Du bist unaufhaltsam!`,
`Ich hoffe, du hast gut geschlafen, ${name}! Lass deine Träume Wirklichkeit werden!`,
`Hallo, ${name}! Was erwartet dich heute? Bleibe fokussiert und motiviert!`,
];
greeting =
nightGreetings[Math.floor(Math.random() * nightGreetings.length)];
} else if (currentHour < 12) {
const morningGreetings = [
`Guten Morgen, ${name}! Ein weiterer Tag, um deinem Ziel näher zu kommen!`,
`Ein strahlender Morgen erwartet dich, ${name}! Du hast das Zeug dazu!`,
`Hab einen motivierten Tag, ${name}! Du bist auf dem richtigen Weg!`,
`Guten Morgen! Lass dich nicht von deinen Träumen abhalten, ${name}!`,
`Starte den Tag mit positiver Energie, ${name}! Du bist unaufhaltsam!`,
`Hallo, ${name}! Nutze die Chancen des Tages und zeige, was in dir steckt!`,
`Ein neuer Tag voller Möglichkeiten erwartet dich, ${name}! Glaube an dich selbst!`,
`Guten Morgen! Du bist auf dem richtigen Weg, ${name}! Heute ist dein Tag!`,
`Hallo, ${name}! Zeige der Welt, was du heute erreichen kannst! Du bist großartig!`,
`Begrüße den Tag mit Begeisterung, ${name}! Du hast das Potenzial, Berge zu versetzen!`,
`Guten Morgen! Glaube an dich selbst und verfolge deine Träume, ${name}!`,
`Hallo, ${name}! Du bist ein Champion, also zeig es ihnen! Du schaffst das!`,
`Ein weiterer Tag, um deine Träume zu verwirklichen, ${name}! Gib alles!`,
`Guten Morgen! Lass dein Licht heute strahlen, ${name}! Du bist einzigartig!`,
`Hallo, ${name}! Du bist auf dem richtigen Weg zu großartigen Dingen! Glaube an dich!`,
`Starte den Tag mit einem Lächeln und einer positiven Einstellung, ${name}! Du bist stark!`,
`Guten Morgen! Glaube an deine Stärken und gehe mit Zuversicht voran, ${name}!`,
`Hallo, ${name}! Nutze den Tag, um dein Bestes zu geben! Du bist unaufhaltsam!`,
`Ein neuer Tag, um zu wachsen und zu lernen, ${name}! Sei offen für neue Möglichkeiten!`,
`Guten Morgen! Du hast das Zeug dazu, Großes zu erreichen, ${name}! Glaube an dich!`,
];
greeting =
morningGreetings[Math.floor(Math.random() * morningGreetings.length)];
} else if (currentHour < 18) {
const afternoonGreetings = [
`Guten Tag, ${name}! Ein weiterer Moment, um deinem Ziel näher zu kommen!`,
`Schön, dich zu sehen, ${name}! Du bist auf dem richtigen Weg!`,
`Hoffentlich läuft dein Tag gut, ${name}! Du schaffst das!`,
`Hallo, ${name}! Wie geht's? Halte dich an deine Ziele!`,
`Genieße deinen Nachmittag, ${name}! Du bist auf dem richtigen Kurs!`,
`Hallo, ${name}! Alles klar bei dir? Bleibe fokussiert!`,
`Schönen Tag noch, ${name}! Verliere nicht aus den Augen, was dir wichtig ist!`,
`Hallo, ${name}! Was steht auf deiner Agenda? Verfolge deine Träume!`,
`Freut mich, dich zu sehen, ${name}! Glaube an dich selbst!`,
`Hoffentlich hattest du einen produktiven Tag, ${name}! Halte die Motivation hoch!`,
`Hallo, ${name}! Wie läuft's? Bleibe positiv und lass dich nicht entmutigen!`,
`Ich hoffe, du hast einen tollen Tag, ${name}! Vertraue auf deine Fähigkeiten!`,
`Hallo, ${name}! Bist du bereit für den Rest des Tages? Zeige, was in dir steckt!`,
`Schön, dich hier zu haben, ${name}! Gib dein Bestes und glaube an dich!`,
`Hallo, ${name}! Wie war dein Vormittag? Halte die Motivation hoch!`,
`Ich wünsche dir einen angenehmen Nachmittag, ${name}! Verfolge deine Ziele mit Leidenschaft!`,
`Hallo, ${name}! Wie geht es dir heute? Denke daran, wie weit du schon gekommen bist!`,
`Freut mich, dass du da bist, ${name}! Glaube an dich und gehe deinen Weg!`,
`Hallo, ${name}! Was hast du heute vor? Halte den Fokus auf das Wesentliche!`,
`Schön, dich wiederzusehen, ${name}! Du bist auf dem Weg zum Erfolg!`,
];
greeting =
afternoonGreetings[
Math.floor(Math.random() * afternoonGreetings.length)
];
} else {
const eveningGreetings = [
`Guten Abend, ${name}! Ein weiterer Tag ist fast vorbei! Du hast viel erreicht!`,
`Schön, dass du da bist, ${name}! Du hast den Tag gemeistert!`,
`Hast du einen produktiven Tag gehabt, ${name}? Sei stolz auf dich!`,
`Hallo, ${name}! Wie war dein Tag? Du bist auf dem richtigen Weg zum Erfolg!`,
`Einen entspannten Abend wünsche ich dir, ${name}! Du hast es dir verdient!`,
`Guten Abend! Wie geht es dir, ${name}? Halte dich an deine Träume!`,
`Hallo, ${name}! Was steht bei dir am Abend an? Entspanne dich und lade deine Energie auf!`,
`Ein herzliches "Guten Abend" an dich, ${name}! Denke daran, wie weit du schon gekommen bist!`,
`Genieße die Ruhe des Abends, ${name}! Du hast heute viel erreicht!`,
`Hallo, ${name}! Wie war dein Tag heute? Feiere deine Erfolge!`,
`Guten Abend! Was hast du heute erlebt, ${name}? Bleibe stolz auf dich!`,
`Ein angenehmer Abend liegt vor dir, ${name}! Lade deine Batterien auf und träume groß!`,
`Hallo, ${name}! Wie geht es dir am Ende des Tages? Sei dankbar für deine Fortschritte!`,
`Schön, dich noch zu sehen, ${name}! Reflektiere über deinen Tag und freue dich auf morgen!`,
`Guten Abend! Was möchtest du heute Abend machen, ${name}? Nutze die Zeit für dich selbst!`,
`Ein gemütlicher Abend steht bevor, ${name}! Entspanne dich und genieße den Moment!`,
`Hallo, ${name}! Wie war deine Arbeit heute? Erhole dich und sei stolz auf dich!`,
`Guten Abend! Du bist auf dem richtigen Weg zum Erfolg, ${name}! Glaube an dich!`,
];
greeting =
eveningGreetings[Math.floor(Math.random() * eveningGreetings.length)];
}
return greeting;
};
return (
<Card>
<h1 style={{ fontWeight: "bold", margin: 0 }}>

View File

@ -14,7 +14,7 @@ import {
Tag,
notification,
} from "antd";
import { useContext, useRef, useState } from "react";
import { useContext, useMemo, useRef, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import {
Constants,
@ -468,6 +468,7 @@ export default function GroupTasksViewModal({ isOpen }) {
footer={<Button onClick={handleCancel}>{t("buttonClose")}</Button>}
>
{notificationContextHolder}
{webSocketContext.GroupTasks.map((groupTask) => {
if (groupTask.Id === paramGroupTaskId) {
let currentGroupTask = groupTask;
@ -818,6 +819,30 @@ function InputRequiredHandler({
);
}
const MyStlViewer = ({ url }) => {
const memoizedCode = useMemo(() => {
return (
<StlViewer
style={{ top: 0, left: 0, height: "100%" }}
orbitControls
modelProps={{
color: Constants.COLORS.SECONDARY,
scale: 1,
positionX: 200,
positionY: 200,
}}
shadows
floorProps={{ gridWidth: 400 }}
url={url}
onError={(err) => console.error(err)}
onFinishLoading={(ev) => console.log(ev)}
/>
);
}, [url]);
return memoizedCode;
};
function GroupTaskStepLogHandler({ currentGroupTaskId, log, files }) {
const getDownloadUrl = (file) => {
return `${Constants.STATIC_CONTENT_ADDRESS}grouptasks/${currentGroupTaskId}/${file.SystemFileName}`;
@ -871,27 +896,12 @@ function GroupTaskStepLogHandler({ currentGroupTaskId, log, files }) {
elements.push(
<div key={"tag" + nonImageFile.SystemFileName}>
<div style={{ height: 300, backgroundColor: "#fff" }}>
<StlViewer
style={{ top: 0, left: 0, height: "100%" }}
orbitControls
modelProps={{
color: Constants.COLORS.SECONDARY,
scale: 1,
positionX: 200,
positionY: 200,
}}
shadows
floorProps={{ gridWidth: 400 }}
url={getDownloadUrl(nonImageFile)}
onFinishLoading={(ev) => {
console.log("ev", ev);
}}
/>
<MyStlViewer url={getDownloadUrl(nonImageFile)} />
</div>
{getTag(nonImageFile)}
</div>
);
console.log("stl download", nonImageFile.SystemFileName);
console.log("url", getDownloadUrl(nonImageFile));
} else {
elements.push(getTag(nonImageFile));
}

View File

@ -10,7 +10,7 @@ const Loading = () => {
return (
<svg id="loading" viewBox="0 0 1350 600">
<text x="50%" y="50%" fill="transparent" textAnchor="middle">
JANEX
J A N E X
</text>
</svg>
);