Redesign of / page

[MatthiasReumann]

Motivation and Context

Redesign and reimplement the start page using best practices of Alpine, Tailwind, and TypeScript.

Description

• New UI
• 99% REST. Little to none go-templates (no more x-data="json.stringify({{data}})"!)
• TUM-Live CSS classes
• Proposing updated TypeScript folder structure:
  • views/: Whole pages (used only once)
  • components/: Single UI Elements (used more than once, e.g. a header module)
  • utilities/: Reusable Classes, Functions, Enums, etc. that can be included in components and views
  • api/: API-Wrappers, DTOs, objects
  • entry/: Combination of views and components to bundle functionality as close as possible
• Add tools/pathprovider/pathprovider.go to reduce code duplication and a place to put present and future file-path stuff.
  • Partially addresses Eliminate hardcoded file paths #539

Help needed 🙋‍♂️

There is probably a better way to built multiple css files than my current approach. I simply appended another npx command to the existing one.

webpack --config webpack.dev.js & npx tailwindcss build -i assets/css/main.css -o ./assets/css-dist/main.css --watch & npx tailwindcss build -i assets/css/home.css -o ./assets/css-dist/home.css --watch

❓Are there any changes needed in the production config (webpack)?

Potential follow-ups

I propose the following Follow-Ups in order to decrease the size of this PR:

• Custom thumbnail upload
• Move API objects (Bookmarks, VideoSections) to separate file in api/.
  • Currently they reside in data-store/
  • See: api/ for examples

Steps for Testing

Head to / and click on everything you can in all the browsers you have installed.

[CommanderStorm]

I think this could be a better fallback (with importing fmt):

Suggested change

	return "#";
	return fmt.Sprintf("https://nav.tum.de/search?q=%s", this.Name);

[joschahenningsen]

IMO we should add a new field to the lecture_halls table, e.g. string ExternalLink instead of mapping them in the codebase.

[MatthiasReumann]

Agreed. Should we add the column in this PR or in a follow-up?

[MatthiasReumann]

Did it in this one. Ids don't necessarily have to be the same, I guess.

Here's the SQL insert statement:

update lecture_halls
set external_url = 'https://nav.tum.de/room/5602.EG.001'
where id = 1;
update lecture_halls
set external_url = 'https://nav.tum.de/room/5604.EG.011'
where id = 2;
update lecture_halls
set external_url = 'https://nav.tum.de/room/5606.EG.011'
where id = 3;
update lecture_halls
set external_url = 'https://nav.tum.de/room/5620.01.101'
where id = 4;
update lecture_halls
set external_url = 'https://nav.tum.de/room/5620.01.102'
where id = 5;
update lecture_halls
set external_url = 'https://nav.tum.de/room/5608.EG.038'
where id = 6;
update lecture_halls
set external_url = 'https://nav.tum.de/room/5613.EG.009A'
where id = 7;
update lecture_halls
set external_url = 'https://nav.tum.de/room/5607.EG.014'
where id = 9;
update lecture_halls
set external_url = 'https://nav.tum.de/room/5510.EG.001'
where id = 10;
update lecture_halls
set external_url = 'https://nav.tum.de/room/5510.02.001'
where id = 11;

[CommanderStorm]

Some nitpicks:

• when no semeser is selected, this part of the UI looks a bit broken, I think selecting the most recent one by default is a save bet:
  
• About, Data Privacy, Imprint and We ❤️ OpenSource lead to an empty page
• These scroll bars are kind of not necessary, but no user will notice given that tum.live has a lot more content in prod
  

Thanks for the feedback! 💙

1 and 2 are test server related. The about, imprint, data privacy pages aren't stored in the database. The current semester is actually automatically selected if no Year/Term is specified, however, SS23 isn't in the database either 😅

The scroll bars are unfortunately only an issue on certain operating systems. For example, on MacOS the start page looks like:

I will style the scroll bar to be invisible. Thanks for the catch!

[CommanderStorm]

I like this change (I am not qualified, this is why this is ony a comment not an aproval)
I have added some inline comments, but nothing major

[MatthiasReumann]

Update 24.4.2023

• Server Notifications
• Pagination for recent VODs to reduce massive one time server load (e.g. ~100 thumbnails) and improve responsiveness
• Add ExternalURL to lecture hall model

[joschahenningsen]

Amazing, looking forward to seeing this on prod :)