Freestyle fiori app

app/manager/.babelrc.json

@@ -0,0 +1,22 @@
+{
+    "presets": [
+        "@babel/preset-env",
+        [
+            "transform-ui5",
+            {
+                "overridesToOverride": true
+            }
+        ],
+        "@babel/preset-typescript"
+    ],
+    "plugins": [
+        "transform-remove-console",
+        [
+            "transform-async-to-promises",
+            {
+                "inlineHelpers": true
+            }
+        ]
+    ],
+    "sourceMaps": true
+}

app/manager/.eslintrc

@@ -0,0 +1,4 @@
+{
+    "extends": "plugin:@sap-ux/eslint-plugin-fiori-tools/defaultTS",
+    "root": true
+}

app/manager/README.md

@@ -0,0 +1,34 @@
+## Application Details
+|               |
+| ------------- |
+|**Generation Date and Time**<br>Fri Dec 22 2023 12:25:57 GMT+0530 (India Standard Time)|
+|**App Generator**<br>@sap/generator-fiori-freestyle|
+|**App Generator Version**<br>1.11.4|
+|**Generation Platform**<br>Visual Studio Code|
+|**Template Used**<br>simple|
+|**Service Type**<br>Local Cap|
+|**Service URL**<br>http://localhost:4004/odata/v4/manager/
+|**Module Name**<br>manager|
+|**Application Title**<br>SLA Manager|
+|**Namespace**<br>ns|
+|**UI5 Theme**<br>sap_horizon|
+|**UI5 Version**<br>1.120.3|
+|**Enable Code Assist Libraries**<br>False|
+|**Enable TypeScript**<br>True|
+|**Add Eslint configuration**<br>False|
+
+## manager
+
+A Fiori application.
+
+### Starting the generated app
+
+-   This app has been generated using the SAP Fiori tools - App Generator, as part of the SAP Fiori tools suite.  In order to launch the generated app, simply start your CAP project and navigate to the following location in your browser:
+
+http://localhost:4004/ns.manager/index.html
+
+#### Pre-requisites:
+
+1. Active NodeJS LTS (Long Term Support) version and associated supported NPM version.  (See https://nodejs.org)
+
+

app/manager/annotations.cds

@@ -0,0 +1 @@
+using ManagerService as service from '../../srv/services';

app/manager/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "manager",
+  "version": "0.0.1",
+  "private": true,
+  "description": "A Fiori application.",
+  "keywords": [
+    "ui5",
+    "openui5",
+    "sapui5"
+  ],
+  "main": "webapp/index.html",
+  "dependencies": {},
+  "devDependencies": {
+    "@ui5/cli": "^3.0.0",
+    "@sap/ux-ui5-tooling": "1",
+    "@sapui5/types": "~1.120.0",
+    "ui5-tooling-transpile": "^3.2.0",
+    "typescript": "^5.1.6",
+    "@typescript-eslint/eslint-plugin": "^5.59.0",
+    "@typescript-eslint/parser": "^5.59.0",
+    "@sap-ux/eslint-plugin-fiori-tools": "^0.2.0",
+    "@sap-ux/ui5-middleware-fe-mockserver": "2"
+  },
+  "scripts": {
+    "build": "ui5 build --config=ui5.yaml --clean-dest --dest dist",
+    "lint": "eslint ./",
+    "ts-typecheck": "tsc --noEmit",
+    "prestart": "npm run ts-typecheck",
+    "prebuild": "npm run ts-typecheck",
+    "deploy": "fiori verify",
+    "deploy-config": "fiori add deploy-config"
+  }
+}

app/manager/tsconfig.json

@@ -0,0 +1,26 @@
+{
+    "compilerOptions": {
+        "target": "es2022",
+        "module": "es2022",
+        "skipLibCheck": true,
+        "allowJs": true,
+        "strict": true,
+        "strictPropertyInitialization": false,
+        "moduleResolution": "node",
+        "rootDir": "./webapp",
+        "outDir": "./dist",
+        "baseUrl": "./",
+        "paths": {
+            "ns/manager/*": [
+                "./webapp/*"
+            ]
+        },
+        "typeRoots": [
+            "./node_modules/@types",
+            "./node_modules/@sapui5/types"
+        ]
+    },
+    "include": [
+        "./webapp/**/*"
+    ]
+}

app/manager/ui5.yaml

@@ -0,0 +1,28 @@
+specVersion: "3.1"
+metadata:
+  name: ns.manager
+type: application
+server:
+  customMiddleware:
+    - name: fiori-tools-proxy
+      afterMiddleware: compression
+      configuration:
+        ignoreCertError: false # If set to true, certificate errors will be ignored. E.g. self-signed certificates will be accepted
+        ui5:
+          path:
+            - /test-resources
+          url: https://ui5.sap.com
+    - name: fiori-tools-appreload
+      afterMiddleware: compression
+    - name: ui5-tooling-transpile-middleware
+      afterMiddleware: compression
+      configuration:
+        debug: true
+        excludePatterns:
+          - /Component-preload.js
+builder:
+  customTasks:
+    - name: ui5-tooling-transpile-task
+      afterTask: replaceVersion
+      configuration:
+        debug: true

app/manager/webapp/Component.ts

@@ -0,0 +1,28 @@
+import BaseComponent from "sap/ui/core/UIComponent";
+import { createDeviceModel } from "./model/models";
+
+/**
+ * @namespace ns.manager
+ */
+export default class Component extends BaseComponent {
+
+	public static metadata = {
+		manifest: "json"
+	};
+
+    /**
+     * The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
+     * @public
+     * @override
+     */
+	public init() : void {
+		// call the base component's init function
+		super.init();
+
+        // enable routing
+        this.getRouter().initialize();
+
+        // set the device model
+        this.setModel(createDeviceModel(), "device");
+	}
+}

