Repository: hedyorg/hedy

Issue:
[UI idea] Improve class UI to align with other pages
**Idea incl level**
Currently the UI of the class overview is represented as an un-styled table containing student information. It would be nice to improve this UI to better align with the rest of the website. Corresponding to this it might also be nice to give the teacher some additional information such as: total amount of students, highest level distribution and on the long-run: students that are having trouble to get along and should get extra attention.


**Additional context: Current UI**
![Schermafbeelding 2021-11-03 om 12 02 37](https://user-images.githubusercontent.com/38155424/140049296-cd7bc6d4-cceb-458d-a8e7-d494746543c6.png)

Improve class overview UI
Provide a general summary of your changes in the Title of the PR

**Description**
We improve the class overview UI to better align with the UI of the rest of the website. The table is styled and borders are adjusted to better differentiate between different sections. The header titles are shortened in the *.yaml files to better fit the UI and still contain the same message. The styling of the timestamp is improved through some additional pre-processing on the `isoformat()`.

**Fix for**

This PR fixed #1153 and fixed #1154. Originally, the purpose was to only fix #1154 but as they are very much aligned both are solved at once in this PR.

**How to test**

Make sure you have a teacher's account and navigate to one of your classes and notice the difference UI of the class overview.

**Screenshot**
![Schermafbeelding 2021-11-15 om 13 11 51](https://user-images.githubusercontent.com/38155424/141780034-47de00c5-d9e0-4ec2-94c1-3b5d7f5a7ca1.png)

![Schermafbeelding 2021-11-15 om 13 12 17](https://user-images.githubusercontent.com/38155424/141780057-bdbde5ca-4b35-4a78-9e69-b91e3d566838.png)

**Checklist**

If you're unsure about any of these, don't hesitate to ask. We're here to help!
- [ ] Links to an existing issue or discussion (if not, create an issue first)
- [ ] Describes changes clear in the format above (present tense, no subject)
- [ ] Has a "how to test" section
- [ ] Only one thing is done in this pull request (specifically please try to refrain from mixing textual changes to the yamls from code changes)


[UI idea] Time format of last-login of student is unclear
**Idea incl level**
The current format for the timestamp of the last login of a student is unclear. Being shown to the teacher as `2021-10-13T22:38:09`. It would be nice to adjust this to a more readable format such as `mm-hh dd-mm-yyyy` when it is a day **different** then today. It it's today it might be nice to shown just the time as `mm-hh today`.



Discussion:
I would like to align the UI with the programs overview of a user, with a similar orange border and table structure. See screenshot below for clarification:

![Schermafbeelding 2021-11-04 om 10 29 45](https://user-images.githubusercontent.com/38155424/140290079-daaaa537-79df-42fb-906e-ae60ff363c59.png)
Looks good @TiBiBa!

I was thinking maybe only to change the text underneath the header "Leerling verwijderen", because now it will be a long list of the same text, which might be hard to oversee. What if we change that into "verwijder <username>"?

And maybe we can do the same for programs, instead of a long list of programs, make it "<username>'s programs"



> Looks good @TiBiBa!
> 
> 
> 
> I was thinking maybe only to change the text underneath the header "Leerling verwijderen", because now it will be a long list of the same text, which might be hard to oversee. What if we change that into "verwijder <username>"?
> 
> 
> 
> And maybe we can do the same for programs, instead of a long list of programs, make it "<username>'s programs"
> 
> 
> 
> 
> 
> 

I will take a look! We will have to add some additional values to the *.yaml files, but that shouldn't be a problem.
> > Looks good @TiBiBa!
> > I was thinking maybe only to change the text underneath the header "Leerling verwijderen", because now it will be a long list of the same text, which might be hard to oversee. What if we change that into "verwijder "?
> > And maybe we can do the same for programs, instead of a long list of programs, make it "'s programs"
> 
> I will take a look! We will have to add some additional values to the *.yaml files, but that shouldn't be a problem.

Yeah that should not be a problem, we already have the headers so it is a matter of adding some words from there.
I was a bit struggling with the next texts, but made some fixes with the last commit!
Looks perfect for the programs, but for the student, I'd also like the name (so "Hedy verwijderen"), is that possible? (I guess it is not hard since we have the name for the other column)

![image](https://user-images.githubusercontent.com/1003685/142168062-623dc0e5-6608-401e-b7be-1d0b9ec4a5e5.png)

> Looks perfect for the programs, but for the student, I'd also like the name (so "Hedy verwijderen"), is that possible? (I guess it is not hard since we have the name for the other column)
> 
> ![image](https://user-images.githubusercontent.com/1003685/142168062-623dc0e5-6608-401e-b7be-1d0b9ec4a5e5.png)

Yes that should be easy, will make a fix right away!
Looks good, we just have a conflict on class-overview that I do not know how to resolve. If you fix it, this will auto-merge.
I just fixed the merge conflict, but I does not seem to auto-merge because a review is still missing
@TiBiBa 

It seems this PR suffers from the same issues as the one with duplicate class names that is overwrites grammar and python changes, can you cherry pick the relevant things in this (or a fresh) PR?
This seems to be the offender that needs to be removed: https://github.com/Felienne/hedy/pull/1234/commits/10c2082085825e80ebea8fe885f4c97e32518044
> @TiBiBa
> 
> It seems this PR suffers from the same issues as the one with duplicate class names that is overwrites grammar and python changes, can you cherry pick the relevant things in this (or a fresh) PR?

I will make a new PR with a new branch to be sure that it all works well.


Resolving patch:
diff --git a/utils.py b/utils.py
--- a/utils.py
+++ b/utils.py
@@ -181,6 +181,13 @@ def mstoisostring(date):
     print('dt', dt)
     return datetime.datetime.fromtimestamp(int(str(date)[:-3])).isoformat()
 
+def datetotimeordate(date):
+    datestamp = date.split("T")[0]
+    if (datestamp == datetime.date.fromtimestamp(time.time()).isoformat()):
+        return date.split("T")[1]
+    else:
+        return date.replace("T", " ")
+
 # https://stackoverflow.com/a/2257449
 def random_id_generator(size=6, chars=string.ascii_uppercase + string.ascii_lowercase + string.digits):
     return ''.join(random.choice(chars) for _ in range(size))
diff --git a/website/teacher.py b/website/teacher.py
--- a/website/teacher.py
+++ b/website/teacher.py
@@ -41,7 +41,7 @@ def get_class (user, class_id):
                 latest_shared['link'] = os.getenv ('BASE_URL') + f"/hedy/{latest_shared['id']}/view"
             else:
                 latest_shared = None
-            students.append ({'username': student_username, 'last_login': utils.mstoisostring (student ['last_login']), 'programs': len (programs), 'highest_level': highest_level, 'latest_shared': latest_shared})
+            students.append ({'username': student_username, 'last_login': utils.datetotimeordate (utils.mstoisostring (student ['last_login'])), 'programs': len (programs), 'highest_level': highest_level, 'latest_shared': latest_shared})
 
         if utils.is_testing_request (request):
             return jsonify ({'students': students, 'link': Class ['link'], 'name': Class ['name'], 'id': Class ['id']})


Test patch: