127 lines
No EOL
3.8 KiB
TypeScript
127 lines
No EOL
3.8 KiB
TypeScript
import React, { useContext, useEffect, useState } from 'react';
|
|
import { CommonMenuList, Headline } from "../component/mod";
|
|
import { UserContext } from "../state";
|
|
import { Box, Grid, Paper, Typography,Button, Theme } from "@mui/material";
|
|
import {Stack} from '@mui/material';
|
|
|
|
const useStyles = ((theme:Theme)=>({
|
|
paper:{
|
|
padding: theme.spacing(2),
|
|
},
|
|
commitable:{
|
|
display:'grid',
|
|
gridTemplateColumns: `100px auto`,
|
|
},
|
|
contentTitle:{
|
|
marginLeft: theme.spacing(2)
|
|
}
|
|
}));
|
|
type FileDifference = {
|
|
type:string,
|
|
value:{
|
|
type:string,
|
|
path:string,
|
|
}[]
|
|
}
|
|
|
|
|
|
function TypeDifference(prop:{
|
|
content:FileDifference,
|
|
onCommit:(v:{type:string,path:string})=>void,
|
|
onCommitAll:(type:string) => void
|
|
}){
|
|
//const classes = useStyles();
|
|
const x = prop.content;
|
|
const [button_disable,set_disable] = useState(false);
|
|
|
|
return (<Paper /*className={classes.paper}*/>
|
|
<Box /*className={classes.contentTitle}*/>
|
|
<Typography variant='h3' >{x.type}</Typography>
|
|
<Button variant="contained" key={x.type} onClick={()=>{
|
|
set_disable(true);
|
|
prop.onCommitAll(x.type);
|
|
set_disable(false);
|
|
}}>Commit all</Button>
|
|
</Box>
|
|
{x.value.map(y=>(
|
|
<Box /*className={classes.commitable}*/ key={y.path}>
|
|
<Button variant="contained" onClick={()=>{
|
|
set_disable(true);
|
|
prop.onCommit(y);
|
|
set_disable(false);
|
|
}}
|
|
disabled={button_disable}>Commit</Button>
|
|
<Typography variant='h5'>{y.path}</Typography>
|
|
</Box>
|
|
))}
|
|
</Paper>);
|
|
}
|
|
|
|
export function DifferencePage(){
|
|
const ctx = useContext(UserContext);
|
|
//const classes = useStyles();
|
|
const [diffList,setDiffList] = useState<
|
|
FileDifference[]
|
|
>([]);
|
|
const doLoad = async ()=>{
|
|
const list = await fetch('/api/diff/list');
|
|
if(list.ok){
|
|
const inner = await list.json();
|
|
setDiffList(inner);
|
|
}
|
|
else{
|
|
//setDiffList([]);
|
|
}
|
|
};
|
|
const Commit = async(x:{type:string,path:string})=>{
|
|
const res = await fetch('/api/diff/commit',{
|
|
method:'POST',
|
|
body: JSON.stringify([{...x}]),
|
|
headers:{
|
|
'content-type':'application/json'
|
|
}
|
|
});
|
|
const bb = await res.json();
|
|
if(bb.ok){
|
|
doLoad();
|
|
}
|
|
else{
|
|
console.error("fail to add document");
|
|
}
|
|
}
|
|
const CommitAll = async (type :string)=>{
|
|
const res = await fetch("/api/diff/commitall",{
|
|
method:"POST",
|
|
body: JSON.stringify({type:type}),
|
|
headers:{
|
|
'content-type':'application/json'
|
|
}
|
|
});
|
|
const bb = await res.json();
|
|
if(bb.ok){
|
|
doLoad();
|
|
}
|
|
else{
|
|
console.error("fail to add document");
|
|
}
|
|
}
|
|
useEffect(
|
|
()=>{
|
|
doLoad();
|
|
const i = setInterval(doLoad,5000);
|
|
return ()=>{
|
|
clearInterval(i);
|
|
}
|
|
},[]
|
|
)
|
|
const menu = CommonMenuList();
|
|
return (<Headline menu={menu}>
|
|
{(ctx.username == "admin") ? (<div>
|
|
{(diffList.map(x=>
|
|
<TypeDifference key={x.type} content={x} onCommit={Commit} onCommitAll={CommitAll}/>))}
|
|
</div>)
|
|
:(<Typography variant='h2'>Not Allowed : please login as an admin</Typography>)
|
|
}
|
|
|
|
</Headline>)
|
|
} |