Skip to content

WTI‐UI Code Debugging

Jump to bottom
John Clevenger edited this page Dec 13, 2024 · 8 revisions

Overview

THIS IS A TEMPLATE, NOT THE REAL DATA FOR THIS PAGE

As described at Web Access and Web Team Interface Implementation, PC² supports browser access to a PC² contest through a component called the Web Team Interface (WTI). The WTI consists of two main elements: the WTI Server and the WTI Client. The WTI Server is implemented by a PC² project called WTI-API (see WTI API Project Implementation Details), while the WTI Client is implemented by the WTI-UI project.

An Angular application is comprised of several parts:

  • A set Angular modules, each of which is identified by the Angular @NgModule annotation.
  • A set of Angular components, each of which is identified by the Angular @Component annotation.
  • A set of HTML templates, each of which defines the overall HTML structure for one portion of the HTML pages generated by the application.
  • Optional additional information such as style sheets which can be used to control the appearance of HTML pages.

The Angular modules implementing WTI-UI are contained in the folder src/app at the root of the PC² WTI-UI project. The topmost level of the WTI-UI Angular application is an Angular module named AppModule, which is written in TypeScript and contained in file src/app/app.module.ts.

Each module folder (and subfolder) also contains a .html file which acts as the HTML template for the elements defined by that module, as well as a .scss (Sass Cascading Style Sheet) file which provides style sheet formatting for the corresponding HTML page.

Core

... For example, CoreModule declares a providers list which includes

{ provide: ITeamsService, useFactory: TeamsServiceFactory, deps: [HttpClient] }

which says that the ITeamsService is provided (made available to other Angular modules) via the TeamsServiceFactory, which in turn "depends on" Angular module "HttpClient".

Core: Abstract Services

Folder src/app/modules/core/abstract-services contains TypeScript files defining each of the abstract services available to WTI-UI modules: ContestService, TeamsService, and WebsocketService. Each TypeScript module in abstract-services exports a corresponding abstract class (similar to an interface definition in Java; TypeScript does not directly support "interface definitions") which defines the methods which must be implemented by the corresponding service implementation. The exported classes are all named starting with an "I" (following the Java convention for naming interface definitions).

Core: Services

Note also that there exists a special service named AuthService, which is defined in a separate folder (see below).

Core: Models

The WTI-UI project uses these classes to represent model data throughout the WTI-UI implementation.

AppModule

In addition to importing the various Angular modules mentioned above, AppModule imports several general-purpose WTI-UI Angular modules, including:

  • AppRoutingModule, which handles connections between each of the AppModule main page components and the Angular modules which implement them.
  • SharedModule, which collects together a variety of components (such as web page headers, footers, and pop-up dialogs) which are shared among multiple pages in the browser interface.

See Also

PC2 Logo

Clone this wiki locally