areafiftylan / lancie-admin

AreaFiftyLAN

This site is still under construction. This is not in use yet :(.

Development

Dependencies

To start development, you need some dependencies to get it all up and running. Most actual dependencies are run with Docker, so it should be fairly simple to run. The dependencies are:

• NodeJS (recent version, 18.x+).
• Yarn 1.x (higher is tested and works, but 1.x is recommended)..
• Docker.
• Docker Compose.

It's advised to develop using a UNIX based operating system (Linux or macOS mostly), as Windows can sometimes give weird issues. You are welcome to still use Windows, but know that only limited support can be given.

Starting Up

Development is done locally, with the services it depends on running with Docker. To start the dependencies, a Docker compose file is provided. This can be start with:

docker-compose up

This exposes several services:

• The Postgres database to connect to, accesible at the default port 5432.
• An Adminer instance, to explore the database, accesible at localhost:8080.
• Mailcatcher SMTP server, at port 1025.
• Mailcatcher to view the outgoing email at localhost:8081.

Now to start the actual application, install the dependencies first:

yarn install

The database has to be set up separately. Fortunally it's also very simple, to create the structure you can run the following command:

yarn migrate-dev

Now to seed the database with some sample data found in server/prisma/seed, you can run the following command.

yarn seed

Now you can start the server and visit it on localhost:3000:

yarn dev

Resetting

It's possible that the database enters an invalid state because of an programming error. You can either fix this manual at the database interface, but it's easier to just reset.

This can be done by stopping the development server, running the following command, and start the server again:

yarn migrate-reset

You should now be able to start the server again with a fresh database. The seeding script is also run for you.

Design

The design can be found here. With this link you can only view the design. If you also want to apply changes ask Marit for permission.

lancie-admin's Issues

Produce positive/negative sound when checking in

Produce a positive/negative sound when checking in for meals (like breakfast) so the participants can hear if they can pass.

Alignment of content is only fixed after a resize

Show date of birth when registering

The date of birth should be shown when registering to check if the filled in value matches with the date on the ID.

The proportions of the bars are a bit weird. 195/206 while the bar is only half full.

Add web tab

TODO

• Committee
• Sponsors
• Tournaments
• FAQ

Add more information about ticket to check in

When a user checks in with multiple tickets, it should be possible to choose the ticket he wants to check in with.

Change local storage element to resemble the frontend

The admin and frontend local storage are now incompatible, pasting the content from local storage would be easier if the format is the same.

Progress for check-in and consumption

As requested by the crew:

• Show what percentage of users are already checked in
• Show what percentage of users already consumed a certain consumption

Additionally, have a checkbox that hides users from the table that already checked in/ consumed a consumption.

Add button to delete all subscriptions

The endpoint added in AreaFiftyLAN/lancie-api#503 needs an implementation. Maybe needs an additional confirmation dialog before actually making the request as this deletes valuable data.

Navigation Bar grey bar bug

When navigating to a page in the navigation bar, and then clicking the text again (exactly the text, not the bar) the grey bar dissappears.

Logging endpoint

The API has an endpoint for logs at /api/v1/management/logfile.
Each line contains a json object (it's not an array!) with a log statement. For quick reviews, admin should have a page with the last couple of hours of log files.

Parsing the json would be nice, but MVP is just a call to the endpoint with some Http Range headers

Show a line graph somewhere of the tickets sold per day

Add possibility to send emails to the interested gamers from the website

Maybe this is useful?

Implement CRUD

This grid or table will contain the data loaded in from the API, and can edit and delete that data.

404 fallback is broken

Show user's birth date at the rfid assign page for legal confirmation

Right now the users birth date is not visible from the rfid assign page. This page will be used to check users into the event. This is also when the id check happens and thus it would be useful to cross check the users birth date with their that on their id during this process.

Thumbs up doesn't dissapear if consumption is checked again

nginx.conf has to be expanded

We now have very basic usage of the config, it can be expanded a lot:

• Caching
• Correct 404 redirect

These resources can be used to implement the functionalities we want.

Implement dashboard

This dashboard will contain graphs, and up to date numbers about various amounts.

Build succeeding even though fragments are missing

Logo is missing

I don't know why, but the logo has disappeared from the page.

Display thumbs up to a second screen

Project the thumbs up when checked in for meals (like breakfast) on a second screen so the participants can see if they can pass.

Pickup-service visualization & route planning

Tickets that have the Pickup service also have an address. This can be used for a visualization in a Google Maps element. Possibly even a route can be planned, ready for export.

Reload loop in progress page

In Firefox, the reload bug is there again on the progress page. Caused by a wrong relative link, it keeps loading /src/src/src..../src/

Implement login

Allow only admins to log in and view/change data

Split tickets sold per type in ch/non-ch

Filter out functionality that is not for the user security level

Not all users have access to everything in the adminpanel, we can use css selectors to filter out content that the user is not supposed to see. The api will deny all requests that are incorrect, so we only have to think about not showing the buttons/content. The css selectors that would be suitable for this can be found here.

Unexpected token '<' in Safari

Due to an the syntax error Unexpected token '<' the admin panel will not load in Safari

Overview of all consumptions made

Elements to look at

Here's a list of elements you probably want to use in lancie-admin:

• https://elements.polymer-project.org/elements/google-chart
• https://elements.polymer-project.org/elements/google-analytics
• https://vaadin.com/elements/-/element/vaadin-grid

Add download button for email list

Add button to download a enter-delimited .txt file containing one of the following:

• Email addresses of all users
• Email addresses of all users that purchased a ticket for this year
• Email addresses of all users currently selected

This would simplify the emailing process when we don't want to use the sendCustomMailToCollection() endpoint in the API.

Add a possibility to upload sponsor logo's easily and display them on the website

Readme does not include a quickstart dev guide

Currently the readme tells the user to run polymer serve for viewing the front end locally, but the front-end requires a login. This login will be routed through a relative api path. This path will only work when you run the project with yarn run dev which proxies the api path to the api, which is also required to be able to run this.