Skip to content

Commit 7f2298e

Browse files
raduwenraduwen
committed
implements TimeWidget editor
1 parent 8fc0ddc commit 7f2298e

File tree

5 files changed

+168
-86
lines changed

5 files changed

+168
-86
lines changed

‎src/components/TimeWidget/editor.tsx‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import React, { Component } from 'react';
2+
import styled from 'styled-components';
3+
import { TextField, Button, Typography } from '@material-ui/core';
4+
import { FirebaseDatabaseMutation } from '@react-firebase/database'
5+
import type { TimeWidgetProps } from './types';
6+
7+
type Props = {
8+
id: string;
9+
props: TimeWidgetProps;
10+
};
11+
12+
const FormGroup = styled.div`
13+
display: flex;
14+
margin-bottom: 1rem;
15+
width: 480px;
16+
& > label {
17+
width: 20%;
18+
}
19+
& > input {
20+
flex-grow: 1;
21+
}
22+
`;
23+
24+
class TimeWidgetEditor extends Component<Props, TimeWidgetProps> {
25+
constructor(props) {
26+
super(props);
27+
this.state = this.props.props;
28+
}
29+
30+
render() {
31+
return (
32+
<div>
33+
<Typography variant="h6">
34+
TimeWidget : {this.props.id}
35+
</Typography>
36+
<FormGroup>
37+
<TextField
38+
type="number"
39+
label="size"
40+
fullWidth
41+
variant="outlined"
42+
onChange={(e) => {
43+
this.setState({ ...this.state, size: e.target.value });
44+
}}
45+
value={this.state.size}
46+
/>
47+
</FormGroup>
48+
49+
<FirebaseDatabaseMutation
50+
type="set"
51+
path={`/widgets/${this.props.id}/props`}
52+
>
53+
{({ runMutation }) => {
54+
return (
55+
<FormGroup>
56+
<Button
57+
type="button"
58+
color="primary"
59+
variant="contained"
60+
onClick={async (e: any) => {
61+
e.preventDefault();
62+
await runMutation(this.state);
63+
}}
64+
>
65+
Save
66+
</Button>
67+
</FormGroup>
68+
);
69+
}}
70+
</FirebaseDatabaseMutation>
71+
</div>
72+
);
73+
}
74+
}
75+
76+
export { TimeWidgetEditor };

‎src/components/TimeWidget/index.tsx‎

Lines changed: 2 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -1,85 +1,2 @@
1-
import React, { CSSProperties } from 'react';
2-
3-
interface TimeWidgetProps {
4-
size: number;
5-
};
6-
7-
interface TimeWidgetState {
8-
time: Date;
9-
};
10-
11-
class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
12-
interval: NodeJS.Timer | null;
13-
14-
constructor(props: TimeWidgetProps) {
15-
super(props)
16-
this.state = {
17-
time: new Date()
18-
};
19-
}
20-
21-
render() {
22-
const { size } = this.props
23-
24-
const style: CSSProperties = {
25-
display: 'flex',
26-
justifyContent: 'center',
27-
alignItems: 'center',
28-
textAlign: 'center',
29-
position: 'absolute',
30-
bottom: 0,
31-
right: 0,
32-
width: `${size*9.5}px`,
33-
height: `${size*9.5}px`,
34-
borderRadius: '50%',
35-
color: 'white',
36-
background: 'rgba(0, 128, 128, 0.75)',
37-
transform: `translate(${size*1.25}px, ${size*2.4}px) rotate(-20deg)`,
38-
fontSize: `${size}px`,
39-
fontWeight: 'bold'
40-
}
41-
42-
return (
43-
<div style={style}>
44-
{this.formattedTime(this.state.time)}
45-
</div>
46-
)
47-
}
48-
49-
formattedTime(time) {
50-
return `
51-
${time.getFullYear()}/${this.zero_fill(time.getMonth() + 1)}/${this.zero_fill(time.getDate())}(${this.day2str(time.getDay())})\n
52-
${this.zero_fill(time.getHours())}:${this.zero_fill(time.getMinutes())}:${this.zero_fill(time.getSeconds())}
53-
`
54-
}
55-
56-
zero_fill(str) {
57-
return `0${str}`.slice(-2)
58-
}
59-
60-
day2str(n) {
61-
return [
62-
'日',
63-
'月',
64-
'火',
65-
'水',
66-
'木',
67-
'金',
68-
'土'
69-
][n]
70-
}
71-
72-
tick() {
73-
this.setState({ time: new Date() })
74-
}
75-
76-
componentDidMount() {
77-
this.interval = setInterval(this.tick.bind(this), 500)
78-
}
79-
80-
componentWillUnmpount() {
81-
clearInterval(this.interval)
82-
}
83-
}
84-
85-
export { TimeWidget }
1+
export { TimeWidget } from './widget';
2+
export { TimeWidgetEditor } from './editor';

