Skip to content

Commit 074b756

Browse files
MrDog210MrDog210
committed
Update timetable view
- combined export buttons to a popover - formatted jsx with prettier
1 parent 143739d commit 074b756

1 file changed

Lines changed: 112 additions & 40 deletions

File tree

‎src/app/pages/main/TimetablePage.tsx‎

Lines changed: 112 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { Button } from "@/components/ui/button"
55
import { Card, CardContent } from "@/components/ui/card"
66
import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog"
77
import { Label } from "@/components/ui/label"
8+
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover"
89
import { Switch } from "@/components/ui/switch"
910
import { useSettings } from "@/context/UserSettingsContext"
1011
import { APP_PLAY_STORE, DONATION_LINK, GITHUB_ISSUE, GITHUB_REPO } from "@/lib/constants"
@@ -45,69 +46,140 @@ function TimetablePage() {
4546
return (
4647
<div>
4748
<div className="flex gap-2 m-5 mb-0 flex-wrap">
48-
<Button variant="outline" onClick={() => setSettingsOpen(!settingsOpen)}>
49+
<Button
50+
variant="outline"
51+
onClick={() => setSettingsOpen(!settingsOpen)}
52+
>
4953
<BoxesIcon />
5054
Change groups
5155
</Button>
52-
<Button variant="outline" disabled={exportDataMutaion.isPending} onClick={() => exportDataMutaion.mutateAsync({ period: 'week' })}>
53-
{ exportDataMutaion.isPending ? <Loader2Icon className="animate-spin" /> : <FileDown />}
54-
Export week
55-
</Button>
56-
<Button variant="outline" disabled={exportDataMutaion.isPending} onClick={() => exportDataMutaion.mutateAsync({ period: 'all' })}>
57-
{ exportDataMutaion.isPending ? <Loader2Icon className="animate-spin" /> : <FileDown />}
58-
Export semester
59-
</Button>
56+
<Popover>
57+
<PopoverTrigger asChild disabled={exportDataMutaion.isPending}>
58+
<Button variant="outline">
59+
{exportDataMutaion.isPending ? (
60+
<Loader2Icon className="animate-spin" />
61+
) : (
62+
<FileDown />
63+
)}
64+
Export to ICS
65+
</Button>
66+
</PopoverTrigger>
67+
<PopoverContent className="flex flex-col gap-4">
68+
<Button
69+
variant="outline"
70+
disabled={exportDataMutaion.isPending}
71+
onClick={() => exportDataMutaion.mutateAsync({ period: "week" })}
72+
>
73+
{exportDataMutaion.isPending ? (
74+
<Loader2Icon className="animate-spin" />
75+
) : (
76+
<FileDown />
77+
)}
78+
Export open week
79+
</Button>
80+
<Button
81+
variant="outline"
82+
disabled={exportDataMutaion.isPending}
83+
onClick={() => exportDataMutaion.mutateAsync({ period: "all" })}
84+
>
85+
{exportDataMutaion.isPending ? (
86+
<Loader2Icon className="animate-spin" />
87+
) : (
88+
<FileDown />
89+
)}
90+
Export whole semester
91+
</Button>
92+
</PopoverContent>
93+
</Popover>
6094
<ModeToggle />
6195
<Dialog>
6296
<DialogTrigger>
6397
<Button variant="outline">
64-
<SettingsIcon />
65-
Settings
66-
</Button>
67-
</DialogTrigger>
68-
<DialogContent>
69-
<DialogHeader>
70-
<DialogTitle>Settings</DialogTitle>
71-
<div className="flex items-center space-x-2">
72-
<Switch checked={compactWeekView} onCheckedChange={(checked) => {
98+
<SettingsIcon />
99+
Settings
100+
</Button>
101+
</DialogTrigger>
102+
<DialogContent>
103+
<DialogHeader>
104+
<DialogTitle>Settings</DialogTitle>
105+
<div className="flex items-center space-x-2">
106+
<Switch
107+
checked={compactWeekView}
108+
onCheckedChange={(checked) => {
73109
changeSettings({
74-
compactWeekView: checked
75-
})
76-
}} id="compact-day-view" />
77-
<Label htmlFor="compact-day-view">Compact week view</Label>
78-
</div>
79-
<div className="flex items-center space-x-2">
80-
<Switch checked={scrollToCalendar} onCheckedChange={(checked) => {
110+
compactWeekView: checked,
111+
});
112+
}}
113+
id="compact-day-view"
114+
/>
115+
<Label htmlFor="compact-day-view">Compact week view</Label>
116+
</div>
117+
<div className="flex items-center space-x-2">
118+
<Switch
119+
checked={scrollToCalendar}
120+
onCheckedChange={(checked) => {
81121
changeSettings({
82-
scrollToCalendar: checked
83-
})
84-
}} id="compact-day-view" />
85-
<Label htmlFor="compact-day-view">Scroll to timetable on load</Label>
86-
</div>
87-
</DialogHeader>
88-
</DialogContent>
122+
scrollToCalendar: checked,
123+
});
124+
}}
125+
id="compact-day-view"
126+
/>
127+
<Label htmlFor="compact-day-view">
128+
Scroll to timetable on load
129+
</Label>
130+
</div>
131+
</DialogHeader>
132+
</DialogContent>
89133
</Dialog>
90134
<div className="flex-1" />
91135
<Button variant={"destructive"} onClick={reset}>
92136
<RotateCcw />
93137
Reset
94138
</Button>
95139
</div>
96-
{ settingsOpen &&
140+
{settingsOpen && (
97141
<Card className="m-5 mb-0">
98142
<CardContent>
99-
<GroupsSelect selectedGroups={selectedGroups} setSelectedGroup={changeSelectedGroups} />
143+
<GroupsSelect
144+
selectedGroups={selectedGroups}
145+
setSelectedGroup={changeSelectedGroups}
146+
/>
100147
</CardContent>
101-
</Card>}
148+
</Card>
149+
)}
102150
<Timetable date={date} setDate={setDate} />
103151
<div className="flex gap-5 justify-center m-5 flex-wrap">
104-
<Button onClick={() => window.open(APP_PLAY_STORE, "_blank")} variant="link"><Smartphone />Get android app</Button>
105-
<Button onClick={() => window.open(GITHUB_REPO, "_blank")} variant="link"><Github />View source code</Button>
106-
<Button onClick={() => window.open(GITHUB_ISSUE, "_blank")} variant="link"><Bug />Report an issue or suggest a feature</Button>
107-
<Button onClick={() => window.open(DONATION_LINK, "_blank")} variant="link"><Coffee />Support me</Button>
152+
<Button
153+
onClick={() => window.open(APP_PLAY_STORE, "_blank")}
154+
variant="link"
155+
>
156+
<Smartphone />
157+
Get android app
158+
</Button>
159+
<Button
160+
onClick={() => window.open(GITHUB_REPO, "_blank")}
161+
variant="link"
162+
>
163+
<Github />
164+
View source code
165+
</Button>
166+
<Button
167+
onClick={() => window.open(GITHUB_ISSUE, "_blank")}
168+
variant="link"
169+
>
170+
<Bug />
171+
Report an issue or suggest a feature
172+
</Button>
173+
<Button
174+
onClick={() => window.open(DONATION_LINK, "_blank")}
175+
variant="link"
176+
>
177+
<Coffee />
178+
Support me
179+
</Button>
108180
</div>
109181
</div>
110-
)
182+
);
111183
}
112184

113185
export default TimetablePage

0 commit comments

Comments
 (0)