Configuration Page¶

The Configuration page allows users to configure dashboards, services, types, and elements for alarms. Additionally, it provides tools to manage devices and filter configurations (regions, locations, and room names) for the GraphAPI service.

Overview¶

This page is divided into three main tabs:

Alarm Configuration: Configure dashboards, services, types, and elements for alarms.
Device List (GraphAPI only): Modify device information, including region, location, and room name.
Filter Configuration (GraphAPI only): Manage regions, locations, and room names.

HTML Structure¶

<template>
  <div>
    <!-- Page Title -->
    <h2>Configuration</h2>

    <!-- Tabs -->
    <b-tabs>
      <!-- Alarm Configuration Tab -->
      <b-tab title="Alarm Configuration">
        <!-- Add Configuration Button -->
        <b-button>Add Configuration</b-button>
        <!-- Configuration Table -->
        <b-table :items="alarmConfigList" 
        :fields="['dashboard', 'service', 'type', 'elements']">
          <template v-slot:cell(dashboard)="data">
            <span>{{ data.item.dashboard }}</span>
          </template>
          <template v-slot:cell(service)="data">
            <span>{{ data.item.service }}</span>
          </template>
          <template v-slot:cell(type)="data">
            <span>{{ data.item.type }}</span>
          </template>
          <template v-slot:cell(elements)="data">
            <b-badge v-for="element in data.item.elements"></b-badge>
          </template>
        </b-table>
      </b-tab>

      <!-- Device List Tab (GraphAPI only) -->
      <b-tab title="Device List">

        <!-- Device Filters -->
        <!-- Device Name -->
        <b-input v-model="deviceFilters.deviceName"></b-input>

        <!-- Device Type -->
        <b-select v-model="deviceFilters.selectedType" 
        :options="deviceFilters.types"></b-select>

        <!-- Device Region -->
        <b-select v-model="deviceFilters.selectedRegion" 
        :options="deviceFilters.filterConfig"></b-select>

        <!-- Device Location -->
        <b-select v-model="deviceFilters.selectedLocation" 
        :options="deviceFilters.locationNames"></b-select>

        <!-- Device Room Name -->
        <b-select v-model="deviceFilters.selectedRoom" 
        :options="deviceFilters.roomNames"></b-select>

        <!-- Device Table -->
        <b-table :items="deviceListFiltered" 
        :fields="['deviceName', 'deviceType', 'region', 'location', 'room']">
          <template v-slot:cell(deviceName)="data">
            <span>{{ data.item.deviceName }}</span>
          </template>
          <template v-slot:cell(deviceType)="data">
            <span>{{ data.item.deviceType }}</span>
          </template>
          <template v-slot:cell(region)="data">
            <span>{{ data.item.filters.regionName }}</span>
          </template>
          <template v-slot:cell(location)="data">
            <span>{{ data.item.filters.locationName }}</span>
          </template>
          <template v-slot:cell(room)="data">
            <span>{{ data.item.filters.roomName }}</span>
          </template>
        </b-table>
      </b-tab>

      <!-- Filter Configuration Tab (GraphAPI only) -->
      <b-tab title="Filter Configuration">

        <!-- Region List -->
        <b-list-group-item v-for="region in filterConfig.regionList">
            {{ region.regionName }}
          </b-list-group-item>

        <!-- Location List -->
        <b-list-group-item v-for="location in filterConfig.locationList">
            {{ location.locationName }}
          </b-list-group-item>

        <!-- Room List -->
        <b-list-group-item v-for="room in filterConfig.roomList">
            {{ room.roomName }}
          </b-list-group-item>
      </b-tab>
    </b-tabs>

    <!-- Modals -->
    <b-modal id="set-parameter-modal">

      <!-- Dashboard Select -->
      <b-select v-model="formControl.newDashboard" :options="formControl.dashboardList"></b-select>

      <!-- Service Select -->
      <b-select v-model="formControl.newService" :options="formControl.serviceList"></b-select>

      <!-- Type Select -->
      <b-select v-model="formControl.newType" :options="formControl.typeList"></b-select>

      <!-- Elements Table -->
      <b-table :items="formControl.deviceElements" :fields="['name', 'type']">
        <template v-slot:cell(name)="data">
          <span>{{ data.item.name }}</span>
        </template>
        <template v-slot:cell(type)="data">
          <b-badge :class="getClassByType(data.item.type)">{{ data.item.type }}</b-badge>
        </template>
      </b-table>
      <b-button>Save</b-button>
    </b-modal>

    <!-- Delete Confirmation Modal -->
    <b-modal id="delete-modal">
      <p>Are you sure you want to delete this configuration?</p>
      <b-button>Delete</b-button>
    </b-modal>

    <!-- Edit Device Filters Modal -->
    <b-modal id="edit-device-info">

      <!-- Region Select -->
      <b-select v-model="selectedDeviceValues.filters.region" :options="selectedDeviceValues.regionNames"></b-select>

      <!-- Location Select -->
      <b-select v-model="selectedDeviceValues.filters.location" :options="selectedDeviceValues.locationNames"></b-select>

      <!-- Room Select -->
      <b-select v-model="selectedDeviceValues.filters.room" :options="selectedDeviceValues.roomNames"></b-select>
      <b-button>Save</b-button>
    </b-modal>

    <!-- Info Modal -->
    <b-modal id="info-modal">
      <p>{{ infoMsg }}</p>
    </b-modal>

    <LoadingModal />
  </div>
