Skip to content

Commit cd7118a

Browse files
rinrikorinriko
committed
update help
1 parent 40171a5 commit cd7118a

File tree

3 files changed

+81
-32
lines changed

3 files changed

+81
-32
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "TxCRCPME",
3-
"version": "1.0.1",
3+
"version": "1.0.0",
44
"private": true,
55
"main": "public/electron.js",
66
"authors": "idvl",

‎src/App.js‎

Lines changed: 34 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -54,19 +54,18 @@ function App() {
5454
const [AnalysisPunchouts, setAnalysisPunchouts] = React.useState(0);
5555
const [AnalysisSlabThickness, setAnalysisSlabThickness] = React.useState(0);
5656
const [anchorEl, setAnchorEl] = useState(null); // State to manage the settings menu
57-
const [openModal, setOpenModal] = useState(false); // State to control modal visibility
57+
const [openAboutModal, setOpenAboutModal] = useState(false); // About modal state
58+
const [openHelpModal, setOpenHelpModal] = useState(false); // Help modal state
5859

5960
const classes = useStyles();
6061
const AnalysisPunchoutsFunc = (d) => d === undefined ? AnalysisPunchouts : setAnalysisPunchouts(d);
6162
const AnalysisSlabThicknessFunc = (d) => d === undefined ? AnalysisSlabThickness : setAnalysisSlabThickness(d);
62-
const handleAboutClick = () => {
63-
setOpenModal(true); // Open the modal
64-
console.log('Version: ', packagejson.version);
65-
};
66-
const handleCloseModal = () => {
67-
setOpenModal(false); // Close the modal
68-
};
63+
64+
const handleAboutClick = () => setOpenAboutModal(true);
65+
const handleHelpClick = () => setOpenHelpModal(true);
6966

67+
const handleCloseAboutModal = () => setOpenAboutModal(false);
68+
const handleCloseHelpModal = () => setOpenHelpModal(false);
7069
return (
7170
<ThemeProvider theme={theme}>
7271
<div>
@@ -97,26 +96,47 @@ function App() {
9796
onClose={() => setAnchorEl(null)} // Close menu
9897
>
9998
<MenuItem onClick={() => setPage('TransferFunc')}>Transfer Function</MenuItem>
100-
<MenuItem onClick={() => console.log('Version: ', packagejson.version)}>Help</MenuItem>
99+
<MenuItem onClick={handleHelpClick}>Help</MenuItem>
101100
<MenuItem onClick={handleAboutClick}>About</MenuItem>
102101
</Menu>
103102

104103
</Toolbar>
105104
</AppBar>
106105
{/* About Modal */}
107-
<Dialog open={openModal} onClose={handleCloseModal}>
106+
<Dialog open={openAboutModal} onClose={handleCloseAboutModal}>
108107
<DialogTitle>About</DialogTitle>
109108
<DialogContent>
110109
<h3>Program Name</h3>
111110
<p>TxDOT Mechanistic-Empirical CRCP Design System</p>
112111

113112
<h3>Version</h3>
114113
<p>{packagejson.version}</p>
114+
115115
<h3>Developed By</h3>
116116
<p>iDataVisualizationLab</p>
117117
</DialogContent>
118118
<DialogActions>
119-
<Button onClick={handleCloseModal} color="primary">Close</Button>
119+
<Button onClick={handleCloseAboutModal} color="primary">Close</Button>
120+
</DialogActions>
121+
</Dialog>
122+
123+
{/* Help Modal */}
124+
<Dialog open={openHelpModal} onClose={handleCloseHelpModal}>
125+
<DialogTitle>Help</DialogTitle>
126+
<DialogContent>
127+
<h3>How to Generate a Private Access Token</h3>
128+
<ol>
129+
<li>Go to your GitHub account and navigate to <strong>Settings</strong>.</li>
130+
<li>Under <strong>Developer settings</strong>, select <strong>Personal access tokens</strong>.</li>
131+
<li>Click <strong>Fine-grained tokens</strong>, then <strong>Generate new token</strong>.</li>
132+
<li>Enter a descriptive <strong>Name</strong> for the token.</li>
133+
<li>Set the <strong>Repository Access</strong> scope to include <strong>iDataVisualizationLab/TxDOT</strong>.</li>
134+
<li>Select appropriate permissions (e.g., read/write for releases).</li>
135+
<li>Click <strong>Generate token</strong> and copy the token for use.</li>
136+
</ol>
137+
</DialogContent>
138+
<DialogActions>
139+
<Button onClick={handleCloseHelpModal} color="primary">Close</Button>
120140
</DialogActions>
121141
</Dialog>
122142

@@ -155,7 +175,9 @@ function App() {
155175
{/* Transfer Function Page */}
156176
<Slide direction="up" in={page === 'TransferFunc'} mountOnEnter unmountOnExit>
157177
<div>
158-
<TransferFunc toMenu={() => setPage('home')} />
178+
<TransferFunc
179+
toMenu={() => setPage('home')}
180+
handleHelpClick = {handleHelpClick} />
159181
</div>
160182
</Slide>
161183
</div>

‎src/component/TransferFunc.js‎

Lines changed: 46 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -143,9 +143,6 @@ class TransferFunc extends Component {
143143
});
144144
const shaTransferFuncVar = await getFileSHA(filePath);
145145
const shaPackageJson = await getFileSHA('package.json');
146-
this.setState({
147-
loading: false
148-
}); // Reset loading after the request is done
149146
const updatedContent = `
150147
export const A = ${A};
151148
export const B = ${B};
@@ -192,10 +189,16 @@ class TransferFunc extends Component {
192189

193190
// Show success alert
194191
alert('File uploaded successfully!');
192+
this.setState({
193+
loading: false
194+
});
195195
this.props.toMenu();
196196
} catch (error) {
197197
console.error('Error uploading file', error);
198198

199+
this.setState({
200+
loading: false
201+
});
199202
// Check if the error is due to an invalid token (401 Unauthorized)
200203
if (error.response && error.response.status === 401) {
201204
alert('Error: Invalid GitHub token. Please check your token and try again.');
@@ -231,7 +234,7 @@ class TransferFunc extends Component {
231234
};
232235

233236
render() {
234-
const { A, B, C, token, version, errorA, errorB, errorC, errorToken, errorVersion, loading } = this.state;
237+
const { A, B, C, token, version, errorA, errorB, errorC, errorToken, errorVersion, loading} = this.state;
235238

236239
// Generate FC values and PO values
237240
const FCValues = Array.from({ length: 1000 }, (_, i) => Math.pow(10, -3 + (i * 6) / 999)); // From 1e-3 to 1e3
@@ -271,7 +274,7 @@ class TransferFunc extends Component {
271274
{/* Form Section */}
272275
<Grid item xs={12} sm={6}>
273276
<Typography variant="body1" align="center" gutterBottom style={{ color: '#1976d2', fontSize: '2rem' }}>
274-
<MathJax style={{ fontSize: '2rem', textAlign: 'center' }}>
277+
<MathJax key={`${A}-${B}-${C}`} style={{ fontSize: '2rem', textAlign: 'center' }}>
275278
{`\\( New \\ PO_{Texas} = \\frac{${A}}{1 + ${B} \\cdot (FC)^{${C}}} \\)`}
276279
</MathJax>
277280
</Typography>
@@ -288,21 +291,45 @@ class TransferFunc extends Component {
288291
{ label: 'GitHub Token', value: token, error: errorToken, type: 'password', onChange: (e) => this.setState({ token: e.target.value }) },
289292
{ label: 'Version', value: version, error: errorVersion, type: 'text', onChange: (e) => this.setState({ version: e.target.value }) }
290293
].map(({ label, value, error, type = 'number', onChange }, index) => (
291-
<TextField
292-
key={index}
293-
label={label}
294-
type={type}
295-
variant="outlined"
296-
fullWidth
297-
margin="normal"
298-
value={value}
299-
onChange={onChange}
300-
error={error}
301-
helperText={error ? `Please enter a valid ${label.toLowerCase()}.` : ''}
302-
style={{ fontSize: '1.2rem', marginBottom: '20px' }}
303-
/>
294+
<React.Fragment key={index}>
295+
{label === 'GitHub Token' ? (
296+
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
297+
<TextField
298+
label={label}
299+
type={type}
300+
variant="outlined"
301+
fullWidth
302+
value={value}
303+
onChange={onChange}
304+
error={error}
305+
helperText={error ? `Please enter a valid ${label.toLowerCase()}.` : ''}
306+
style={{ marginRight: '10px' }}
307+
/>
308+
<Button
309+
color="primary"
310+
variant="outlined"
311+
onClick={this.props.handleHelpClick}
312+
style={{ fontSize: '0.875rem', padding: '2px 16px' }}
313+
>
314+
What is a Token?
315+
</Button>
316+
</div>
317+
) : (
318+
<TextField
319+
label={label}
320+
type={type}
321+
variant="outlined"
322+
fullWidth
323+
margin="normal"
324+
value={value}
325+
onChange={onChange}
326+
error={error}
327+
helperText={error ? `Please enter a valid ${label.toLowerCase()}.` : ''}
328+
style={{ fontSize: '1.2rem', marginBottom: '20px' }}
329+
/>
330+
)}
331+
</React.Fragment>
304332
))}
305-
306333
{/* Buttons */}
307334
<div style={{ display: 'flex', justifyContent: 'center' }}>
308335
<Button

0 commit comments

Comments
 (0)