Skip to main content
Version: 2.1.0

Frontend

Pre-requisites

The following section assumes you have installed all the tools required for web development from our tools section.

Before you move on, it is also mandatory that you read through the key technology list in our web technologies section and you understand the justification for each one, especially if you're not familiar with the specific technology.

info

It is presumed that you already have a Web Base prepared and ready for you install modlets, otherwise, please go to the Web Framework quickstart section to initialize your Web Base.

It is also presumed that you are already familiar with running a local development environment, otherwise, please go to the Local Dev Environment to prepare your machine for local development. Using dev-containers with RNR module enabled is recommended.

Installation Guide

1. Installing RNR package

The internal CLI tool built by AOH will be used to install the rnr package. If you are using one of the latest versions of the Web base, the CLI tool is already part of the web base, and you can verify by checking if your package.json has the following:

"@mssfoobar/cli": "^1.0.3"
note

Do note that your CLI version may differ with the one above, as the one above is the latest version as of the time of writing this documentation.

warning

The CLI tool only works if you did not remove the aoh folder within the src/lib folder in the original web base. This is because it will install the rnr package and duplicate them into the src/lib/aoh folder.

Run the following CLI command in the terminal inside your web directory.

npx cli install @mssfoobar/rnr-web

You will be prompted to enter the path to your root folder, although the tool will attempt to auto-generate that path for you. Do check if it is accurate. If not, please enter the correct path to your root folder.

Afterwards, simply click enter, and the tool will start to install the rnr package.

Once completed, you should see new files being generated in the src/lib/aoh/rnr folder, as well as the routes/(private)/aoh/rnr folder.

├── src/
│ └── lib/
│ │ └── aoh/
│ │ ├── core/
│ │ ... └── rnr/
│ │ ├── components/
│ │ ├── interfaces/
│ │ ├── stores/
│ │ └── constant.ts

2. Install devDependencies

Add these dependencies below into the devDependencies object in your package.json, and save the file.

"svelte-sonner": "^0.3.28",
"@iconify-json/lucide": "^1.2.26",

3. Install dependencies

Add the dependencies below into the dependencies object in your package.json, and save the file. Afterwards, run npm i or npm install to install.

"@mssfoobar/sse-client": "^1.1.1",
"iconify-icon": "^2.3.0",

4. Configuration

In the tailwind.config.ts file, add "material-symbols in the addIconSelectors plugin:

plugins: [addIconSelectors(["mdi", "mdi-light", "lucide"]),...],

Usage

Go to the +layout.svelte file found in the (private) folder and import the component.

src/routes/(private)/+layout.svelte
import { PlaybackContainer } from "$lib/aoh/rnr/components/PlaybackContainer/index.js";

Include the following code block below the initializeMenuStore(data); line:

src/routes/(private)/+layout.svelte
const baseSehUrl = env.PUBLIC_RTUS_SEH_URL;
const rnrEndpoint = env.PUBLIC_RNR_ENDPOINT;
const topicName = env.PUBLIC_TOPIC_NAME;
const systemTimeTopic = env.PUBLIC_SYSTEM_TIME_TOPIC_NAME;
const systemTimeTenantId = env.PUBLIC_SYSTEM_TIME_TENANT_ID;

Add the <PlaybackContainer> component.

src/routes/(private)/+layout.svelte
<AuthProvider claims={...}>
...
</AuthProvider>

<PlaybackContainer
{topicName}
{rnrEndpoint}
{baseSehUrl}
{systemTimeTopic}
{systemTimeTenantId}
tenantId={tenant?.tenant_id}
/>

Alternatively, if you need the page to forcibly re-mount when the session loads, wrap the <PlaybackContainer> component outside the <AuthProvider> component.

src/routes/(private)/+layout.svelte
<PlaybackContainer
{topicName}
{rnrEndpoint}
{baseSehUrl}
{systemTimeTopic}
{systemTimeTenantId}
tenantId={tenant?.tenant_id}
/>
<AuthProvider claims={...}>
...
</AuthProvider>
</PlaybackContainer>