</template>

Main Variables¶

`alarmConfig`¶

Stores the current alarm configuration, including dashboards, services, types, and elements.

`deviceFilters`¶

Stores the filters for the device list, including:

deviceName: The name of the device.
selectedType: The selected device type.
selectedRegion: The selected region.
selectedLocation: The selected location.
selectedRoom: The selected room.

`filterConfig`¶

Stores the configuration for regions, locations, and room names, including:

regionList: List of regions.
locationList: List of locations for the selected region.
roomList: List of room names for the selected location.

Functions¶

void loadInfo()¶

Loads the initial data for the page, including alarm configurations, device filters, and the device list.

Input Parameters: - None.

Output Parameters: - None. Updates alarmConfig, deviceFilters, and filterConfig.

How It Works:

Fetches the list of services and sets the selected service.
Fetches the alarm configurations and device filter configurations.
Fetches the list of devices.

void setDashboardConfig(value)¶

Updates the available services based on the selected dashboard.

Input Parameters:

value (String): The name of the selected dashboard.

Output Parameters:

None. Updates serviceConfig.

How It Works:

Finds the selected dashboard in alarmConfig.
Updates serviceConfig with the services of the selected dashboard.

void setServiceConfig(value)¶

Updates the available types based on the selected service.

Input Parameters:

value (String): The name of the selected service.

Output Parameters:

None. Updates typeConfig.

How It Works:

Finds the selected service in serviceConfig.
Updates typeConfig with the types of the selected service.

void setDeviceFilterLocations()¶

Updates the available locations based on the selected region.

Input Parameters:

None. Uses deviceFilters.selectedRegion.

Output Parameters:

None. Updates deviceFilters.locationNames.

How It Works:

Finds the selected region in deviceFilters.filterConfig.
Updates locationNames with the locations of the selected region.

void setDeviceFilterRooms()¶

Updates the available room names based on the selected location.

Input Parameters:

None. Uses deviceFilters.selectedLocation.

Output Parameters:

None. Updates deviceFilters.roomNames.

How It Works:

Finds the selected location in deviceFilters.locationNames.
Updates roomNames with the rooms of the selected location.

void createAlarmConfig()¶

Sends a request to create a new alarm configuration.

Input Parameters:

None. Uses alarmConfig.

Output Parameters:

None. Sends the configuration data to the backend.

How It Works:

Prepares the configuration data.
Sends a request to create the configuration.
Refreshes the configuration list on success.

void editAlarmConfig()¶

Sends a request to update an existing alarm configuration.

Input Parameters:

None. Uses alarmConfig.

Output Parameters:

None. Sends the updated configuration data to the backend.

How It Works:

Prepares the configuration data.
Sends a request to update the configuration.
Refreshes the configuration list on success.

void deleteAlarmConfig()¶

Deletes the selected alarm configuration.

Input Parameters:

None. Uses selectedAlarmConfig.

Output Parameters:

None. Sends a request to delete the configuration.

How It Works:

Sends a request to delete the configuration.
Refreshes the configuration list on success.

void updateDeviceInformation()¶

Updates the information of the selected device(s).

Input Parameters: - None. Uses selectedDevice or selectedDevices.

Output Parameters:

None. Sends the updated device information to the backend.

How It Works:

Prepares the device information.
Sends a request to update the device(s).
Refreshes the device list on success.

void addNewItem(type)¶

