Fixed Responsiveness, Refactored title, context path and application key

Cumulocity-IoT · Apr 21, 2023 · 38350d3 · 38350d3
1 parent 263cd82
commit 38350d3
Show file tree

Hide file tree

Showing 8 changed files with 76 additions and 80 deletions.
diff --git a/README.md b/README.md
@@ -1,26 +1,23 @@
-# Weather Forecast Widget for Cumulocity [<img width="35" src="https://user-images.githubusercontent.com/32765455/211497905-561e9197-18b9-43d5-a023-071d3635f4eb.png"/>](https://github.com/SoftwareAG/cumulocity-weather-forecast-widget-plugin/releases/download/1.0.0-beta/weather-forecast-widget-1.0.0-beta.zip)
+# Weather Forecast Widget for Cumulocity [<img width="35" src="https://user-images.githubusercontent.com/32765455/211497905-561e9197-18b9-43d5-a023-071d3635f4eb.png"/>](https://github.com/SoftwareAG/cumulocity-weather-forecast-widget-plugin/releases/download/1.0.0/sag-ps-pkg-weather-forecast-widget-1.0.0.zip)
 
-
-
-This Weather Forecast Widget is the Cumulocity module federation plugin created using c8ycli. This plugin can be used in Application Builder or Cockpit. 
-This Weather Forecast Widget help you to Displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI.
+The Weather Forecast Widget is the Cumulocity module federation plugin created using c8ycli. This plugin can be used in Application Builder or Cockpit. 
+The Weather Forecast Widget help you to Displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI.
 
 ![Weather_Forecast](https://user-images.githubusercontent.com/99970126/180731134-c2a8a53b-317e-4a58-a8a1-f067a9801971.png)
 
-### Please note that this plugin is in currently under BETA mode.
-
-### Please choose Weather Forecast release based on Cumulocity/Application builder version:
+### Please choose Weather Forecast Widget release based on Cumulocity/Application builder version:
 
 |APPLICATION BUILDER | CUMULOCITY | Weather Forecast WIDGET |
 |--------------------|-------------|-------------------------|
-| 2.x.x(coming soon) | >= 1016.x.x | 1.x.x |
+| 2.0.x  | >= 1016.x.x | 1.x.x |
 
 
 ## Prerequisites:
  Cumulocity c8ycli >=1016.x.x
 
 
 ## Features
+
 **Realtime:** Realtime weather updates from the OpenWeatherAPI
 
 **Configurable Refresh rate:** Control how often the weather updates
@@ -30,9 +27,10 @@ This Weather Forecast Widget help you to Displays a 5-day weather forecast using
 
 ### Runtime Widget Deployment?
 
-* This widget supports runtime deployment. Download the [Runtime Binary](https://github.com/SoftwareAG/cumulocity-weather-forecast-widget-plugin/releases/download/1.0.0-beta/weather-forecast-widget-1.0.0-beta.zip) and use Application Builder to install your runtime widget.
+* This widget supports runtime deployment. Download the [Runtime Binary](https://github.com/SoftwareAG/cumulocity-weather-forecast-widget-plugin/releases/download/1.0.0/sag-ps-pkg-weather-forecast-widget-1.0.0.zip)and install via Administrations --> Ecosystems --> Applications --> Packages 
 
 ## Quickstart
+
 This guide will teach you how to add the widget in your existing or new dashboard.
 
 1. Register a new account with [OpenWeather](https://openweathermap.org/)

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,16 +1,20 @@
 {
  "name": "cumulocity-weather-forecast-widget-plugin",
- "version": "1.0.0-beta",
- "description": "This Weather Forecast Widget displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI.",
+ "version": "1.0.0",
+ "description": "The Weather Forecast Widget displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI.",
  "scripts": {
  "start": "c8ycli server",
- "build": "c8ycli build",
+ "build": "c8ycli build --env.mode=production",
  "deploy": "c8ycli deploy",
  "postinstall": "ngcc",
  "prebuild": " gulp clean",
  "postbuild": " gulp bundle"
  },
- "keywords": [],
+ "keywords": [
+ "Cumulocity",
+ "Plugin",
+ "Widget"
+ ],
  "author": "Meer Arfath - Software AG, Global Presales",
  "license": "Apache-2.0",
  "dependencies": {
@@ -51,11 +55,11 @@
  },
  "c8y": {
  "application": {
- "name": "cumulocity Weather Forecast Widget Plugin",
- "description": "This Weather Forecast Widget displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI.",
- "contextPath": "weather-forecast-widget",
- "key": "weather-forecast-widget-application-key",
- "globalTitle": "This Weather Forecast Widget displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI.",
+ "name": "Weather Forecast Widget",
+ "description": "The Weather Forecast Widget displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI.",
+ "contextPath": "sag-ps-pkg-weather-forecast-widget",
+ "key": "sag-ps-pkg-weather-forecast-widget-application-key",
+ "globalTitle": "The Weather Forecast Widget displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI.",
  "tabsHorizontal": true,
  "isPackage": true,
  "noAppSwitcher": true,
@@ -66,10 +70,10 @@
  "requiredPlatformVersion": ">=1016.0.0",
  "exports": [
  {
- "name": "cumulocity Weather Forecast Widget Plugin",
+ "name": "Weather Forecast Widget",
  "module": "WeatherForecastWidgetModule",
  "path": "./weather-forecast-widget/weather-forecast-widget.module.ts",
- "description": "This Weather Forecast Widget displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI."
+ "description": "The Weather Forecast Widget displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI."
  }
  ],
  "remotes": {

diff --git a/weather-forecast-widget/weather-forecast-widget.component.css b/weather-forecast-widget/weather-forecast-widget.component.css
@@ -1,12 +1,6 @@
-.weather-forecast-container {
- display: flex;
- justify-content: center;
-}
-
 .weather-group {
  float: left;
  margin-left: 10px;
- margin-right: 10px;
 }
 
 .weather-image-container, .weather-date-container {

diff --git a/weather-forecast-widget/weather-forecast-widget.component.html b/weather-forecast-widget/weather-forecast-widget.component.html
@@ -1,42 +1,42 @@
 <ng-container *ngIf="weather_forecast">
- <div class="weather-forecast-container">
- <div class="weather-group" *ngFor="let weather of weather_forecast">
- <table>
- <tr>
- <td class="weather-image-container" colspan="2">
- <img src="https://openweathermap.org/img/wn/{{weather.icon}}@2x.png"/>
- </td>
- </tr>
- <tr>
- <td class="weather-date-container" colspan="2">
- <b>{{weather.date| date:'EEE dd-MMM'}}</b>
- </td>
- </tr>
- <tr>
- <td class="weather-attribute-title">
- <b>Outlook:</b>
- </td>
- <td>{{weather.desc}} </td>
- </tr>
- <tr>
- <td class="weather-attribute-title">
- <b>Temperature:</b>
- </td>
- <td>{{weather.temp | number:"1.0-0"}}C</td>
- </tr>
- <tr>
- <td class="weather-attribute-title">
- <b>Humidity:</b>
- </td>
- <td>{{weather.humidity}}%</td>
- </tr>
- <tr>
- <td class="weather-attribute-title">
- <b>Wind:</b>
- </td>
- <td>{{weather.wind.speed | number:"1.0-0"}}mph</td>
- </tr>
- </table>
- </div>
+ <div class="table-responsive weather-group" *ngFor="let weather of weather_forecast">
+ <table class="table">
+ <tr>
+ <td class="weather-image-container" colspan="2">
+ <img src="https://openweathermap.org/img/wn/{{weather.icon}}@2x.png" />
+ </td>
+ </tr>
+ <tr>
+ <td class="weather-date-container" colspan="2">
+ <b>{{weather.date| date:'EEE dd-MMM'}}</b>
+ </td>
+ </tr>
+ <tr>
+ <td class="weather-attribute-title">
+ <b>Outlook:</b>
+ </td>
+ <td>{{weather.desc}} </td>
+ </tr>
+ <tr>
+ <td class="weather-attribute-title">
+ <b>Temperature:</b>
+ </td>
+ <td>{{weather.temp | number:"1.0-0"}}C</td>
+ </tr>
+ <tr>
+ <td class="weather-attribute-title">
+ <b>Humidity:</b>
+ </td>
+ <td>{{weather.humidity}}%</td>
+ </tr>
+ <tr>
+ <td class="weather-attribute-title">
+ <b>Wind:</b>
+ </td>
+ <td>{{weather.wind.speed | number:"1.0-0"}}mph</td>
+ </tr>
+ </table>
+
  </div>
-</ng-container>
+
+</ng-container>
diff --git a/weather-forecast-widget/weather-forecast-widget.config.component.html b/weather-forecast-widget/weather-forecast-widget.config.component.html
@@ -10,26 +10,25 @@
  <label for="openWeather-apikey">
  API Key
  </label>
- <input type="text" name="weatherAPIConfig-apikey" id="openWeather-apikey"
- class="form-control bar-chart-control" (change)="onConfigChanged($event)"
- [(ngModel)]="weatherAPIConfig.apikey" placeholder='API Key' />
+ <input type="text" name="weatherAPIConfig-apikey" id="openWeather-apikey" class="form-control bar-chart-control"
+ (change)="onConfigChanged($event)" [(ngModel)]="weatherAPIConfig.apikey" placeholder='API Key' />
  </c8y-form-group>
 
  <c8y-form-group>
  <label for="openWeather-period">
  Refresh (in hours)
  </label>
- <input type="text" name="weatherAPIConfig-period" id="openWeather-period"
- class="form-control bar-chart-control" (change)="onConfigChanged($event)"
- [(ngModel)]="weatherAPIConfig.period" placeholder='Update Period (hours)' />
+ <input type="text" name="weatherAPIConfig-period" id="openWeather-period" class="form-control bar-chart-control"
+ (change)="onConfigChanged($event)" [(ngModel)]="weatherAPIConfig.period"
+ placeholder='Update Period (hours)' />
  </c8y-form-group>
 
  <c8y-form-group>
  <label for="openWeather-city">
  City
  </label>
- <input type="text" name="weatherAPIConfig-city" id="openWeather-city"
-  class="form-control bar-chart-control" (change)="onConfigChanged($event)"
-  [(ngModel)]="weatherAPIConfig.city" placeholder='City (blank=<device location>)' />
+ <input type="text" name="weatherAPIConfig-city" id="openWeather-city" class="form-control bar-chart-control"
+ (change)="onConfigChanged($event)" [(ngModel)]="weatherAPIConfig.city"
+ placeholder='City (blank=<device location>)' />
  </c8y-form-group>
 </ng-form>
diff --git a/weather-forecast-widget/weather-forecast-widget.config.component.ts b/weather-forecast-widget/weather-forecast-widget.config.component.ts
@@ -48,10 +48,11 @@ export class WeatherForecastWidgetConfig implements OnInit {
 
  if (_.has(this.config, 'weatherAPIConfig')) {
  this.weatherAPIConfig = _.get(this.config, 'weatherAPIConfig');
- }}
+ }
+ }
 
  onConfigChanged($event: Event): void {
- if (!this.weatherAPIConfig.apikey ) {
+ if (!this.weatherAPIConfig.apikey) {
  return;
  }
  _.set(this.config, 'weatherAPIConfig', { ...this.weatherAPIConfig });

diff --git a/weather-forecast-widget/weather-forecast-widget.module.ts b/weather-forecast-widget/weather-forecast-widget.module.ts
@@ -34,7 +34,7 @@ import { HttpClientModule } from "@angular/common/http";
  useValue: {
  id: 'global.presales.weather.forecast.widget',
  label: 'Weather Forecast',
- description: 'Provides a 5-day weather forecast using OpenWeatherAPI',
+ description: 'The Weather Forecast Widget displays a 5-day weather forecast using weather data provided by the OpenWeatherAPI.',
  component: WeatherForecastWidget,
  configComponent: WeatherForecastWidgetConfig,
  previewImage: require("../styles/previewImage.png")