From 532c9c15fdff22a7d64e110fea0d34b5fcb7de93 Mon Sep 17 00:00:00 2001 From: crunk Date: Sun, 6 Mar 2022 23:15:38 +0100 Subject: [PATCH] added academic info filter menu, tag list per distribusi --- verse/forms/uploadform.py | 14 +++- verse/start.py | 25 ++++++- verse/static/css/dropdown.css | 69 +++++++++++++++++ verse/static/css/style.css | 36 ++++++++- verse/static/css/tags.css | 74 ------------------- verse/static/js/dropdown.js | 54 ++++++++++++++ verse/templates/base.html | 2 +- .../templates/distribusiworkflow/upload.html | 4 +- verse/templates/filtermenu.html | 27 +++++++ verse/templates/index.html | 12 ++- 10 files changed, 233 insertions(+), 84 deletions(-) create mode 100644 verse/static/css/dropdown.css delete mode 100644 verse/static/css/tags.css create mode 100644 verse/static/js/dropdown.js create mode 100644 verse/templates/filtermenu.html diff --git a/verse/forms/uploadform.py b/verse/forms/uploadform.py index 1bc89a6..62980dd 100644 --- a/verse/forms/uploadform.py +++ b/verse/forms/uploadform.py @@ -26,9 +26,19 @@ class UploadForm(FlaskForm): "Name of your website:", validators=[validators.InputRequired(), Length(2, 100), distribusiname], ) - academicyear = StringField( + academicyear = SelectField( "Academic year:", - validators=[validators.InputRequired(), Length(9, 10)], + validate_choice=True, + coerce=str, + choices=[ + (u'2021-2022', u'2021-2022'), + (u'2022-2023', u'2022-2023'), + (u'2023-2024', u'2023-2024'), + (u'2024-2025', u'2024-2025'), + (u'2020-2021', u'past: 2020-2021'), + ], + option_widget=None, + validators=[DataRequired()] ) term = SelectField( "Term:", diff --git a/verse/start.py b/verse/start.py index 1430bf6..18ed71c 100644 --- a/verse/start.py +++ b/verse/start.py @@ -65,14 +65,35 @@ def session_handler(): @APP.route("/") def index(): ResetUserState() + uploadform = UploadForm() distribusis = Distribusis.query.filter( Distribusis.distribusiname.isnot(None) ).all() distribusies = {} for distribusi in distribusis: user = User.query.filter_by(id=distribusi.userid).first() - distribusies[distribusi.distribusiname] = user.email - return render_template("index.html", distribusies=distribusies) + #distribusies[distribusi.distribusiname] = user.email + distribusies[user.email] = distribusi + singledistribusi = { + "name": distribusi.distribusiname, + "term": distribusi.term, + "course": distribusi.course, + "year": distribusi.year, + "tags": distribusi.tags.split(','), + } + distribusies[user.email] = singledistribusi + years = uploadform.academicyear.choices + terms = uploadform.term.choices + courses = uploadform.course.choices + print(type(courses[0])) + template = render_template( + "index.html", + distribusies=distribusies, + years=years, + terms=terms, + courses=courses, + ) + return template @APP.route("/distribusi", methods=["GET", "POST"]) diff --git a/verse/static/css/dropdown.css b/verse/static/css/dropdown.css new file mode 100644 index 0000000..5111481 --- /dev/null +++ b/verse/static/css/dropdown.css @@ -0,0 +1,69 @@ +/* Dropdown Button */ +/* for sorting on Academicyear, Term, Course +*/ +button { + background-color: #E0B0FF; + text-decoration: none; + border: none; +} +.filter { + display: none; +} + +.activebtn { + background-color: #62b264; +} + +.show { + display: block; +} +.dropdown { + position: relative; + display: inline-block; +} + +/* Dropdown Content (Hidden by Default) */ +.dropdown-content { + display: none; + position: absolute; + background-color: #E0B0FF; + min-width: 120px; + border: 2px solid; + z-index: 1; + border-style: outset; +} + +/* Links inside the dropdown */ +.dropdown-content button { + color: black; + padding: 6px; + border: none; + min-width: inherit; + text-align: left; + text-decoration: none; + display: block; +} +.dropbtn { + margin-top: 1em; +} +/* Change color of dropdown links on hover */ +.dropdown-content button:hover {background-color: #62b264;} + + +/* Show the dropdown menu on hover */ +.dropdown:hover .dropdown-content {display: block;} + +/* Change the background color of the dropdown button when the dropdown content is shown */ +.dropdown:hover .dropbtn {background-color: #62b264;} + +@media only screen and (min-device-width: 320px) and (max-device-width: 480px) { + .dropdown-content button { + font-size: 0.7em; + } + .container > button { + font-size: 0.7em; + } + .dropdown > button { + font-size: 0.7em; + } +} diff --git a/verse/static/css/style.css b/verse/static/css/style.css index 2cbefec..2b2d43d 100644 --- a/verse/static/css/style.css +++ b/verse/static/css/style.css @@ -1,7 +1,7 @@ body { font-family: monospace; - background-color: #383C4A; + background-color: #272a33; color:#E0B0FF; word-wrap: break-word; } @@ -10,7 +10,7 @@ div#login{ width: 30%; margin-left: auto; margin-right: auto; - background-color:#383C4A; + background-color:#272a33; text-decoration: none; } @@ -53,6 +53,10 @@ div#upload form { margin:0 auto; } +#distribusiverse { + margin-bottom: 11em; +} + div#buttons{ position: fixed; top: 0.5em; @@ -164,6 +168,34 @@ div.maincontent{ padding: 0.5em; border-style: outset; } + +.tags{ + background-color: #000; + color: #fff; + display: inline-block; + padding-left: 4px; + padding-right: 4px; + text-align: center; + margin: 1px; +} + +.tooltip .tooltiptext { + visibility: hidden; + width: 120px; + background-color: black; + color: #fff; + text-align: center; + border-radius: 1px; + padding: 5px 0; + + /* Position the tooltip */ + position: absolute; + z-index: 1; +} + +.tooltip:hover .tooltiptext { + visibility: visible; +} /* Project colors so far. light diff --git a/verse/static/css/tags.css b/verse/static/css/tags.css deleted file mode 100644 index aad0e32..0000000 --- a/verse/static/css/tags.css +++ /dev/null @@ -1,74 +0,0 @@ -::selection{ - color: #fff; - background: #5372F0; -} -.wrapper{ - width: 496px; - background: #fff; - padding: 18px 25px 20px; - box-shadow: 0 0 30px rgba(0,0,0,0.06); -} -.wrapper :where(.title, li, li i, .details){ - display: flex; - align-items: center; -} -.title img{ - max-width: 21px; -} -.title h2{ - font-size: 21px; - font-weight: 600; - margin-left: 8px; -} -.wrapper .content{ - margin: 10px 0; -} -.tags p{ - font-size: 15px; -} -.tags ul{ - display: flex; - flex-wrap: wrap; - padding: 7px; - margin: 12px 0; - border-radius: 5px; - border: 1px solid #a6a6a6; -} -.tags ul li{ - color: #333; - margin: 4px 3px; - list-style: none; - background: #F2F2F2; - padding: 5px 8px 5px 10px; - border: 1px solid #e3e1e1; -} -.tags ul li i{ - height: 20px; - width: 20px; - color: #808080; - margin-left: 8px; - font-size: 12px; - cursor: pointer; - border-radius: 50%; - background: #dfdfdf; - justify-content: center; -} -.tags ul input{ - flex: 1; - padding: 5px; - border: none; - outline: none; - font-size: 16px; -} -.wrapper .details{ - justify-content: space-between; -} -.details button{ - border: none; - background: #E0B0FF; - text-decoration: none; - margin: 1px; -} -.details button:hover{ - background: #2c52ed; -} diff --git a/verse/static/js/dropdown.js b/verse/static/js/dropdown.js new file mode 100644 index 0000000..6120d18 --- /dev/null +++ b/verse/static/js/dropdown.js @@ -0,0 +1,54 @@ +filterSelection("all", "None"); +function filterSelection(c, id) { + resetDropDownButtons(); + var i; + var button = document.getElementById(id); + if(button){ + button.innerText = c; + addClass(button, "activebtn"); + } + var alldistribusis = document.getElementsByClassName("filter"); + if (c == "all") { + for (i = 0; i < alldistribusis.length; i++) { + addClass(alldistribusis[i], "show"); + } + } + else { + for (i = 0; i < alldistribusis.length; i++) { + removeClass(alldistribusis[i], "show"); + if (alldistribusis[i].className.indexOf(c) > -1) { + addClass(alldistribusis[i], "show"); + } + } + } +} + +function resetDropDownButtons(){ + document.getElementById("Academicyear").innerText = "Academic year"; + document.getElementById("Term").innerText = "Term"; + document.getElementById("Course").innerText = "Course"; + allactivebuttons = document.getElementsByClassName("activebtn"); + for(var i = 0;allactivebuttons.length; i++) { + removeClass(allactivebuttons[i], "activebtn"); + } +} +function addClass(element, name) { + var i, arr1, arr2; + arr1 = element.className.split(" "); + arr2 = name.split(" "); + for (i = 0; i < arr2.length; i++) { + if (arr1.indexOf(arr2[i]) == -1) {element.className += " " + arr2[i];} + } +} + +function removeClass(element, name) { + var i, arr1, arr2; + arr1 = element.className.split(" "); + arr2 = name.split(" "); + for (i = 0; i < arr2.length; i++) { + while (arr1.indexOf(arr2[i]) > -1) { + arr1.splice(arr1.indexOf(arr2[i]), 1); + } + } + element.className = arr1.join(" "); +} diff --git a/verse/templates/base.html b/verse/templates/base.html index 84333b8..365d70b 100644 --- a/verse/templates/base.html +++ b/verse/templates/base.html @@ -6,7 +6,7 @@ Autonomous Practices X Distribusi-Verse - + diff --git a/verse/templates/distribusiworkflow/upload.html b/verse/templates/distribusiworkflow/upload.html index 29aae72..bc1c295 100644 --- a/verse/templates/distribusiworkflow/upload.html +++ b/verse/templates/distribusiworkflow/upload.html @@ -12,10 +12,12 @@
{{ uploadform.academicyear.label }} +
{{ uploadform.academicyear }} {% for message in uploadform.academicyear.errors %}
{{ message }}
{% endfor %} +
{{ uploadform.term.label }} @@ -35,7 +37,7 @@ {% endfor %}
-
+
{{ uploadform.tags.label }} {{ uploadform.tags }} {% for message in uploadform.tags.errors %} diff --git a/verse/templates/filtermenu.html b/verse/templates/filtermenu.html new file mode 100644 index 0000000..d968636 --- /dev/null +++ b/verse/templates/filtermenu.html @@ -0,0 +1,27 @@ +{% block menu %} + +
+ +
+ {% for year in years %} + + {% endfor %} +
+
+
+ +
+ {% for term in terms %} + + {% endfor %} +
+
+
+ +
+ {% for course in courses %} + + {% endfor %} +
+
+{% endblock menu %} diff --git a/verse/templates/index.html b/verse/templates/index.html index 8015254..04dac68 100644 --- a/verse/templates/index.html +++ b/verse/templates/index.html @@ -42,10 +42,18 @@

List of distribusis

+ {% include 'filtermenu.html' %}
    - {% for distribusi in distribusies %} -
  • {{distribusies[distribusi]}}: {{distribusi}}
    • + {% for id, distribusi in distribusies.items() %} +
  • + {{id}}: {{distribusi["name"]}} + {% for tag in distribusi["tags"] %} + {{tag}} + {% endfor%} +
    • {% endfor%}
+ + {% endblock %}