Adds a new region, location, or room name.

Input Parameters:

type (String): The type of item to add (region, location, or room).

Output Parameters:

None. Sends the new item data to the backend.

How It Works:

Prepares the new item data.
Sends a request to add the item.
Refreshes the filter configuration list on success.

void deleteItem(type, item)¶

Deletes a region, location, or room name.

Input Parameters:

type (String): The type of item to delete (region, location, or room).
item (Object): The item to delete.

Output Parameters:

None. Sends a request to delete the item.

How It Works:

Sends a request to delete the item.
Refreshes the filter configuration list on success.

void resetValues()¶

Resets all configuration and filter-related variables to their default state.

Input Parameters: - None.

Output Parameters:

None. Resets variables like alarmConfigList, deviceFilters, and formControl.

How It Works:

Clears all lists and resets selected values to null or default values.
Prepares the page for fresh data loading.

void getAlarmConfigs()¶

Fetches the list of alarm configurations.

Input Parameters:

None.

Output Parameters:

None. Updates alarmConfigList.

How It Works:

Sends a request to fetch alarm configurations.
Updates alarmConfigList and calls getDeviceElements() on success.

void getDeviceFilterConfigs()¶

Fetches the filter configuration for devices (regions, locations, and rooms).

Input Parameters:

None.

Output Parameters:

None. Updates filterConfig and deviceFilters.

How It Works:

Sends a request to fetch filter configurations.
Updates regionList, locationList, and roomList based on the response.

void getDeviceElements()¶

Fetches the list of device elements for alarms.

Input Parameters:

None.

Output Parameters:

None. Updates formControl.deviceElements.

How It Works:

Sends a request to fetch device elements.
Maps the response to formControl.deviceElements.

void getDevices()¶

Fetches the list of devices based on the selected filters.

Input Parameters:

None.

Output Parameters:

None. Updates deviceList and deviceListFiltered.

How It Works:

Sends a request to fetch devices with the selected filters.
Updates deviceList and applies additional filtering for deviceListFiltered.

void setDeviceInSelectedList(item, value)¶

Adds or removes a device from the selected devices list.

Input Parameters:

item (Object): The device to add or remove.
value (Boolean): Whether the device is selected.

Output Parameters:

None. Updates selectedDevices.

How It Works:

Adds the device to selectedDevices if value is true.
Removes the device from selectedDevices if value is false.

void setEditItem(item)¶

Prepares the modal for editing an alarm configuration.

Input Parameters:

item (Object): The alarm configuration to edit.

Output Parameters:

None. Updates alarmConfig and formControl.

How It Works:

Sets editingAlarmConfig to true.
Copies the selected configuration to alarmConfig.
Opens the modal for editing.

void setNewItem()¶

Prepares the modal for creating a new alarm configuration.

Input Parameters:

None.

Output Parameters:

None. Resets alarmConfig and formControl.

How It Works:

Sets editingAlarmConfig to false.
Resets alarmConfig to default values.
Opens the modal for creating a new configuration.

void setElementValue(value, index)¶

Updates the value of an element in the alarm configuration.

Input Parameters:

value (Object): The new value for the element.
index (Number): The index of the element to update.

Output Parameters:

None. Updates alarmConfig.elements.

How It Works:

Updates the element at the specified index with the new value.

void selectDeviceToEdit(item)¶

Prepares the modal for editing a device's information.

Input Parameters:

item (Object): The device to edit.

Output Parameters:

None. Updates selectedDevice.

How It Works:

Copies the selected device to selectedDevice.
Opens the modal for editing device information.

void setDeviceSelectedRegion()¶

Updates the available locations based on the selected region in the device modal.

Input Parameters:

None. Uses selectedDeviceValues.filters.region.

Output Parameters:

None. Updates selectedDeviceValues.locationNames.

How It Works:

Finds the locations for the selected region.
Updates locationNames with the locations of the selected region.

void setDeviceSelectedLocation()¶

Updates the available rooms based on the selected location in the device modal.

Input Parameters:

None. Uses selectedDeviceValues.filters.location.

Output Parameters:

None. Updates selectedDeviceValues.roomNames.

How It Works:

Finds the rooms for the selected location.
Updates roomNames with the rooms of the selected location.

void setRegionFilterConfig(region)¶

Sets the selected region for filter configuration.

Input Parameters:

region (Object): The region to select.

Output Parameters:

None. Updates filterConfig.

How It Works:

