Giters

GabrielInTheWorld / openslides-client

Webclient for OpenSlides 4+

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

OpenSlides Client

Web client for OpenSlides 4+ which serves as the users main interaction point while using the OpenSlides system. Delivers a responsive web application written in Angular Material, serving web browsers on both desktop systems, smartphones and tablet PCs. The client can be installed as a Progressive Web App (PWA).

Sends requests to the OpenSlides Backend and receives live data from the OpenSlides Autoupdate Service. Interchanges information and data with surrounding OpenSlides clients using the OpenSlides Inter-Client-Communication service.

Demo

This software is not yet ready for productive use. You might want to see OpenSlides instead

Building the client

Using Docker

Get the code:

git clone https://github.com/OpenSlides/openslides-client.git

Change into openslides-client:

cd openslides-client

Build the client using docker:

docker build . -t client

That might take a few minutes. Once done, run the docker image:

docker run -d -p 8080:80 client

You should now have the client up and running in docker using nginx on http://localhost:8080/

If you want to inspect the files you just build:

docker run -it client bash

Using npm

Get the code:

git clone https://github.com/OpenSlides/openslides-client.git

Change into the client:

cd openslides-client/client

Install the dependencies:

npm install

Build the client in production mode:

npm run build

That might take a few minutes. The static files will be build in openslides-client/client/dist.

Developing the client

This is an Angular project. The usage of Angular CLI is highly recommended to create components and services. See https://angular.io/guide/quickstart for details.

Building your developing tool chain in docker

Get the code:

git clone git@github.com:OpenSlides/openslides-client.git (but you will use your own fork of course)

Change into the client:

cd openslides-client

Build the docker image with your tool chain:

docker build . -f Dockerfile.dev -t client-dev

Run the developing docker image:

docker run -it -v ${PWD}/client/src:/app/src -p 4200:4200 --rm client-dev

You should now have an Angular developing server using docker up and running on http://localhost:4201/. The app will automatically reload if you change any of the source files.

To run angular and npm commands, you can access the docker image directly using:

docker run -it client-dev bash

If your editor likes to have a node_modules folder, you might want to copy it from your docker image, or run npm install in the clients "client" directory.

Building your developing tool chain manually

Get the code:

git clone git@github.com:OpenSlides/openslides-client.git (but you will use your own fork of course)

Change into the client:

cd openslides-client/client

Install the npm dependencies:

npm install

Run the angular development server:

npm start

You should now have a native Angular development server up and running on http://localhost:4200/. The app will automatically reload if you change any of the source files.

For contributors

Generally, please work in your own fork, make branches and make a pull request if you want to see your changes in the OpenSlides Client. A pull requests should have exactly one commit. Contributors should add themselves to the AUTHORS file on the OpenSlides main repository.

Commit messages

Write your commit messages like they could appear in a change log.

  • Separate subject from body with a blank line
  • Limit the subject line to 50 characters
  • Capitalize the subject line
  • Do not end the subject line with a period
  • Use the imperative mood in the subject line
  • Wrap the body at 72 characters
  • Use the body to explain what and why vs. how

Code alignment

Please respect the code-style defined in .editorconfig and .pretierrc. Adjust your editor to the .editorconfig to avoid surprises. See https://editorconfig.org/ for details.

Code can be cleaned and aligned automatically using npm run cleanup. This will take care of code alignment, import sorting and quotation marks.

Translation

We are using ngx-translate for translation purposes. The command:

npm run extract

Will extract strings and update elements an with translation functions. Language files can be found in client/src/assets/i18n. The offical translation of OpenSlides can be found in transifex.

Grep the code for | translate and this.translate to find examples.

Code Documentation

Please document new code using JSDoc.

The documentation of the source material can be generated using compodoc by running:

npm run compodoc.

A new web server will be started on http://localhost:8080/. Once running, the documentation will be updated automatically.

You can run it on another port by adding your local port after the command. If no port specified, it will try to use 8080.

See https://compodoc.app/guides/jsdoc-tags.html for details.

Used software

OpenSlides Client uses the following software or parts of them:

About

Webclient for OpenSlides 4+

License:MIT License

Languages

Language:TypeScript 81.2%Language:HTML 13.9%Language:SCSS 3.2%Language:JavaScript 1.7%Language:Makefile 0.0%Language:Dockerfile 0.0%