Add tooltip

2021-01-25 20:54:57 -05:00
parent 668ed3b1a2
commit 67a3e4e330
6 changed files with 172 additions and 19 deletions
--- a/web/app/src/components/Tooltip.vue
+++ b/web/app/src/components/Tooltip.vue
@@ -0,0 +1,135 @@
+<template>
+  <div id="tooltip" ref="tooltip" :class="hidden ? 'invisible' : ''" :style="'top:' + top + 'px; left:' + left + 'px'">
+    <slot v-if="result">
+      <div class="tooltip-title">Timestamp:</div>
+      <code id="tooltip-timestamp">{{ prettifyTimestamp(result.timestamp) }}</code>
+      <div class="tooltip-title">Response time:</div>
+      <code id="tooltip-response-time">{{ (result.duration / 1000000).toFixed(0) }}ms</code>
+      <div class="tooltip-title">Conditions:</div>
+      <code id="tooltip-conditions">
+        <slot v-for="conditionResult in result.conditionResults" :key="conditionResult">
+          {{ conditionResult.success ? "&#10003;" : "X" }} ~ {{ conditionResult.condition }}<br/>
+        </slot>
+      </code>
+      <div id="tooltip-errors-container" v-if="result.errors && result.errors.length">
+        <div class="tooltip-title">Errors:</div>
+        <code id="tooltip-errors">
+          <slot v-for="error in result.errors" :key="error">
+            - {{ error }}<br/>
+          </slot>
+        </code>
+      </div>
+    </slot>
+  </div>
+</template>
+
+
+<script>
+export default {
+  name: 'Services',
+  props: {
+    event: Event,
+    result: Object
+  },
+  methods: {
+    prettifyTimestamp(timestamp) {
+      let date = new Date(timestamp);
+      let YYYY = date.getFullYear();
+      let MM = ((date.getMonth() + 1) < 10 ? "0" : "") + "" + (date.getMonth() + 1);
+      let DD = ((date.getDate()) < 10 ? "0" : "") + "" + (date.getDate());
+      let hh = ((date.getHours()) < 10 ? "0" : "") + "" + (date.getHours());
+      let mm = ((date.getMinutes()) < 10 ? "0" : "") + "" + (date.getMinutes());
+      let ss = ((date.getSeconds()) < 10 ? "0" : "") + "" + (date.getSeconds());
+      return YYYY + "-" + MM + "-" + DD + " " + hh + ":" + mm + ":" + ss;
+    },
+    htmlEntities(s) {
+      return String(s)
+          .replace(/&/g, '&amp;')
+          .replace(/</g, '&lt;')
+          .replace(/>/g, '&gt;')
+          .replace(/"/g, '&quot;')
+          .replace(/'/g, '&apos;');
+    },
+    reposition() {
+      if (this.event && this.event.type) {
+        if (this.event.type === 'mouseenter') {
+          let targetTopPosition = this.event.target.getBoundingClientRect().y + 30;
+          let targetLeftPosition = this.event.target.getBoundingClientRect().x;
+          let tooltipBoundingClientRect = this.$refs.tooltip.getBoundingClientRect();
+          if (targetLeftPosition + window.scrollX + tooltipBoundingClientRect.width + 50 > document.body.getBoundingClientRect().width) {
+            targetLeftPosition = this.event.target.getBoundingClientRect().x - tooltipBoundingClientRect.width + this.event.target.getBoundingClientRect().width;
+            if (targetLeftPosition < 0) {
+              targetLeftPosition += -targetLeftPosition;
+            }
+          }
+          if (targetTopPosition + window.scrollY + tooltipBoundingClientRect.height + 50 > document.body.getBoundingClientRect().height && targetTopPosition >= 0) {
+            targetTopPosition = this.event.target.getBoundingClientRect().y - (tooltipBoundingClientRect.height + 10);
+            if (targetTopPosition < 0) {
+              targetTopPosition = this.event.target.getBoundingClientRect().y + 30;
+            }
+          }
+          this.top = targetTopPosition;
+          this.left = targetLeftPosition;
+        } else if (this.event.type === 'mouseleave') {
+          this.hidden = true;
+        }
+      }
+    }
+  },
+  watch: {
+    event: function (value) {
+      if (value && value.type) {
+        if (value.type === 'mouseenter') {
+          this.hidden = false;
+        } else if (value.type === 'mouseleave') {
+          this.hidden = true;
+        }
+      }
+    }
+  },
+  updated() {
+    this.reposition();
+  },
+  created() {
+    this.reposition();
+  },
+  data() {
+    return {
+      hidden: false,
+      top: 0,
+      left: 0
+    }
+  }
+}
+</script>
+
+
+<style>
+#tooltip {
+  position: fixed;
+  background-color: white;
+  border: 1px solid lightgray;
+  border-radius: 4px;
+  padding: 6px;
+  font-size: 13px;
+}
+
+#tooltip code {
+  color: #212529;
+  line-height: 1;
+}
+
+#tooltip .tooltip-title {
+  font-weight: bold;
+  margin-bottom: 0;
+  display: block;
+}
+
+#tooltip .tooltip-title {
+  margin-top: 8px;
+}
+
+#tooltip > .tooltip-title:first-child {
+  margin-top: 0;
+}
+</style>