diff --git a/src/components/Checkbox.js b/src/components/Checkbox.js
new file mode 100644
index 0000000000000000000000000000000000000000..154f61c599d5dd5f9e1af0619355f893ec8b1e91
--- /dev/null
+++ b/src/components/Checkbox.js
@@ -0,0 +1,18 @@
+import m from 'mithril';
+import { Checkbox } from 'polythene-mithril';
+// import { CheckboxCSS } from 'polythene-css';
+
+// CheckboxCSS.addStyle('.my-checkbox', {});
+
+export default class CheckboxComponent {
+ constructor() {
+ this.defaultProps = {
+ // className: 'my-checkbox',
+ // label: 'Unnamed checkbox',
+ };
+ }
+
+ view(vnode) {
+ return m(Checkbox, { ...this.defaultProps, ...vnode.attrs });
+ }
+}
diff --git a/src/components/RadioGroup.js b/src/components/RadioGroup.js
new file mode 100644
index 0000000000000000000000000000000000000000..b3200847308c510f00c4c8683d24c8a78fc4cfb5
--- /dev/null
+++ b/src/components/RadioGroup.js
@@ -0,0 +1,17 @@
+import m from 'mithril';
+import { RadioGroup } from 'polythene-mithril';
+// import { RadioGroupCSS } from 'polythene-css';
+
+// RadioGroupCSS.addStyle('', {})
+
+export default class RadioGroupComponent {
+ constructor() {
+ this.defaultProps = {
+ // className: 'blue-RadioGroup',
+ };
+ }
+
+ view(vnode) {
+ return m(RadioGroup, { ...this.defaultProps, ...vnode.attrs });
+ }
+}
diff --git a/src/components/TextField.js b/src/components/TextField.js
new file mode 100644
index 0000000000000000000000000000000000000000..1ee9108643669b6813c4e21630d69738533ec512
--- /dev/null
+++ b/src/components/TextField.js
@@ -0,0 +1,22 @@
+import m from 'mithril';
+import { TextField } from 'polythene-mithril';
+import { TextFieldCSS } from 'polythene-css';
+
+TextFieldCSS.addStyle('.my-TextField', {});
+
+export default class TextFieldComponent {
+ constructor() {
+ this.defaultProps = {
+ className: 'my-TextField',
+ label: 'Unnamed TextField',
+ };
+ }
+
+ onbeforeupdate(vnode) {
+ this.defaultProps.disabled = vnode.attrs.active === false;
+ }
+
+ view(vnode) {
+ return m(TextField, { ...this.defaultProps, ...vnode.attrs });
+ }
+}
diff --git a/src/components/index.js b/src/components/index.js
index 55e6004f0fbac966cfcd549d6ca4cd0f9b0befe5..b6f3ff8a21da66579e6141b750612a4c4edf24f4 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -1,2 +1,5 @@
export { default as Button } from './Button';
+export { default as Checkbox } from './Checkbox';
+export { default as RadioGroup } from './RadioGroup';
export { default as Tabs } from './Tabs';
+export { default as TextField } from './TextField';
diff --git a/src/views/studydocs/studydocList.js b/src/views/studydocs/studydocList.js
index d65c5b9339d8668d9a60fd0d9d494425e56f3dd8..3fbb64da609d9a57aba0a76af3d9ab5e25081a95 100644
--- a/src/views/studydocs/studydocList.js
+++ b/src/views/studydocs/studydocList.js
@@ -3,81 +3,146 @@ import * as studydocs from '../../models/studydocs';
import { apiUrl } from '../../models/config';
import { isLoggedIn } from '../../models/auth';
import { Error401 } from '../errors';
-import { Button } from '../../components';
+import { Button, Checkbox, TextField } from '../../components';
-const tableHeadings = ['title', 'lecture', 'professor', 'semester', 'author', 'download'];
+const tableHeadings = ['title', 'type'];
export default class studydocList {
constructor(vnode) {
this.vnode = vnode;
+ this.doc = {};
}
static oninit() {
studydocs.load();
this.search = '';
+ this.filter = {
+ department: {},
+ type: {},
+ semester: {},
+ };
+ }
+
+ static selectDocument(doc) {
+ this.doc = doc;
+ }
+
+ static changeFilter(filterKey, filterValue, checked) {
+ this.filter[filterKey][filterValue] = checked;
+ const query = {};
+ Object.keys(this.filter).forEach(key => {
+ let queryValue = '';
+ Object.keys(this.filter[key]).forEach(subKey => {
+ if (this.filter[key][subKey]) {
+ queryValue += `${subKey}|`;
+ }
+ });
+
+ if (queryValue.length > 0) {
+ queryValue = queryValue.substring(0, queryValue.length - 1);
+ query[key] = { $regex: `^(?i).*${queryValue}.*` };
+ }
+ });
+ studydocs.load(query);
}
static view() {
if (!isLoggedIn()) return m(Error401);
return m('div#studydoc-list', [
- m(
- 'form',
- {
- onsubmit: e => {
- e.preventDefault();
- const query = {
- $or: [
- { title: { $regex: `^(?i).*${this.search}.*` } },
- { lecture: { $regex: `^(?i).*${this.search}.*` } },
- { professor: { $regex: `^(?i).*${this.search}.*` } },
- { author: { $regex: `^(?i).*${this.search}.*` } },
- ],
- };
- studydocs.load(query);
- },
- },
- [
- m(
- 'input',
- {
- type: 'text',
- oninput: m.withAttr('value', value => {
- this.search = value;
- }),
- },
- ''
- ),
- m(Button, { label: 'Search' }),
- ]
- ),
- m(Button, {
- label: 'Add new',
- events: { onclick: () => m.route.set('/studydocuments/new') },
- }),
- m('table', [
- m('thead', m('tr', tableHeadings.map(header => m('th', header)))),
+ m('div.filter', [
m(
- 'tbody',
+ 'form',
+ {
+ onsubmit: e => {
+ e.preventDefault();
+ const query = {
+ $or: [
+ { title: { $regex: `^(?i).*${this.search}.*` } },
+ { lecture: { $regex: `^(?i).*${this.search}.*` } },
+ { professor: { $regex: `^(?i).*${this.search}.*` } },
+ { author: { $regex: `^(?i).*${this.search}.*` } },
+ ],
+ };
+ studydocs.load(query);
+ },
+ },
+ [
+ m(
+ TextField,
+ {
+ label: 'Enter search...',
+ onChange: state => {
+ this.search = state.value;
+ },
+ },
+ ''
+ ),
+ m(Button, { label: 'Search' }),
+ ]
+ ),
+ m('div.department-check', [
+ m(Checkbox, {
+ label: 'D-ITET',
+ onChange: state => this.changeFilter('department', 'itet', state.checked),
+ }),
+ m(Checkbox, {
+ label: 'D-MAVT',
+ onChange: state => this.changeFilter('department', 'mavt', state.checked),
+ }),
+ ]),
+ m('div.type-check', [
+ m(Checkbox, {
+ label: 'Zusammenfassung',
+ onChange: state => this.changeFilter('type', 'cheat sheets', state.checked),
+ }),
+ m(Checkbox, {
+ label: 'Alte Prüfungen',
+ onChange: state => this.changeFilter('type', 'exams', state.checked),
+ }),
+ m(Checkbox, {
+ label: 'Unterichts Unterlagen',
+ onChange: state => this.changeFilter('type', 'lecture documents', state.checked),
+ }),
+ m(Checkbox, {
+ label: 'Ãœbungsserien',
+ onChange: state => this.changeFilter('type', 'exercises', state.checked),
+ }),
+ ]),
+
+ m(Button, {
+ label: 'Add new',
+ events: { onclick: () => m.route.set('/studydocuments/new') },
+ }),
+ ]),
+ m('div.content', [
+ m('div.content-grid', [
+ tableHeadings.map(header => m('div.list-header', header)),
studydocs
.getList()
- .map(doc =>
- m('tr', [
- m('td', doc.title),
- m('td', doc.lecture),
- m('td', doc.professor),
- m('td', doc.semester),
- m('td', doc.author),
- m(
- 'td',
- doc.files.map(item =>
- m('a', { href: `${apiUrl}${item.file}`, target: '_blank' }, item.name)
- )
- ),
- ])
- )
- ),
+ .map(doc => [
+ m('div.list-item', { onclick: () => this.selectDocument(doc) }, doc.title),
+ m('div.list-item', { onclick: () => this.selectDocument(doc) }, doc.type),
+ ]),
+ ]),
]),
+ this.doc
+ ? m('div.details', [
+ m('table', [
+ m('tr', this.doc.title),
+ m('tr', this.doc.lecture),
+ m('tr', this.doc.professor),
+ m('tr', this.doc.semester),
+ m('tr', this.doc.author),
+ m(Button, {
+ label: 'Download',
+ events: {
+ onclick: () => window.open(`${apiUrl}${this.doc.files[0].file}`, '_blank'),
+ },
+ }),
+ ]),
+ ])
+ : null,
]);
}
}
diff --git a/src/views/styles/base.less b/src/views/styles/base.less
index 4992aa6a3db41c588281671623eea5e3670de615..51fda3b21c46a46c925e6bc465cb2c56b9e79756 100644
--- a/src/views/styles/base.less
+++ b/src/views/styles/base.less
@@ -9,4 +9,4 @@ div {
max-width: 1280px;
display: block;
margin: 0 auto;
-}
\ No newline at end of file
+}
diff --git a/src/views/styles/listview.less b/src/views/styles/listview.less
index 187933daacf1866f75eb5ee6a154dbda09e54d6e..635e0e4a342defe057fe77eaf4d7c08b98ac5a5f 100644
--- a/src/views/styles/listview.less
+++ b/src/views/styles/listview.less
@@ -1,3 +1,48 @@
.listview {
-
-}
\ No newline at end of file
+ div.filter, div.content {
+ border-right: solid 1px black;
+ }
+ div.filter, div.details {
+ padding: 5px;
+ }
+ display: grid;
+ grid-template-columns: 20% 30% auto;
+ .filter{
+ display: grid;
+ grid-template-rows: auto auto auto auto;
+ align-content: start;
+ grid-gap: 10px;
+ form{
+ display: grid;
+ grid-row: auto auto;
+ border-bottom: solid 1px black;
+ }
+ .department-check, .type-check{
+ display: grid;
+ grid-row: auto auto;
+ border-bottom: solid 1px black;
+ border-top: solid 1px black;
+ }
+ }
+ .content{
+ overflow-y:scroll;
+ height: 500px;
+ div.content-grid {
+ display:grid;
+ grid-template-columns: 70% auto;
+ grid-row-gap: 5px;
+ div{
+ padding: 10px;
+ }
+ div.list-header {
+ border-bottom: solid 1px black;
+ }
+ div.list-item {
+ cursor: pointer
+ }
+ }
+ }
+ .details{
+
+ }
+}
diff --git a/src/views/styles/studydocList.less b/src/views/styles/studydocList.less
index 01638d873c9759a0d608d88bae6e92d0311ad7d9..798b25e893864e30bda9d551d4a8137a208c937f 100644
--- a/src/views/styles/studydocList.less
+++ b/src/views/styles/studydocList.less
@@ -2,6 +2,7 @@
#studydoc-list {
.listview;
-
- background-color: red;
-}
\ No newline at end of file
+ div {
+ border: none;
+ }
+}