oh-queue/oh_queue/static/js/components/admin_appointments_manager.js at 3cfbb9bcae1196e2678c4a3cd6c52fb3e004c2b1 · Cal-CS-61A-Staff/oh-queue · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
function AdminAppointmentsManager({ state }) {
    const [sheetUrl, setSheetUrl] = React.useState("");
    const [sheetName, setSheetName] = React.useState("");

    const [isLoading, setIsLoading] = React.useState(false);

    const handleSheetUrlChange = (e) => {
        setSheetUrl(e.target.value);
    };
    const handleSheetNameChange = (e) => {
        setSheetName(e.target.value);
    };

    const submit = () => {
        setIsLoading(true);
        app.makeRequest("upload_appointments", {
            sheetUrl, sheetName,
        }, false, () => {setIsLoading(false)});
    };

    return (
        <React.Fragment>
            <AdminOptionsManager>
                <tr>
                    <td>Should students be able to make appointments?</td>
                    <td className="col-md-1">
                        <ConfigLinkedToggle
                            config={state.config}
                            configKey="appointments_open"
                            offText="No"
                            onText="Yes"
                        />
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>
                            How many appointments should a student be able to make daily?
                        </p>
                    </td>
                    <td className="col-md-3">
                        <ConfigLinkedNumeric
                            config={state.config}
                            configKey="daily_appointment_limit"
                        />
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>
                            How many appointments should a student be able to make weekly?
                        </p>
                    </td>
                    <td className="col-md-3">
                        <ConfigLinkedNumeric
                            config={state.config}
                            configKey="weekly_appointment_limit"
                        />
                    </td>
                </tr>
                <tr>
                    <td>
                        <p>
                        How many appointments should a student have be pending simultaneously?
                        </p>
                            (by
                            <ConfigLinkedToggle config={state.config} configKey="appointment_or_minutes" onText="minutes" offText="number"/>
                            )
                    </td>
                    <td className="col-md-3">
                        <ConfigLinkedNumeric
                            config={state.config}
                            configKey="simul_appointment_limit"
                        />
                    </td>
                </tr>
            </AdminOptionsManager>
            <form>
                <div className="input-group appointment-input">
                    <input id="url-selector" type="text" className="form-control" placeholder="Link to a spreadsheet containing appointments" required value={sheetUrl} onChange={handleSheetUrlChange} />
                    <input id="sheet-selector" className="form-control form-right" type="text" name="question" title="Sheet name" placeholder="Sheet name" required value={sheetName} onChange={handleSheetNameChange}/>
                      <span className="input-group-btn">
                        <button className={"btn btn-default " + (isLoading ? "is-loading" : "")} type="button" onClick={submit}>
                            Update
                        </button>
                      </span>
                </div>
                <small>
                    You must share this spreadsheet with the 61A service account <a href="mailto:secure-links@ok-server.iam.gserviceaccount.com">secure-links@ok-server.iam.gserviceaccount.com</a>.
                </small>
            </form>
        </React.Fragment>
    );
}