From d516bb02fa2ae3540e3f20e7e63eaf9df56eb58e Mon Sep 17 00:00:00 2001
From: Alicia Sykes <sykes.alicia@gmail.com>
Date: Mon, 3 Jan 2022 09:39:51 +0000
Subject: [PATCH] :speech_balloon: Adds option for clock to have
 `customCityName` (#402)

---
 docs/widgets.md                  |  1 +
 src/components/Widgets/Clock.vue | 11 +++++------
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/widgets.md b/docs/widgets.md
index 7829ce88..b35c23c6 100644
--- a/docs/widgets.md
+++ b/docs/widgets.md
@@ -69,6 +69,7 @@ A simple, live-updating time and date widget with time-zone support. All fields
 --- | --- | --- | ---
 **`timeZone`** | `string` |  _Optional_ | The time zone to display date and time in.<br> Specified as Region/City, for example: `Australia/Melbourne`. See the [Time Zone DB](https://timezonedb.com/time-zones) for a full list of supported TZs. Defaults to the browser / device's local time
 **`format`** | `string` | _Optional_ | A country code for displaying the date and time in local format.<br>Specified as `[ISO-3166]-[ISO-639]`, for example: `en-AU`. See [here](https://www.fincher.org/Utilities/CountryLanguageList.shtml) for a full list of locales. Defaults to the browser / device's region
+**`customCityName`** | `string` |  _Optional_ | By default the city from the time-zone is shown, but setting this value will override that text
 **`hideDate`** | `boolean` |  _Optional_ | If set to `true`, the date and city will not be shown. Defaults to `false`
 
 ##### Example
diff --git a/src/components/Widgets/Clock.vue b/src/components/Widgets/Clock.vue
index 04bae1cc..d4aa0aea 100644
--- a/src/components/Widgets/Clock.vue
+++ b/src/components/Widgets/Clock.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="clock">
   <div class="upper" v-if="!options.hideDate">
-    <p class="city">{{ timeZone | getCity }}</p>
+    <p class="city">{{ cityName }}</p>
     <p class="date">{{ date }}</p>
   </div>
   <p class="time">{{ time }}</p>
@@ -31,11 +31,10 @@ export default {
       if (this.options.format) return this.options.format;
       return navigator.language;
     },
-  },
-  filters: {
-    /* For a given time zone, return just the city name */
-    getCity(timeZone) {
-      return timeZone.split('/')[1].replaceAll('_', ' ');
+    /* Get city name from time-zone, or return users custom city name */
+    cityName() {
+      if (this.options.customCityName) return this.options.customCityName;
+      return this.timeZone.split('/')[1].replaceAll('_', ' ');
     },
   },
   methods: {