robossembler/webstudio
7
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity Actions

progress

Browse source
This commit is contained in:
IDONTSUDO 2023-11-14 20:44:06 +03:00
parent 6f86377685
commit 8ecb036b1d
36 changed files with 498 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

82
ui/src/core/repository/http_repository.ts
View file

@ -1,32 +1,64 @@
import { Result } from "../helper/result";
export enum HttpMethod {
GET = 'GET',
POST = 'POST'
GET = "GET",
POST = "POST",
}
export class HttpError extends Error {
status: number;
error: any;
constructor(error: any, status: number) {
super(error);
this.error = error;
this.status = status;
}
}
export class HttpRepository {
private server = "http://localhost:4001";
private server = 'http://localhost:4001'
public async jsonRequest<T>(
method: HttpMethod,
url: string,
data?: any
): Promise<Result<HttpError, T>> {
try {
const reqInit = {
body: data,
method: method,
headers: { "Content-Type": "application/json" },
};
if (data !== undefined) {
reqInit["body"] = JSON.stringify(data);
}
const response = await fetch(this.server + url, reqInit);
public async jsonRequest<T>(method: HttpMethod, url: string, data?: any): Promise<T> {
const reqInit = {
'body': data,
'method': method,
'headers': { 'Content-Type': 'application/json' },
}
if (data !== undefined) {
reqInit['body'] = JSON.stringify(data)
}
return (await fetch(this.server + url, reqInit)).json()
if (response.status !== 200) {
return Result.error(new HttpError(this.server + url, response.status));
}
return Result.ok(await response.json());
} catch (error) {
return Result.error(new HttpError(error, 0));
}
public async request<T>(method: HttpMethod, url: string, data?: any): Promise<T> {
const reqInit = {
'body': data,
'method': method,
}
if (data !== undefined) {
reqInit['body'] = data
}
return (await fetch(this.server + url, reqInit)).json()
}
public async request<T>(
method: HttpMethod,
url: string,
data?: any
): Promise<T> {
const reqInit = {
body: data,
method: method,
};
if (data !== undefined) {
reqInit["body"] = data;
}
}
const response = await fetch(this.server + url, reqInit);
if (response.status !== 200) {
throw new Error(await response.json());
}
return response.json();
}
}

2
ui/src/core/repository/socket_repository.ts
View file

@ -7,7 +7,7 @@ export class SocketRepository {
const socket = io(this.serverURL);
this.socket = socket;
socket.connect();
socket.on('mock', (d) =>{
socket.on('realtime', (d) =>{
console.log(d)
})
}

5
ui/src/core/routers/routers.tsx
View file

@ -15,6 +15,7 @@ import {
CreatePipelineScreen,
CreatePipelineScreenPath,
} from "../../features/create_pipeline/presentation/create_pipeline_screen";
import { CreateProjectScreen, CreateProjectScreenPath } from "../../features/create_project/create_project_screen";
export const router = createBrowserRouter([
{
@ -33,4 +34,8 @@ export const router = createBrowserRouter([
path: CreatePipelineScreenPath,
element: <CreatePipelineScreen />,
},
{
path: CreateProjectScreenPath,
element: <CreateProjectScreen />,
},
]);

71
ui/src/core/ui/pages/load_page.tsx
View file

@ -12,38 +12,39 @@ interface ILoadPage extends IHeader {
children?: JSX.Element | JSX.Element[];
}
export const LoadPage: React.FunctionComponent<ILoadPage> = observer((
props: ILoadPage
) => {
return (
<>
<Header
path={props.path}
largeText={props.largeText}
minText={props.minText}
/>
{props.isError ? (
<>
<ErrorIcon
style={{
height: "100px",
width: "-webkit-fill-available",
}}
/>
<Title style={{ textAlign: "center" }} level={3} type="danger">
not expected error
</Title>
</>
) : (
<></>
)}
{props.isLoading ? (
<div style={{'marginTop':'50px'}}>
<Loader />
</div>
) : (
<>{props.children}</>
)}
</>
);
});
export const LoadPage: React.FunctionComponent<ILoadPage> = observer(
(props: ILoadPage) => {
return (
<>
<Header
path={props.path}
largeText={props.largeText}
minText={props.minText}
/>
{props.isError ? (
<>
<ErrorIcon
style={{
height: "100px",
width: "-webkit-fill-available",
}}
/>
<Title style={{ textAlign: "center" }} level={3} type="danger">
not expected error
</Title>
</>
) : (
<>
{props.isLoading ? (
<div style={{ marginTop: "50px" }}>
<Loader />
</div>
) : (
<>{props.children}</>
)}
</>
)}
</>
);
}
);

4
ui/src/features/all_projects/presentation/all_projects_screen.tsx
View file

@ -9,8 +9,8 @@ export const AllProjectScreen: React.FunctionComponent = () => {
<>
<Header
path={SelectProjectScreenPath}
largeText={"All Projects"}
minText={"create new pipiline?"}
largeText={"Projects"}
minText={"select instance project?"}
needBackButton={true}
/>
</>

33
ui/src/features/create_pipeline/data/create_pipeline_repository.ts
View file

@ -5,35 +5,22 @@ import {
import { ITriggerModel } from "../../../core/model/trigger_model";
import { Result } from "../../../core/helper/result";
import { IProcess } from "../../create_process/model/process_model";
import { PipelineModelDataBase } from "../model/pipiline_model";
import { PipelineModelDataBase } from "../model/pipeline_model";
export class CreatePipelineRepository extends HttpRepository {
async savePipeline(model: PipelineModelDataBase): Promise<Result<Error, any>> {
try {
return await Result.ok(
this.jsonRequest(HttpMethod.POST, `/pipeline`, model)
);
} catch (error) {
return Result.error(error as Error);
}
async savePipeline(
model: PipelineModelDataBase
): Promise<Result<Error, any>> {
return await this.jsonRequest(HttpMethod.POST, `/pipeline`, model);
}
async getTriggers(page = 1): Promise<Result<Error, ITriggerModel[]>> {
try {
return Result.ok(
await this.jsonRequest(HttpMethod.GET, `/trigger?${page}`)
);
} catch (error) {
return Result.error(error as Error);
}
return await this.jsonRequest(HttpMethod.GET, `/trigger?${page}`);
}
async getProcessed(page = 1): Promise<Result<Error, IProcess[]>> {
try {
return Result.ok(
await this.jsonRequest<IProcess[]>(HttpMethod.GET, `/process?${page}`)
);
} catch (error) {
return Result.error(error as Error);
}
return await this.jsonRequest<IProcess[]>(
HttpMethod.GET,
`/process?${page}`
);
}
}

0
ui/src/features/create_pipeline/model/pipiline_model.ts → ui/src/features/create_pipeline/model/pipeline_model.ts
View file

14
ui/src/features/create_project/create_project_repository.ts
View file

@ -6,6 +6,7 @@ import {
HttpRepository,
} from "../../core/repository/http_repository";
import { IProcess } from "../create_process/model/process_model";
import { ICreateProjectViewModel } from "./project_model";
export interface PipelineModel extends DatabaseModel {
process: IProcess;
@ -14,12 +15,11 @@ export interface PipelineModel extends DatabaseModel {
export class CreateProjectRepository extends HttpRepository {
async getAllPipelines(page = 1): Promise<Result<Error, PipelineModel[]>> {
try {
return Result.ok(
await this.jsonRequest<PipelineModel[]>(HttpMethod.GET, "/pipeline")
);
} catch (error) {
return Result.error(error as Error);
}
return await this.jsonRequest<PipelineModel[]>(HttpMethod.GET, "/pipeline");
}
async saveProject(
model: ICreateProjectViewModel
): Promise<Result<Error, void>> {
return await this.jsonRequest<void>(HttpMethod.POST, "/project", model);
}
}

91
ui/src/features/create_project/create_project_screen.tsx
View file

@ -1,6 +1,89 @@
import * as React from "react";
export const createProjectScreenPath = "/create_project";
import { LoadPage } from "../../core/ui/pages/load_page";
import { createProjectStore } from "./create_project_store";
import { observer } from "mobx-react-lite";
import { Col, Row, Input, Button } from "antd";
import { ReactComponent as AddIcon } from "../../core/assets/icons/add.svg";
import { CreatePipelineScreenPath } from "../create_pipeline/presentation/create_pipeline_screen";
export const CreateProjectScreen: React.FunctionComponent = () => {
return <></>;
};
export const CreateProjectScreenPath = "/create_project";
export const CreateProjectScreen: React.FunctionComponent = observer(() => {
return (
<>
<LoadPage
path={CreatePipelineScreenPath}
largeText={"Create project"}
minText={"add new pipelines?"}
isLoading={createProjectStore.isLoading}
isError={createProjectStore.isError}
children={
<Row>
<Col>
<>Pipelines</>
{createProjectStore.pipelineModels?.map((el) => {
return (
<div
style={{
backgroundColor: "ActiveBorder",
margin: "10px",
width: "400px",
}}
>
<div>{el.process.description}</div>
<div>{el.trigger.description}</div>
<AddIcon
style={{
width: "50px",
cursor: "pointer",
height: "50px",
marginRight: "40px",
}}
onClick={() => {
createProjectStore.addPipeline(el);
}}
/>
</div>
);
})}
</Col>
<Col>
<Row>
<Input
style={{ width: "250px" }}
onChange={(e) =>
createProjectStore.setDescriptionToNewProject(
e.target.value
)
}
placeholder="project description"
/>
<Button onClick={() => createProjectStore.saveProject()}>
save
</Button>
</Row>
{createProjectStore.newProjectViews.map((el, index) => {
return (
<div
style={{
backgroundColor: "ActiveBorder",
margin: "10px",
width: "400px",
}}
>
<div>{el.process.description}</div>
<div>{el.trigger.description}</div>
<div>{index + 1}</div>
</div>
);
})}
</Col>
</Row>
}
/>
</>
);
});

49
ui/src/features/create_project/create_project_store.ts
View file

@ -3,19 +3,26 @@ import {
CreateProjectRepository,
PipelineModel,
} from "./create_project_repository";
import { message } from "antd";
class ProcessStore {
class CreateProjectStore {
repository: CreateProjectRepository;
isLoading = false;
isError = false;
pipelineModels?: PipelineModel[];
newProjectDescription: string = "";
newProjectViews: PipelineModel[] = [];
constructor(repository: CreateProjectRepository) {
this.repository = repository;
makeAutoObservable(this);
this.loadPipelines();
}
async addPipeline(model: PipelineModel) {
this.newProjectViews.push(model);
}
async loadPipelines() {
this.isLoading = true;
const result = await this.repository.getAllPipelines();
@ -29,6 +36,42 @@ class ProcessStore {
);
this.isLoading = false;
}
setDescriptionToNewProject(value: string): void {
this.newProjectDescription = value;
}
async saveProject(): Promise<void> {
if (this.newProjectDescription.isEmpty()) {
message.error("project description is not empty");
return;
}
if (this.newProjectViews.isEmpty()) {
message.error("project view is not empty");
return;
}
this.isLoading = true;
const result = await this.repository.saveProject({
description: this.newProjectDescription,
pipelines: this.newProjectViews.map((el) => el._id ?? ""),
});
this.newProjectDescription = "";
this.newProjectViews = [];
this.isLoading = false;
result.fold(
(_s) => {
message.success("save");
},
(_e) => {
this.isError = true;
}
);
}
}
export const processStore = new ProcessStore(new CreateProjectRepository());
export const createProjectStore = new CreateProjectStore(
new CreateProjectRepository()
);

5
ui/src/features/create_project/project_model.ts Normal file
View file

@ -0,0 +1,5 @@
export interface ICreateProjectViewModel {
pipelines: string[];
description: string;
}

8
ui/src/features/select_project/data/select_project_repository.ts
View file

@ -7,12 +7,6 @@ import { IProjectModel } from "../model/project_model";
export class SelectProjectRepository extends HttpRepository {
async getAllProjects(page = 1): Promise<Result<Error, IProjectModel[]>> {
try {
return Result.ok(
await this.jsonRequest(HttpMethod.GET, `/project?${page}`)
);
} catch (error) {
return Result.error(error as Error);
}
return await this.jsonRequest(HttpMethod.GET, `/project?${page}`);
}
}

6
ui/src/features/select_project/presentation/select_project.tsx
View file

@ -1,10 +1,8 @@
import * as React from "react";
import { selectProjectStore } from "./select_project_store";
import { Loader } from "../../../core/ui/loader/loader";
import { observer } from "mobx-react-lite";
import { Header } from "../../../core/ui/header/header";
import { CreatePipelineScreenPath } from "../../create_pipeline/presentation/create_pipeline_screen";
import { LoadPage } from "../../../core/ui/pages/load_page";
import { CreateProjectScreenPath } from "../../create_project/create_project_screen";
export const SelectProjectScreenPath = "/select_project";
@ -12,7 +10,7 @@ export const SelectProjectScreen: React.FunctionComponent = observer(() => {
return (
<>
<LoadPage
path={CreatePipelineScreenPath}
path={CreateProjectScreenPath}
largeText={"Select project"}
minText={"add new project?"}
isLoading={selectProjectStore.isLoading}

2
ui/src/features/socket_lister/socket_lister_store.ts
View file

@ -8,7 +8,9 @@ class SocketListerStore {
constructor(repository: SocketRepository) {
this.repository = repository;
makeAutoObservable(this);
repository.connect()
}
async reconnect() {
await this.repository.connect()
this.socketDisconnect = false