Skip to content

Commit c9c6f73

Browse files
alolapoalolapo
committed
Mobile tables (#128)
Fixes #86.
1 parent 2aed7a8 commit c9c6f73

File tree

3 files changed

+302
-60
lines changed

3 files changed

+302
-60
lines changed

‎votrfront/css/main.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -216,6 +216,24 @@ thead:empty, tbody:empty, tfoot:empty {
216216
@include box-shadow(none);
217217
}
218218

219+
.expand-arrow {
220+
display: inline-block;
221+
width: 0;
222+
height: 0;
223+
vertical-align: middle;
224+
border-right: 6px solid transparent;
225+
border-left: 6px solid transparent;
226+
margin-right: 4px;
227+
}
228+
229+
.arrow-expanded {
230+
border-bottom: 6px dashed #555;
231+
}
232+
233+
.arrow-collapsed {
234+
border-top: 6px dashed #555;
235+
}
236+
219237
.anketa__wrap {
220238
background-color: #fff;
221239
font-family: "Open Sans";

‎votrfront/js/MojeSkuskyPage.js‎

Lines changed: 102 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -7,23 +7,99 @@ import { ZapisnyListSelector } from './ZapisnyListSelector';
77
import { CacheRequester, Loading, RequestCache, sendRpc } from './ajax';
88
import { PageLayout, PageTitle } from './layout';
99
import { Link, queryConsumer } from './router';
10-
import { sortAs, sortTable } from './sorting';
11-
10+
import { sortAs, SortableTable } from './sorting';
1211

1312
// TODO: Oddelit Aktualne terminy hodnotenia vs Stare terminy hodnotenia
1413

15-
export var MojeSkuskyColumns = [
16-
["Moje?", null, (termin) => !termin.datum_prihlasenia || termin.datum_odhlasenia ? 'N' : 'A'],
17-
["Predmet", 'nazov_predmetu'],
18-
["Dátum", 'datum', sortAs.date],
19-
["Čas", 'cas'],
20-
["Miestnosť", 'miestnost'],
21-
["Hodnotiaci", 'hodnotiaci', sortAs.personName],
22-
["Prihlásení", 'pocet_prihlasenych', sortAs.number],
23-
["Poznámka", 'poznamka'],
24-
["Prihlasovanie", 'prihlasovanie', sortAs.interval],
25-
["Odhlasovanie", 'odhlasovanie', sortAs.interval],
26-
["Známka", null, (termin) => termin.hodnotenie_terminu || termin.hodnotenie_predmetu]
14+
const MojeSkuskyColumns = [
15+
{
16+
label: "Moje?",
17+
process: termin => !termin.datum_prihlasenia || termin.datum_odhlasenia ? "N" : "A",
18+
cell: termin => !termin.datum_prihlasenia || termin.datum_odhlasenia ? "\u2718" : "\u2714",
19+
colProps: termin => !termin.datum_prihlasenia || termin.datum_odhlasenia
20+
? {
21+
title: "Nie ste prihlásení",
22+
className: "text-center text-negative"
23+
}
24+
: { title: "Ste prihlásení", className: "text-center text-positive" }
25+
},
26+
{
27+
label: "Predmet",
28+
prop: "nazov_predmetu",
29+
cell: (termin, query) => (
30+
<Link
31+
href={{
32+
...query,
33+
modal: "detailPredmetu",
34+
modalPredmetKey: termin.predmet_key,
35+
modalAkademickyRok: termin.akademicky_rok
36+
}}
37+
>
38+
{termin.nazov_predmetu}
39+
</Link>
40+
),
41+
expansionMark: true
42+
},
43+
{ label: "Dátum", prop: "datum", process: sortAs.date },
44+
{ label: "Čas", prop: "cas" },
45+
{ label: "Miestnosť", prop: "miestnost", hiddenClass: ["hidden-xs"] },
46+
{
47+
label: "Hodnotiaci",
48+
prop: "hodnotiaci",
49+
process: sortAs.personName,
50+
hiddenClass: ["hidden-xs", "hidden-sm"]
51+
},
52+
{
53+
label: "Prihlásení",
54+
prop: "pocet_prihlasenych",
55+
process: sortAs.number,
56+
hiddenClass: ["hidden-xs"],
57+
cell: (termin, query) => (
58+
<Link
59+
href={{
60+
...query,
61+
modal: "zoznamPrihlasenychNaTermin",
62+
modalTerminKey: termin.termin_key
63+
}}
64+
>
65+
{termin.pocet_prihlasenych +
66+
(termin.maximalne_prihlasenych
67+
? "/" + termin.maximalne_prihlasenych
68+
: "")}
69+
</Link>
70+
)
71+
},
72+
{
73+
label: "Poznámka",
74+
prop: "poznamka",
75+
hiddenClass: ["hidden-xs", "hidden-sm"]
76+
},
77+
{
78+
label: "Prihlasovanie",
79+
prop: "prihlasovanie",
80+
process: sortAs.interval,
81+
hiddenClass: ["hidden-xs", "hidden-sm"]
82+
},
83+
{
84+
label: "Odhlasovanie",
85+
prop: "odhlasovanie",
86+
process: sortAs.interval,
87+
hiddenClass: ["hidden-xs", "hidden-sm"]
88+
},
89+
{
90+
label: "Známka",
91+
process: termin => termin.hodnotenie_terminu || termin.hodnotenie_predmetu,
92+
cell: termin => (
93+
<React.Fragment>
94+
{termin.hodnotenie_terminu
95+
? termin.hodnotenie_terminu
96+
: termin.hodnotenie_predmetu
97+
? termin.hodnotenie_predmetu + " (nepriradená k termínu)"
98+
: null}
99+
<SkuskyRegisterButton termin={termin} />
100+
</React.Fragment>
101+
)
102+
}
27103
];
28104

29105
function convertToICAL(terminy) {
@@ -39,7 +115,7 @@ function convertToICAL(terminy) {
39115
"X-WR-CALDESC:Kalendár skúšok vyexportovaný z aplikácie Votr",
40116
"X-WR-TIMEZONE:Europe/Bratislava",
41117
];
42-
118+
43119
var dtstamp = new Date().toISOString().replace(/[-:]/g, '').replace(/\.\d+/, '');
44120

45121
// VEVENTs
@@ -49,13 +125,13 @@ function convertToICAL(terminy) {
49125
continue;
50126
}
51127
lines.push("BEGIN:VEVENT");
52-
128+
53129
lines.push("SUMMARY:" + termin.nazov_predmetu);
54-
130+
55131
// unique identificator for each event (so we can identify copies of the same event)
56132
var uid = termin.termin_key + "@votr.uniba.sk";
57133
lines.push("UID:" + uid);
58-
134+
59135
// DTSTAMP is when this VEVENT was created (exported), must be YYYYMMDDTHHMMSSZ
60136
lines.push("DTSTAMP:" + dtstamp);
61137

@@ -122,9 +198,6 @@ export function MojeSkuskyPageContent() {
122198
terminyPrihlasene.forEach((termin) => terminy[termin.termin_key] = termin);
123199
terminy = _.values(terminy);
124200

125-
var [terminy, header] = sortTable(
126-
terminy, MojeSkuskyColumns, query, 'skuskySort');
127-
128201
var message = terminy.length ? null : "Zatiaľ nie sú vypísané žiadne termíny.";
129202

130203
function handleClickICal() {
@@ -134,39 +207,14 @@ export function MojeSkuskyPageContent() {
134207
}
135208

136209
return <React.Fragment>
137-
<table className="table table-condensed table-bordered table-striped table-hover with-buttons-table">
138-
<thead>{header}</thead>
139-
<tbody>
140-
{terminy.map((termin) =>
141-
<tr key={termin.termin_key}>
142-
{!termin.datum_prihlasenia || termin.datum_odhlasenia ?
143-
<td title="Nie ste prihlásení" className="text-center text-negative">{"\u2718"}</td> :
144-
<td title="Ste prihlásení" className="text-center text-positive">{"\u2714"}</td> }
145-
<td><Link href={{ ...query, modal: 'detailPredmetu', modalPredmetKey: termin.predmet_key, modalAkademickyRok: termin.akademicky_rok }}>
146-
{termin.nazov_predmetu}
147-
</Link></td>
148-
<td>{termin.datum}</td>
149-
<td>{termin.cas}</td>
150-
<td>{termin.miestnost}</td>
151-
<td>{termin.hodnotiaci}</td>
152-
<td><Link href={{ ...query, modal: 'zoznamPrihlasenychNaTermin', modalTerminKey: termin.termin_key }}>
153-
{termin.pocet_prihlasenych +
154-
(termin.maximalne_prihlasenych ? "/" + termin.maximalne_prihlasenych : "")}
155-
</Link></td>
156-
<td>{termin.poznamka}</td>
157-
<td>{termin.prihlasovanie}</td>
158-
<td>{termin.odhlasovanie}</td>
159-
<td>
160-
{termin.hodnotenie_terminu ? termin.hodnotenie_terminu :
161-
termin.hodnotenie_predmetu ? termin.hodnotenie_predmetu + ' (nepriradená k termínu)' :
162-
null}
163-
<SkuskyRegisterButton termin={termin}/>
164-
</td>
165-
</tr>
166-
)}
167-
</tbody>
168-
{message && <tfoot><tr><td colSpan={MojeSkuskyColumns.length}>{message}</td></tr></tfoot>}
169-
</table>
210+
<SortableTable
211+
items={terminy}
212+
columns={MojeSkuskyColumns}
213+
queryKey="skuskySort"
214+
withButtons={true}
215+
message={message}
216+
expandedContentOffset={1}
217+
/>
170218
{terminy.length && <button onClick={handleClickICal} className="btn">Stiahnuť ako iCal</button>}
171219
</React.Fragment>;
172220
});

0 commit comments

Comments
 (0)