Sets the selected region.
Clears the selected location and room.
Updates the location list for the selected region.

void setLocationFilterConfig(loc)¶

Sets the selected location for filter configuration.

Input Parameters:

loc (Object): The location to select.

Output Parameters:

None. Updates filterConfig.

How It Works:

Sets the selected location.
Updates the room list for the selected location.

void setRoomFilterConfig(room)¶

Sets the selected room for filter configuration.

Input Parameters:

room (Object): The room to select.

Output Parameters:

None. Updates filterConfig.

How It Works:

Sets the selected room.

void deleteItemEditingRegion(event, item)¶

Deletes a region from the filter configuration.

Input Parameters:

event (Event): The click event.
item (Object): The region to delete.

Output Parameters:

None. Updates filterConfig.regionList.

How It Works:

Removes the region from regionList.
Sends a request to delete the region.

void deleteItemEditingLocation(event, item)¶

Deletes a location from the filter configuration.

Input Parameters:

event (Event): The click event.
item (Object): The location to delete.

Output Parameters:

None. Updates filterConfig.locationList.

How It Works:

Removes the location from locationList.
Sends a request to delete the location.

void deleteItemEditingRoom(event, item)¶

Deletes a room from the filter configuration.

Input Parameters:

event (Event): The click event.
item (Object): The room to delete.

Output Parameters:

None. Updates filterConfig.roomList.

How It Works:

Removes the room from roomList.
Sends a request to delete the room.

void restoreItemEditing(event, item)¶

Restores the previous value of an item being edited.

Input Parameters:

event (Event): The click event.
item (Object): The item to restore.

Output Parameters:

None. Updates the item's value.

How It Works:

Restores the item's value to previousValue.
Disables editing mode for the item.

void mostrarModal(modal, msg)¶

Displays a modal with a message.

Input Parameters:

modal (String): The ID of the modal to display.
msg (String): The message to display.

Output Parameters:

None. Updates infoMsg.

How It Works:

Sets infoMsg to the provided message.
Displays the specified modal.

void showModal(modal)¶

Displays a modal.

Input Parameters:

modal (String): The ID of the modal to display.

Output Parameters:

None.

How It Works:

Calls the show method of the modal.

void hideModal(modal)¶

Hides a modal.

Input Parameters:

modal (String): The ID of the modal to hide.

Output Parameters:

None.

How It Works:

Calls the hide method of the modal.

Notes¶

The Configuration page dynamically updates available options based on user selections.
The GraphAPI service includes additional tabs for managing devices and filter configurations.
Regions, locations, and room names are managed hierarchically, with each level depending on the previous one.
The page adapts its content based on the selected service (GraphAPI or Neat).

References¶

Alarms API: Provides endpoints for managing alarm configurations.
Auth API: Handles authentication and user session management.
Graph Devices API: Manages device configurations and filters for the GraphAPI service.
Users API: Provides endpoints for managing user accounts and permissions.

Configuration Page¶

Overview¶

HTML Structure¶

Main Variables¶

alarmConfig¶

deviceFilters¶

filterConfig¶

Functions¶

void loadInfo()¶

void setDashboardConfig(value)¶

void setServiceConfig(value)¶

void setDeviceFilterLocations()¶

void setDeviceFilterRooms()¶

void createAlarmConfig()¶

void editAlarmConfig()¶

void deleteAlarmConfig()¶

void updateDeviceInformation()¶

void addNewItem(type)¶

void deleteItem(type, item)¶

void resetValues()¶

void getAlarmConfigs()¶

void getDeviceFilterConfigs()¶

void getDeviceElements()¶

void getDevices()¶

void setDeviceInSelectedList(item, value)¶

void setEditItem(item)¶

void setNewItem()¶

void setElementValue(value, index)¶

void selectDeviceToEdit(item)¶

void setDeviceSelectedRegion()¶

void setDeviceSelectedLocation()¶

void setRegionFilterConfig(region)¶

void setLocationFilterConfig(loc)¶

void setRoomFilterConfig(room)¶

void deleteItemEditingRegion(event, item)¶

void deleteItemEditingLocation(event, item)¶

void deleteItemEditingRoom(event, item)¶

void restoreItemEditing(event, item)¶

void mostrarModal(modal, msg)¶

void showModal(modal)¶

void hideModal(modal)¶

Notes¶

References¶

`alarmConfig`¶

`deviceFilters`¶

`filterConfig`¶