‎src/components/TimeWidget/types.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
type TimeWidgetProps = {
2+
size: number;
3+
};
4+
5+
export type { TimeWidgetProps };

‎src/components/TimeWidget/widget.tsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
import React, { CSSProperties } from 'react';
2+
import type { TimeWidgetProps } from './types';
3+
4+
interface TimeWidgetState {
5+
time: Date;
6+
};
7+
8+
class TimeWidget extends React.Component<TimeWidgetProps, TimeWidgetState> {
9+
interval: NodeJS.Timer | null;
10+
11+
constructor(props: TimeWidgetProps) {
12+
super(props)
13+
this.state = {
14+
time: new Date()
15+
};
16+
}
17+
18+
render() {
19+
const { size } = this.props
20+
21+
const style: CSSProperties = {
22+
display: 'flex',
23+
justifyContent: 'center',
24+
alignItems: 'center',
25+
textAlign: 'center',
26+
position: 'absolute',
27+
bottom: 0,
28+
right: 0,
29+
width: `${size*9.5}px`,
30+
height: `${size*9.5}px`,
31+
borderRadius: '50%',
32+
color: 'white',
33+
background: 'rgba(0, 128, 128, 0.75)',
34+
transform: `translate(${size*1.25}px, ${size*2.4}px) rotate(-20deg)`,
35+
fontSize: `${size}px`,
36+
fontWeight: 'bold'
37+
}
38+
39+
return (
40+
<div style={style}>
41+
{this.formattedTime(this.state.time)}
42+
</div>
43+
)
44+
}
45+
46+
formattedTime(time) {
47+
return `
48+
${time.getFullYear()}/${this.zero_fill(time.getMonth() + 1)}/${this.zero_fill(time.getDate())}(${this.day2str(time.getDay())})\n
49+
${this.zero_fill(time.getHours())}:${this.zero_fill(time.getMinutes())}:${this.zero_fill(time.getSeconds())}
50+
`
51+
}
52+
53+
zero_fill(str) {
54+
return `0${str}`.slice(-2)
55+
}
56+
57+
day2str(n) {
58+
return [
59+
'日',
60+
'月',
61+
'火',
62+
'水',
63+
'木',
64+
'金',
65+
'土'
66+
][n]
67+
}
68+
69+
tick() {
70+
this.setState({ time: new Date() })
71+
}
72+
73+
componentDidMount() {
74+
this.interval = setInterval(this.tick.bind(this), 500)
75+
}
76+
77+
componentWillUnmpount() {
78+
clearInterval(this.interval)
79+
}
80+
}
81+
82+
export { TimeWidget }

‎src/components/admin/index.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,11 @@ import { AuthProvider } from '@/lib/AuthProvider';
1515
import { auth } from '@/lib/firebase';
1616
import { Signin } from '@/components/admin/signin';
1717
import { TextWidgetEditor } from '@/components/TextWidget';
18+
import { TimeWidgetEditor } from '@/components/TimeWidget';
1819

1920
const Editors = {
20-
'text': TextWidgetEditor,
21+
text: TextWidgetEditor,
22+
time: TimeWidgetEditor,
2123
};
2224

2325
const useStyles = makeStyles((theme) => ({

0 commit comments

Comments
 (0)