added academic info filter menu, tag list per distribusi

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:",

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
+        #distribusies[distribusi.distribusiname] = user.email
-    return render_template("index.html", distribusies=distribusies)
+        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"])

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;
+  }
+}

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

verse/static/css/tags.css

@@ -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;
-}

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(" ");
+}

verse/templates/base.html

@@ -6,7 +6,7 @@
 	<title>Autonomous Practices X Distribusi-Verse</title>
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/style.css')}}">
 	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/selector.css')}}">
-	<!-- <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/tags.css')}}"> -->
+	<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/tags.css')}}">
 	<link rel="shortcut icon" href="{{ url_for('static', filename='icons/favicon.ico') }}">
 	<link rel="apple-touch-icon" sizes="180x180" href="{{ url_for('static', filename='icons/apple-touch-icon.png')}}">
 	<link rel="icon" type="image/png" sizes="32x32" href="{{ url_for('static', filename='icons/favicon-32x32.png')}}">

verse/templates/distribusiworkflow/upload.html

@@ -12,10 +12,12 @@
       </fieldset>
       <fieldset class="required">
         {{ uploadform.academicyear.label }}
+        <div class="selector-style">
         {{ uploadform.academicyear }}
         {% for message in uploadform.academicyear.errors %}
         <div class="error">{{ message }}</div>
         {% endfor %}
+        </div>
       </fieldset>
       <fieldset class="required">
         {{ uploadform.term.label }}
@@ -35,7 +37,7 @@
           {% endfor %}
         </div>
       </fieldset>
-      <fieldset class="required tags">
+      <fieldset class="required">
         {{ uploadform.tags.label }}
         {{ uploadform.tags }}
         {% for message in uploadform.tags.errors %}

verse/templates/filtermenu.html

@@ -0,0 +1,27 @@
+{% block menu %}
+<button onclick="filterSelection('all')" id="removefilter">Remove filter</button>
+<div class="dropdown">
+  <button id="Academicyear" class="dropbtn">Academic year</button>
+   <div class="dropdown-content">
+     {% for year in years %}
+     	<button type="button" name="button" onclick="filterSelection('{{ year[1] }}', 'Academicyear')" >{{ year[1] }}</button>
+     {% endfor %}
+   </div>
+ </div>
+ <div class="dropdown">
+   <button id="Term" class="dropbtn">Term</button>
+    <div class="dropdown-content">
+      {% for term in terms %}
+      	<button type="button" name="button" onclick="filterSelection('{{ term[1] }}', 'Term')" >{{ term[1] }}</button>
+      {% endfor %}
+    </div>
+  </div>
+  <div class="dropdown">
+    <button id="Course" class="dropbtn">Course</button>
+     <div class="dropdown-content">
+       {% for course in courses %}
+         <button type="button" name="button" onclick="filterSelection('{{ course[1] }}', 'Course')" >{{ course[1] }}</button>
+       {% endfor %}
+     </div>
+   </div>
+{% endblock menu %}

verse/templates/index.html

@@ -42,10 +42,18 @@
 	<!-- a div with all the distribusis listed in the distribusiverse	-->
 <div id="distribusiverse" class="maincontent">
 	<h2>List of distribusis</h2>
+	{% include 'filtermenu.html' %}
 	<ul>
-		{% for distribusi in distribusies %}
+		{% for id, distribusi in distribusies.items() %}
-			<li>{{distribusies[distribusi]}}: <a href="stash/{{distribusi}}/index.html">{{distribusi}}</a></li>
+			<li class='distribusi filter {{ distribusi["term"] }} {{ distribusi["year"] }} {{ distribusi["course"] }}'>
+				{{id}}: <a href='stash/{{distribusi["name"]}}/index.html'>{{distribusi["name"]}}</a>
+				{% for tag in distribusi["tags"] %}
+				<span class="tags">{{tag}}</span>
+				{% endfor%}
+			</li>
 		{% endfor%}
 	</ul>
 </div>
+<script src="{{ url_for('static', filename='js/dropdown.js')}}"></script>
+<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/dropdown.css')}}">
 {% endblock %}