new node icon WIP

src/components/NodesMap.vue

@@ -8,10 +8,14 @@
 import 'leaflet/dist/leaflet.css';
 import leaflet from 'leaflet';
 import markerCluster from 'leaflet.markercluster'; // eslint-disable-line
-import IconOrange from '../styles/img/connector_orange.png';
-import IconBlue from '../styles/img/connector_blue.png';
-import IconGreen from '../styles/img/connector_green.png';
-import IconPink from '../styles/img/connector_pink.png';
+import IconApiVoter from '../styles/img/pin-api-voter.png';
+import IconApi from '../styles/img/pin-api.png';
+import IconPeerApiVoter from '../styles/img/pin-peer-api-voter.png';
+import IconPeerApi from '../styles/img/pin-peer-api.png';
+import IconPeerVoter from '../styles/img/pin-peer-voter.png';
+import IconPeer from '../styles/img/pin-peer.png';
+import IconVoter from '../styles/img/pin-voter.png';
+import Constants from '../config/constants';
 
 export default {
 	props: {
@@ -66,7 +70,7 @@ export default {
 		},
 
 		button1Style() {
-			return `border-radius: 3px; 
+			return `border-radius: 3px;
                 color: #fff;
                 background-color: #5200c6;
                 font-family: Noto Sans;
@@ -143,10 +147,13 @@ export default {
 				});
 			};
 
-			const iconPeer = getIcon(IconBlue);
-			const iconVoting = getIcon(IconGreen);
-			const iconApi = getIcon(IconPink);
-			const iconApiVoting = getIcon(IconOrange);
+			const iconPeer = getIcon(IconPeer);
+			const iconVoter = getIcon(IconVoter);
+			const iconApi = getIcon(IconApi);
+			const iconApiVoter = getIcon(IconApiVoter);
+			const iconPeerApiVoter = getIcon(IconPeerApiVoter);
+			const iconPeerApi = getIcon(IconPeerApi);
+			const iconPeerVoter = getIcon(IconPeerVoter);
 
 			const markerClusters = leaflet.markerClusterGroup({
 				// iconCreateFunction: this.createClusterGroup,
@@ -157,9 +164,7 @@ export default {
 				const popup =
                     '<br/><span title="' + node.friendlyName + '"><b>' + this.getNameByKey('friendlyName') + ':</b> ' + this.formatText(node.friendlyName) +
                     '</span><br/><span title="' + node.host + '"><b>' + this.getNameByKey('host') + ':</b> ' + this.formatText(node.host) +
-                    '</span><br/><span title="' + node.host + '"><b>' + this.getNameByKey('roles') + ':</b> ' + this.formatText(node.roles) +
-                    '</span><br/><span title="' + node.network + '"><b>' + this.getNameByKey('network') + ':</b> ' + this.formatText(node.network) +
-                    '</span><br/><span title="' + node.address + '"><b>' + this.getNameByKey('address') + ':</b> ' + this.formatText(node.address) +
+                    '</span><br/><span title="' + node.address + '"><b>' + this.getNameByKey('address') + ':</b> ' + node.address +
                     '</span><br/><span title="' + node.location + '"><b>' + this.getNameByKey('location') + ':</b> ' + this.formatText(node.location) +
                     '</span><br/><span style="' + this.buttonContainerStyle + '">' +
                     '<a style="' + this.button1Style + '" href="' + this.getPageHref('node', node.publicKey) + '">' + this.getNameByKey('nodeDetailTitle') +
@@ -170,25 +175,40 @@ export default {
 					let icon = iconPeer;
 
 					switch (node.rolesRaw) {
-					case 2:
-					case 3:
+					case Constants.ROLE_TYPE_RAW.API:
 						icon = iconApi;
 						break;
-					case 4:
-					case 5:
-						icon = iconVoting;
+					case Constants.ROLE_TYPE_RAW.PEER_API:
+						icon = iconPeerApi;
+						break;
+					case Constants.ROLE_TYPE_RAW.PEER_VOTER:
+						icon = iconPeerVoter;
+						break;
+					case Constants.ROLE_TYPE_RAW.VOTER:
+						icon = iconVoter;
+						break;
+					case Constants.ROLE_TYPE_RAW.API_VOTER:
+						icon = iconApiVoter;
 						break;
-					case 6:
-					case 7:
-						icon = iconApiVoting;
+					case Constants.ROLE_TYPE_RAW.PEER_API_VOTER:
+						icon = iconPeerApiVoter;
 						break;
 					}
 
 					const m = leaflet.marker([node.coordinates.latitude, node.coordinates.longitude], { icon });
 
-					if (this.showPopup === true)
+					if (this.showPopup === true) {
 						m.bindPopup(popup);
 
+						m.on('mouseover', function (e) {
+							this.openPopup();
+						});
+
+						m.on('mouseout', function (e) {
+							this.closePopup();
+						});
+					}
+
 					markerClusters.addLayer(m);
 				}
 			}

src/components/fields/IconField.vue

@@ -0,0 +1,89 @@
+/*
+ *
+ * (C) Symbol Contributors 2021
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License ");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ */
+
+<template>
+	<div class="icon-container">
+		<span class="icon" v-for="(value, key) in displayIcons" :key="'icon_' + key">
+			<img
+				v-if="value"
+				:title="translate(key)"
+				:src="iconUrl(key)"
+				width="20px"
+				height="20px"
+				alt="icon"
+			/>
+		</span>
+	</div>
+</template>
+
+<script>
+import IconPeerNode from '../../styles/img/peer-node.png';
+import IconApiNode from '../../styles/img/api-node.png';
+import IconVotingNode from '../../styles/img/voting-node.png';
+
+export default {
+	name: 'IconField',
+
+	props: {
+		value: {
+			type: Object,
+			required: true
+		}
+	},
+
+	data() {
+		return {
+			IconPeerNode,
+			IconApiNode,
+			IconVotingNode
+		};
+	},
+
+	computed: {
+		displayIcons() {
+			const filtered = Object.entries(this.value).filter(([key, value]) => value);
+
+			return Object.fromEntries(filtered);
+		}
+	},
+
+	methods: {
+		translate(value) {
+			return this.$store.getters['ui/getNameByKey'](value);
+		},
+
+		iconUrl(icon) {
+			switch (icon) {
+			case 'peer':
+				return this.IconPeerNode;
+			case 'api':
+				return this.IconApiNode;
+			case 'voting':
+				return this.IconVotingNode;
+			default:
+			}
+		}
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.icon {
+    padding: 0 5px;
+}
+</style>

src/components/tables/TableListView.vue

@@ -42,6 +42,7 @@
 							<Harvester v-else-if="itemKey === 'harvester'" :value="item" />
 							<EpochInfoField v-else-if="itemKey === 'epochInfo'" :value="item" />
 							<MosaicFlagsField v-else-if="itemKey === 'mosaicFlags'" :value="item" />
+							<IconField v-else-if="itemKey === 'rolesIcon'" :value="item" />
 
 							<div v-else-if="isAggregateInnerTransaction(itemKey)">
 								<b-link v-b-modal="'tlv_r'+rowIndex">Show Detail</b-link>
@@ -116,6 +117,7 @@ import SoftwareVersion from '@/components/fields/SoftwareVersion.vue';
 import Harvester from '@/components/fields/Harvester.vue';
 import EpochInfoField from '@/components/fields/EpochInfoField.vue';
 import MosaicFlagsField from '@/components/fields/MosaicFlagsField.vue';
+import IconField from '@/components/fields/IconField.vue';
 
 export default {
 	extends: TableView,
@@ -136,7 +138,8 @@ export default {
 		SoftwareVersion,
 		Harvester,
 		EpochInfoField,
-		MosaicFlagsField
+		MosaicFlagsField,
+		IconField
 	},
 
 	props: {

src/components/widgets/NodeStatsWidget.vue

@@ -38,10 +38,6 @@
 import Card from '@/components/containers/Card.vue';
 import ButtonMore from '@/components/controls/ButtonMore.vue';
 import Constants from '../../config/constants';
-import IconOrange from '../../styles/img/connector_orange.png';
-import IconBlue from '../../styles/img/connector_blue.png';
-import IconGreen from '../../styles/img/connector_green.png';
-import IconPink from '../../styles/img/connector_pink.png';
 
 export default {
 	components: {
@@ -78,50 +74,35 @@ export default {
 			return [
 				{
 					name: this.getNameByKey('allNodes'),
-					count: Array.from(Array(8).keys()).reduce((acc, val) => acc + (data[val] || 0)),
-					icon: IconBlue
+					count: Array.from(Array(8).keys()).reduce((acc, val) => acc + (data[val] || 0))
 				},
 				{
 					name: Constants.RoleType[1],
-					count: data[1] || 0,
-					icon: IconBlue,
-					color: 'blue'
+					count: data[1] || 0
 				},
 				{
 					name: Constants.RoleType[2],
-					count: data[2] || 0,
-					icon: IconPink,
-					color: 'pink'
+					count: data[2] || 0
 				},
 				{
 					name: Constants.RoleType[3],
-					count: data[3] || 0,
-					icon: IconPink,
-					color: 'pink'
+					count: data[3] || 0
 				},
 				{
 					name: Constants.RoleType[4],
-					count: data[4] || 0,
-					icon: IconGreen,
-					color: 'green'
+					count: data[4] || 0
 				},
 				{
 					name: Constants.RoleType[5],
-					count: data[5] || 0,
-					icon: IconGreen,
-					color: 'green'
+					count: data[5] || 0
 				},
 				{
 					name: Constants.RoleType[6],
-					count: data[6] || 0,
-					icon: IconOrange,
-					color: 'orange'
+					count: data[6] || 0
 				},
 				{
 					name: Constants.RoleType[7],
-					count: data[7] || 0,
-					icon: IconOrange,
-					color: 'orange'
+					count: data[7] || 0
 				}
 			];
 		},