generated from Luis/nextjs-python-web-template
Befor fixing linting problem
This commit is contained in:
@@ -1,165 +0,0 @@
|
||||
import {
|
||||
Button,
|
||||
InputAdornment,
|
||||
LinearProgress,
|
||||
ListSubheader,
|
||||
MenuItem,
|
||||
Select,
|
||||
Switch,
|
||||
TextField,
|
||||
} from "@mui/material";
|
||||
import { Controller, SubmitHandler, UseFormReturn } from "react-hook-form";
|
||||
import { FlakeBadge } from "../flakeBadge/flakeBadge";
|
||||
import { createVm, useInspectFlakeAttrs } from "@/api/default/default";
|
||||
import { VmConfig } from "@/api/model";
|
||||
import { Dispatch, SetStateAction, useEffect, useState } from "react";
|
||||
import { toast } from "react-hot-toast";
|
||||
import { useAppState } from "../hooks/useAppContext";
|
||||
|
||||
interface VmPropLabelProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
const VmPropLabel = (props: VmPropLabelProps) => (
|
||||
<div className="col-span-4 flex items-center sm:col-span-1">
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
|
||||
interface VmPropContentProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
const VmPropContent = (props: VmPropContentProps) => (
|
||||
<div className="col-span-4 sm:col-span-3">{props.children}</div>
|
||||
);
|
||||
|
||||
interface VmDetailsProps {
|
||||
formHooks: UseFormReturn<VmConfig, any, undefined>;
|
||||
setVmUuid: Dispatch<SetStateAction<string | null>>;
|
||||
}
|
||||
|
||||
export const ConfigureVM = (props: VmDetailsProps) => {
|
||||
const { formHooks, setVmUuid } = props;
|
||||
const { control, handleSubmit, watch, setValue } = formHooks;
|
||||
const [isStarting, setStarting] = useState(false);
|
||||
const { setAppState } = useAppState();
|
||||
const { isLoading, data } = useInspectFlakeAttrs({ url: watch("flake_url") });
|
||||
|
||||
useEffect(() => {
|
||||
if (!isLoading && data?.data) {
|
||||
setValue("flake_attr", data.data.flake_attrs[0] || "");
|
||||
}
|
||||
}, [isLoading, setValue, data]);
|
||||
|
||||
const onSubmit: SubmitHandler<VmConfig> = async (data) => {
|
||||
setStarting(true);
|
||||
console.log(data);
|
||||
const response = await createVm(data);
|
||||
const { uuid } = response?.data || null;
|
||||
|
||||
setVmUuid(() => uuid);
|
||||
setStarting(false);
|
||||
if (response.statusText === "OK") {
|
||||
toast.success(("Joined @ " + uuid) as string);
|
||||
setAppState((s) => ({ ...s, isJoined: true }));
|
||||
} else {
|
||||
toast.error("Could not join");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<form
|
||||
onSubmit={handleSubmit(onSubmit)}
|
||||
className="grid grid-cols-4 gap-y-10"
|
||||
>
|
||||
<div className="col-span-4">
|
||||
<ListSubheader sx={{ bgcolor: "inherit" }}>General</ListSubheader>
|
||||
</div>
|
||||
<VmPropLabel>Flake</VmPropLabel>
|
||||
<VmPropContent>
|
||||
<FlakeBadge
|
||||
flakeAttr={watch("flake_attr")}
|
||||
flakeUrl={watch("flake_url")}
|
||||
/>
|
||||
</VmPropContent>
|
||||
<VmPropLabel>Machine</VmPropLabel>
|
||||
<VmPropContent>
|
||||
{!isLoading && (
|
||||
<Controller
|
||||
name="flake_attr"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Select
|
||||
{...field}
|
||||
required
|
||||
variant="standard"
|
||||
fullWidth
|
||||
disabled={isLoading}
|
||||
>
|
||||
{!data?.data.flake_attrs.includes("default") && (
|
||||
<MenuItem value={"default"}>default</MenuItem>
|
||||
)}
|
||||
{data?.data.flake_attrs.map((attr) => (
|
||||
<MenuItem value={attr} key={attr}>
|
||||
{attr}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</VmPropContent>
|
||||
<div className="col-span-4">
|
||||
<ListSubheader sx={{ bgcolor: "inherit" }}>VM</ListSubheader>
|
||||
</div>
|
||||
<VmPropLabel>CPU Cores</VmPropLabel>
|
||||
<VmPropContent>
|
||||
<Controller
|
||||
name="cores"
|
||||
control={control}
|
||||
render={({ field }) => <TextField type="number" {...field} />}
|
||||
/>
|
||||
</VmPropContent>
|
||||
<VmPropLabel>Graphics</VmPropLabel>
|
||||
<VmPropContent>
|
||||
<Controller
|
||||
name="graphics"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<Switch {...field} defaultChecked={watch("graphics")} />
|
||||
)}
|
||||
/>
|
||||
</VmPropContent>
|
||||
<VmPropLabel>Memory Size</VmPropLabel>
|
||||
|
||||
<VmPropContent>
|
||||
<Controller
|
||||
name="memory_size"
|
||||
control={control}
|
||||
render={({ field }) => (
|
||||
<TextField
|
||||
type="number"
|
||||
{...field}
|
||||
InputProps={{
|
||||
endAdornment: (
|
||||
<InputAdornment position="end">MiB</InputAdornment>
|
||||
),
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
/>
|
||||
</VmPropContent>
|
||||
|
||||
<div className="col-span-4 grid items-center">
|
||||
{isStarting && <LinearProgress />}
|
||||
<Button
|
||||
autoFocus
|
||||
type="submit"
|
||||
disabled={isStarting}
|
||||
variant="contained"
|
||||
>
|
||||
Join Clan
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
@@ -1,63 +0,0 @@
|
||||
"use client";
|
||||
import { useState } from "react";
|
||||
import { LoadingOverlay } from "./loadingOverlay";
|
||||
import { FlakeBadge } from "../flakeBadge/flakeBadge";
|
||||
import { Typography, Button } from "@mui/material";
|
||||
// import { FlakeResponse } from "@/api/model";
|
||||
import { ConfirmVM } from "./confirmVM";
|
||||
import { Log } from "./log";
|
||||
import GppMaybeIcon from "@mui/icons-material/GppMaybe";
|
||||
import { useInspectFlake } from "@/api/default/default";
|
||||
|
||||
interface ConfirmProps {
|
||||
flakeUrl: string;
|
||||
flakeAttr: string;
|
||||
handleBack: () => void;
|
||||
}
|
||||
export const Confirm = (props: ConfirmProps) => {
|
||||
const { flakeUrl, handleBack, flakeAttr } = props;
|
||||
const [userConfirmed, setUserConfirmed] = useState(false);
|
||||
|
||||
const { data, isLoading } = useInspectFlake({
|
||||
url: flakeUrl,
|
||||
});
|
||||
|
||||
return userConfirmed ? (
|
||||
<ConfirmVM
|
||||
url={flakeUrl}
|
||||
handleBack={handleBack}
|
||||
defaultFlakeAttr={flakeAttr}
|
||||
/>
|
||||
) : (
|
||||
<div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2 ">
|
||||
{isLoading && (
|
||||
<LoadingOverlay
|
||||
title={"Loading Flake"}
|
||||
subtitle={<FlakeBadge flakeUrl={flakeUrl} flakeAttr={flakeAttr} />}
|
||||
/>
|
||||
)}
|
||||
{data && (
|
||||
<>
|
||||
<Typography variant="subtitle1">
|
||||
To join the clan you must trust the Author
|
||||
</Typography>
|
||||
<GppMaybeIcon sx={{ height: "10rem", width: "10rem", mb: 5 }} />
|
||||
<Button
|
||||
autoFocus
|
||||
size="large"
|
||||
color="warning"
|
||||
variant="contained"
|
||||
onClick={() => setUserConfirmed(true)}
|
||||
sx={{ mb: 10 }}
|
||||
>
|
||||
Trust Flake Author
|
||||
</Button>
|
||||
<Log
|
||||
title="What's about to be built"
|
||||
lines={data.data.content.split("\n")}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -1,61 +0,0 @@
|
||||
"use client";
|
||||
import React, { useEffect, useState } from "react";
|
||||
import { VmConfig } from "@/api/model";
|
||||
import { useVms } from "@/components/hooks/useVms";
|
||||
|
||||
import { LoadingOverlay } from "./loadingOverlay";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { ConfigureVM } from "./configureVM";
|
||||
import { VmBuildLogs } from "./vmBuildLogs";
|
||||
|
||||
interface ConfirmVMProps {
|
||||
url: string;
|
||||
handleBack: () => void;
|
||||
defaultFlakeAttr: string;
|
||||
}
|
||||
|
||||
export function ConfirmVM(props: ConfirmVMProps) {
|
||||
const { url, defaultFlakeAttr } = props;
|
||||
const formHooks = useForm<VmConfig>({
|
||||
defaultValues: {
|
||||
flake_url: url,
|
||||
flake_attr: defaultFlakeAttr,
|
||||
cores: 4,
|
||||
graphics: true,
|
||||
memory_size: 2048,
|
||||
},
|
||||
});
|
||||
const [vmUuid, setVmUuid] = useState<string | null>(null);
|
||||
|
||||
const { setValue, watch, formState } = formHooks;
|
||||
const { config, isLoading } = useVms({
|
||||
url,
|
||||
attr: watch("flake_attr") || defaultFlakeAttr,
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
if (config) {
|
||||
setValue("cores", config?.cores);
|
||||
setValue("memory_size", config?.memory_size);
|
||||
setValue("graphics", config?.graphics);
|
||||
}
|
||||
}, [config, setValue]);
|
||||
|
||||
return (
|
||||
<div className="mb-2 flex w-full max-w-2xl flex-col items-center justify-self-center pb-2">
|
||||
{!formState.isSubmitted && (
|
||||
<>
|
||||
<div className="mb-2 w-full max-w-2xl">
|
||||
{isLoading && (
|
||||
<LoadingOverlay title={"Loading VM Configuration"} subtitle="" />
|
||||
)}
|
||||
|
||||
<ConfigureVM formHooks={formHooks} setVmUuid={setVmUuid} />
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
||||
{formState.isSubmitted && vmUuid && <VmBuildLogs vmUuid={vmUuid} />}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
"use client";
|
||||
import { Typography } from "@mui/material";
|
||||
import { ReactNode } from "react";
|
||||
|
||||
interface LayoutProps {
|
||||
children: ReactNode;
|
||||
}
|
||||
export const Layout = (props: LayoutProps) => {
|
||||
return (
|
||||
<div className="grid h-[70vh] w-full grid-cols-1 justify-center gap-y-4">
|
||||
<Typography variant="h4" className="w-full text-center">
|
||||
Join{" "}
|
||||
<Typography variant="h4" className="font-bold" component={"span"}>
|
||||
Clan.lol
|
||||
</Typography>
|
||||
</Typography>
|
||||
{props.children}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user