app/manager/webapp/controller/App.controller.ts

@@ -0,0 +1,12 @@
+import Controller from "sap/ui/core/mvc/Controller";
+
+/**
+ * @namespace ns.manager.controller
+ */
+export default class App extends Controller {
+
+    /*eslint-disable @typescript-eslint/no-empty-function*/
+    public onInit(): void {
+
+    }
+}

app/manager/webapp/controller/Main.controller.ts

@@ -0,0 +1,17 @@
+import Controller from "sap/ui/core/mvc/Controller";
+
+/**
+ * @namespace ns.manager.controller
+ */
+export default class Main extends Controller {
+
+    /*eslint-disable @typescript-eslint/no-empty-function*/
+    public onInit(): void {
+
+    }
+
+    navToSpotStatus(event: GeoMap$KeyPressEvent) {
+        const spotIndex = event.getSource().getBindingContext("spotModel")?.getProperty("index");
+        (this.getOwnerComponent() as UIComponent).getRouter().navTo("RouteSpotStatus", {index: spotIndex});
+    }
+}

app/manager/webapp/controller/SpotStatus.controller.ts

@@ -0,0 +1,41 @@
+import Controller from "sap/ui/core/mvc/Controller";
+import UIComponent from "sap/ui/core/UIComponent";
+import Filter from "sap/ui/model/Filter";
+import FilterOperator from "sap/ui/model/FilterOperator";
+import { IconTabBar$SelectEvent } from "sap/m/IconTabBar";
+import ListBinding from "sap/ui/model/ListBinding";
+import { Urgency } from "../format/util";
+/**
+ * @namespace ns.manager.controller
+ */
+export default class SpotStatus extends Controller {
+
+    private statusFilters: Filter[] = [];
+
+    public onInit() {
+
+    }
+
+    onFilterSelect(event: IconTabBar$SelectEvent): void {
+
+        const listBinding = this.getView()?.byId("incidentList")?.getBinding("items") as ListBinding;
+        const key = (event.getParameter("key") as string);
+
+        if (key === "L") {
+            this.statusFilters = [new Filter("urgency", FilterOperator.EQ, Urgency.Low, false)];
+        } else if (key === "M") {
+            this.statusFilters = [new Filter("urgency", FilterOperator.EQ, Urgency.Medium, false)];
+        } else if (key === "H") {
+            this.statusFilters = [new Filter("urgency", FilterOperator.EQ, Urgency.High, false)];
+        } else {
+            this.statusFilters = [];
+        }
+
+        listBinding.filter(this.statusFilters);
+    }
+
+    navToMain() {
+        (this.getOwnerComponent() as UIComponent).getRouter().navTo("RouteMain");
+    }
+
+}

app/manager/webapp/css/style.css

@@ -0,0 +1 @@
+/* Enter your custom styles here */

app/manager/webapp/format/util.ts

@@ -0,0 +1,25 @@
+import { MessageType } from "sap/ui/core/library";
+
+export enum Urgency {
+    High = 'H',
+    Medium = 'M',
+    Low = 'L'
+}
+
+export function formatHighlightColor(urgency: Urgency): MessageType {
+
+    if (urgency === Urgency.High) return MessageType.Error;
+    else if (urgency === Urgency.Medium) return MessageType.Warning;
+    return MessageType.Information;
+
+}
+
+
+export function formatDaysAgo(createdAt: Date): String {
+    const today = new Date()
+    const since = new Date(createdAt)
+    const diff = Math.abs(since.getTime() - today.getTime());
+    const diffD = Math.ceil(diff / (1000 * 60 * 60 * 24));
+    if (diffD <= 1) return `${diffD} day ago`
+    return `${diffD} days ago`
+}

app/manager/webapp/i18n/i18n.properties

@@ -0,0 +1,16 @@
+# This is the resource bundle for ns.manager
+
+#Texts for manifest.json
+
+#XTIT: Application name
+appTitle=Incidents by Location
+
+#YDES: Application description
+appDescription=A Fiori application.
+#XTIT: Main view title
+title=Incidents by Location
+titleSpotStatus=Spot Status
+msgFilterAll= All
+msgFilterHigh= High
+msgFilterMedium= Medium
+msgFilterLow= Low

app/manager/webapp/index.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <title>SLA Manager</title>
+    <style>
+        html, body, body > div, #container, #container-uiarea {
+            height: 100%;
+        }
+    </style>
+    <script
+        id="sap-ui-bootstrap"
+        src="https://sapui5.hana.ondemand.com/1.120.3/resources/sap-ui-core.js"
+        data-sap-ui-theme="sap_horizon"
+        data-sap-ui-resourceroots='{
+            "ns.manager": "./"
+        }'
+        data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
+        data-sap-ui-compatVersion="edge"
+        data-sap-ui-async="true"
+        data-sap-ui-frameOptions="trusted"
+    ></script>
+</head>
+<body class="sapUiBody sapUiSizeCompact" id="content">
+    <div
+        data-sap-ui-component
+        data-name="ns.manager"
+        data-id="container"
+        data-settings='{"id" : "ns.manager"}'
+        data-handle-validation="true"
+    ></div>
+</body>
+</html>

app/manager/webapp/localData/spots.json

@@ -0,0 +1,18 @@
+{
+  "Spots": [
+    {
+      "pos": "8.641622;49.293696;0",
+      "tooltip": "Walldorf",
+      "type": "Error",
+      "label": "ACME, Walldorf",
+      "index": "1"
+    },
+    {
+      "pos": "77.714421;12.977788;0",
+      "tooltip": "Bangalore",
+      "type": "Error",
+      "label": "ACME, Bangalore",
+      "index": "2"
+    }
+  ]
+}