Merge branch 'main' of https://github.com/EsriDE/urban-heat-risk-index

EsriDE · Nov 5, 2024 · ba7c8bc · ba7c8bc
2 parents 69be22b + b40cb8d
commit ba7c8bc
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 104 deletions.
diff --git a/web-apps/urban-sun-safe/configs/config.json b/web-apps/urban-sun-safe/configs/config.json
@@ -1,5 +1,6 @@
 {
-    "title": "Urban Sun Safe",   
+    "title": "Urban Sun Safe",
+    "description": "This app shows Urban Heat Inslands in the City of Bonn. In addition, the shadow cast can be calculated at these hotspots. And you can test the impact of parasols or awnings on the shade.",
     "services": {
         "basemap": "arcgis/topographic",
         "elevation": "world-elevation",

diff --git a/web-apps/urban-sun-safe/src/compontents/App.tsx b/web-apps/urban-sun-safe/src/compontents/App.tsx
@@ -9,7 +9,6 @@ import { watch } from "@arcgis/core/core/reactiveUtils";
 import Fullscreen from "@arcgis/core/widgets/Fullscreen";
 import AppStore from "../stores/AppStore";
 import Header from "./Header";
-import Player from "./Player";
 import { Widget } from "./Widget";
 
 type AppProperties = Pick<App, "store">;
@@ -23,27 +22,6 @@ class App extends Widget<AppProperties> {
     const view = this.store.view;
     const fullscreen = new Fullscreen({ view });
     view.ui.add(fullscreen, "top-right");
-
-    const player = new Player({
-      store: this.store.playerStore,
-    });
-
-    view.ui.add(player, "bottom-right");
-
-    this.addHandles(
-      watch(
-        () => this.store.playerStore.state,
-        (state) => {
-          if (state === "animating") {
-            player.visible = false;
-            fullscreen.visible = false;
-          } else if (state === "ready") {
-            player.visible = true;
-            fullscreen.visible = true;
-          }
-        }
-      )
-    );
   }
 
   render() {

diff --git a/web-apps/urban-sun-safe/src/compontents/Header.tsx b/web-apps/urban-sun-safe/src/compontents/Header.tsx
@@ -15,6 +15,7 @@ import "@esri/calcite-components/dist/components/calcite-navigation";
 import "@esri/calcite-components/dist/components/calcite-navigation-logo";
 import "@esri/calcite-components/dist/components/calcite-navigation-user";
 import * as Config from '../../configs/config.json'
+import { CalciteButton } from "@esri/calcite-components/dist/components/calcite-button";
 
 type HeaderProperties = Pick<Header, "store">;
 
@@ -23,105 +24,35 @@ class Header extends Widget<HeaderProperties> {
   @property()
   store: AppStore;
 
-  @property()
-  userMenuOpen = false;
-
   constructor(props: HeaderProperties) {
     super(props);
-
-    const viewContainer = props.store.view.container;
-
-    viewContainer.addEventListener("mousedown", this.closeUserMenu);
-
-    this.addHandles([
-      {
-        remove: () => {
-          viewContainer.removeEventListener("mousedown", this.closeUserMenu);
-        },
-      },
-    ]);
-  }
-
-  private closeUserMenu = () => {
-    this.userMenuOpen = false;
-  };
-
-  private signOut() {
-    this.store.userStore.signOut();
-    this.closeUserMenu();
-  }
-
-  private openScene() {
-    const itemPageUrl = this.store.map.portalItem.itemPageUrl;
-    if (itemPageUrl) {
-      window.open(itemPageUrl, "new");
-    }
   }
 
   render() {
-    const userMenuClass = this.userMenuOpen ? "" : "hide";
-
     return (
       <div>
         <calcite-navigation slot="header">
           <calcite-navigation-logo
             slot="logo"
-            // heading={this.store.map.portalItem.title}
             heading={Config.title}
-            description="ArcGIS Maps SDK for JavaScript"
-            thumbnail="./icon-64.svg"
+            description={Config.description}
+            active={false}
             onclick={() => {
-              this.openScene();
             }}
           ></calcite-navigation-logo>
-
-          {this.renderUserProfile()}
+          <calcite-button
+            scale="l"
+            appearance="transparent"
+            slot="content-end"
+            icon-start="information"
+            href="https://github.com/EsriDE/urban-heat-risk-index"
+            target="_blank"
+            label="Info">
+          </calcite-button>
         </calcite-navigation>
-        <calcite-menu
-          id="user-menu"
-          layout="vertical"
-          label="Application menu"
-          class={userMenuClass}
-        >
-          <calcite-menu-item
-            icon-start="sign-out"
-            text="Sign Out"
-            onclick={() => this.signOut()}
-          ></calcite-menu-item>
-        </calcite-menu>
       </div>
     );
   }
-
-  private renderUserProfile() {
-    const userStore = this.store.userStore;
-    if (userStore.authenticated) {
-      const user = userStore.user;
-      return (
-        <calcite-navigation-user
-          slot="user"
-          active={this.userMenuOpen}
-          onclick={() => {
-            this.userMenuOpen = !this.userMenuOpen;
-          }}
-          thumbnail={user?.thumbnailUrl}
-          full-name={user?.fullName}
-          username={user?.username}
-        ></calcite-navigation-user>
-      );
-    } else {
-      return (
-        <calcite-menu slot="content-end">
-          <calcite-menu-item
-            onclick={() => userStore.signIn()}
-            text="Sign in"
-            icon-start="user"
-            text-enabled
-          ></calcite-menu-item>
-        </calcite-menu>
-      );
-    }
-  }
 }
 
 export default Header;