From 91739d513ac224abb8b12a406d6306a048e28725 Mon Sep 17 00:00:00 2001 From: James Lyne Date: Mon, 17 Jan 2022 15:15:00 +0000 Subject: [PATCH] Markers sidebar section --- index.html | 7 + messages.ts | 7 + package-lock.json | 42 ++++++ package.json | 2 + src/App.vue | 3 + src/assets/icons/marker_area.svg | 1 + src/assets/icons/marker_circle.svg | 1 + src/assets/icons/marker_line.svg | 1 + src/assets/icons/marker_point.svg | 3 + src/components/Sidebar.vue | 16 +++ src/components/list/MarkerList.vue | 168 ++++++++++++++++++++++ src/components/list/MarkerListItem.vue | 120 ++++++++++++++++ src/components/list/MarkerSetList.vue | 162 +++++++++++++++++++++ src/components/sidebar/MarkersSection.vue | 61 ++++++++ src/index.d.ts | 2 +- src/scss/_mixins.scss | 7 + src/scss/leaflet/_markers.scss | 2 +- src/scss/style.scss | 7 +- src/store/actions.ts | 1 + src/store/state.ts | 1 + 20 files changed, 611 insertions(+), 3 deletions(-) create mode 100644 src/assets/icons/marker_area.svg create mode 100644 src/assets/icons/marker_circle.svg create mode 100644 src/assets/icons/marker_line.svg create mode 100644 src/assets/icons/marker_point.svg create mode 100644 src/components/list/MarkerList.vue create mode 100644 src/components/list/MarkerListItem.vue create mode 100644 src/components/list/MarkerSetList.vue create mode 100644 src/components/sidebar/MarkersSection.vue diff --git a/index.html b/index.html index 5dacfe5..3c336f0 100644 --- a/index.html +++ b/index.html @@ -92,6 +92,12 @@ chatErrorUnknown: 'Unexpected error while sending chat message', chatErrorDisabled: 'Chat is not enabled', serversHeading: 'Servers', + markersHeading: 'Markers', + markersSearchPlaceholder: 'Search markers...', + markersSkeleton: 'No markers exist for the current world', + markersSetSkeleton: 'This marker set is empty', + markersSearchSkeleton: 'No matching markers found', + markersUnnamed: '(Unnamed marker)', worldsSkeleton: 'No maps have been configured', playersSkeleton: 'No players are currently online', playersTitle: 'Click to center on player\nDouble-click to follow player', @@ -142,6 +148,7 @@ logoutSuccess: 'Logged out successfully', closeTitle: 'Close', + showMore: 'Show more' }, ui: { diff --git a/messages.ts b/messages.ts index 1f1e99d..4df4318 100644 --- a/messages.ts +++ b/messages.ts @@ -23,6 +23,12 @@ export const globalMessages = [ 'chatErrorDisabled', 'chatErrorUnknown', 'serversHeading', + 'markersHeading', + 'markersSkeleton', + 'markersSetSkeleton', + 'markersUnnamed', + 'markersSearchPlaceholder', + 'markersSearchSkeleton', 'worldsSkeleton', 'playersSkeleton', 'playersTitle', @@ -67,6 +73,7 @@ export const globalMessages = [ 'logoutErrorUnknown', 'logoutSuccess', 'closeTitle', + 'showMore', ] as const; export const serverMessages = [ diff --git a/package-lock.json b/package-lock.json index 535d984..623d52e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12,6 +12,7 @@ "@kyvg/vue3-notification": "2.3.0", "@soerenmartius/vue3-clipboard": "^0.1", "leaflet": "git+https://github.com/JLyne/leaflet.git", + "lodash.debounce": "^4.0.8", "modern-normalize": "^1.1.0", "vue": "^3.2.21", "vuex": "^4.0" @@ -21,6 +22,7 @@ "@types/jest": "^27.4.0", "@types/jest-in-case": "^1.0.5", "@types/leaflet": "1.7.8", + "@types/lodash.debounce": "^4.0.6", "@types/node": "^17.0.8", "@typescript-eslint/eslint-plugin": "^5.9", "@typescript-eslint/parser": "^5.9", @@ -1611,6 +1613,21 @@ "@types/geojson": "*" } }, + "node_modules/@types/lodash": { + "version": "4.14.178", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz", + "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==", + "dev": true + }, + "node_modules/@types/lodash.debounce": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz", + "integrity": "sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==", + "dev": true, + "dependencies": { + "@types/lodash": "*" + } + }, "node_modules/@types/minimatch": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", @@ -8257,6 +8274,11 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "node_modules/lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + }, "node_modules/lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", @@ -13347,6 +13369,21 @@ "@types/geojson": "*" } }, + "@types/lodash": { + "version": "4.14.178", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.178.tgz", + "integrity": "sha512-0d5Wd09ItQWH1qFbEyQ7oTQ3GZrMfth5JkbN3EvTKLXcHLRDSXeLnlvlOn0wvxVIwK5o2M8JzP/OWz7T3NRsbw==", + "dev": true + }, + "@types/lodash.debounce": { + "version": "4.0.6", + "resolved": "https://registry.npmjs.org/@types/lodash.debounce/-/lodash.debounce-4.0.6.tgz", + "integrity": "sha512-4WTmnnhCfDvvuLMaF3KV4Qfki93KebocUF45msxhYyjMttZDQYzHkO639ohhk8+oco2cluAFL3t5+Jn4mleylQ==", + "dev": true, + "requires": { + "@types/lodash": "*" + } + }, "@types/minimatch": { "version": "3.0.5", "resolved": "https://registry.npmjs.org/@types/minimatch/-/minimatch-3.0.5.tgz", @@ -18368,6 +18405,11 @@ "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==", "dev": true }, + "lodash.debounce": { + "version": "4.0.8", + "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz", + "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=" + }, "lodash.memoize": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz", diff --git a/package.json b/package.json index d9bd82d..2afee29 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "@kyvg/vue3-notification": "2.3.0", "@soerenmartius/vue3-clipboard": "^0.1", "leaflet": "git+https://github.com/JLyne/leaflet.git", + "lodash.debounce": "^4.0.8", "modern-normalize": "^1.1.0", "vue": "^3.2.21", "vuex": "^4.0" @@ -27,6 +28,7 @@ "@types/jest": "^27.4.0", "@types/jest-in-case": "^1.0.5", "@types/leaflet": "1.7.8", + "@types/lodash.debounce": "^4.0.6", "@types/node": "^17.0.8", "@typescript-eslint/eslint-plugin": "^5.9", "@typescript-eslint/parser": "^5.9", diff --git a/src/App.vue b/src/App.vue index 87cd279..be95d5e 100644 --- a/src/App.vue +++ b/src/App.vue @@ -143,6 +143,9 @@ export default defineComponent({ case 'M': element = 'maps'; break; + case 'I': + element = 'markers'; + break; case 'C': element = 'chat'; break; diff --git a/src/assets/icons/marker_area.svg b/src/assets/icons/marker_area.svg new file mode 100644 index 0000000..0bcd733 --- /dev/null +++ b/src/assets/icons/marker_area.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/marker_circle.svg b/src/assets/icons/marker_circle.svg new file mode 100644 index 0000000..4ad6a00 --- /dev/null +++ b/src/assets/icons/marker_circle.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/marker_line.svg b/src/assets/icons/marker_line.svg new file mode 100644 index 0000000..ab5d750 --- /dev/null +++ b/src/assets/icons/marker_line.svg @@ -0,0 +1 @@ + diff --git a/src/assets/icons/marker_point.svg b/src/assets/icons/marker_point.svg new file mode 100644 index 0000000..5ad9fae --- /dev/null +++ b/src/assets/icons/marker_point.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index b878169..5e49634 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -24,6 +24,13 @@ @click="handleSectionClick" @keydown="handleSectionKeydown"> +