everything works and is styled

src/components/RelayListComponent.vue

@@ -1,9 +1,21 @@
 <template>
-  <tr><td colspan="11"><h2><span class="indicator badge readwrite">{{ query('public').length }}</span>Public</h2></td></tr>
-  <tr class="online public"  v-if="query('public').length > 0">
-    <th class="table-column status-indicator"></th>
-    <th class="table-column relay"></th>
-    <th class="table-column verified"><span class="verified-shape-wrapper"><span class="shape verified"></span></span></th>
+  <tr :class="getHeadingClass(section)">
+    <td colspan="11">
+      <h2><span class="indicator badge">{{ query(section).length }}</span>{{ section }}</h2>
+    </td>
+  </tr>
+  <tr :class="getHeadingClass(section)"  v-if="query(section).length > 0">
+    <th class="table-column status-indicator">
+
+    </th>
+    <th class="table-column relay">
+
+    </th>
+    <th class="table-column verified">
+      <span class="verified-shape-wrapper">
+        <span class="shape verified"></span>
+      </span>
+    </th>
     <!-- <th class="table-column location" v-tooltip:top.tooltip="Ping">
       🌎
     </th> -->
@@ -23,14 +35,14 @@
       ℹ️
     </th>
     <th class="table-column nip nip-15" v-tooltip:top.tooltip="'Does the relay support NIP-15'">
-      NIP-15
+      <span>NIP-15</span>
     </th>
     <th class="table-column nip nip-20" v-tooltip:top.tooltip="'Does the relay support NIP-20'">
-      NIP-20
+      <span>NIP-20</span>
     </th>
     <!-- <th>FILTER: LIMIT</th> -->
   </tr>
-  <tr v-for="relay in query('public')" :key="{relay}" :class="getLoadingClass(relay)" class="online public">
+  <tr v-for="relay in query(section)" :key="{relay}" :class="getResultClass(relay)" class="relay">
     <RelaySingleComponent
       :relay="relay"
       :result="result[relay]"
@@ -52,6 +64,11 @@ export default defineComponent({
     RelaySingleComponent
   },
   props: {
+    section: {
+      type: String,
+      required: true,
+      default: "publik"
+    },
     relays:{
       type: Object,
       default(rawProps){
@@ -97,7 +114,25 @@ export default defineComponent({
   data() {
     return {}
   },
+  computed: {
+  },
   methods: {
+    getHeadingClass(section){
+      return {
+        online: this.section != "offline",
+        public: this.section == "public",
+        offline: this.section == "offline",
+        restricted: this.section == "restricted"
+      }
+    },
+    getResultClass (relay) {
+      return {
+        loaded: this.result?.[relay]?.state == 'complete',
+        online: this.section != "offline",
+        offline: this.section == "offline",
+        public: this.section == "public"
+      }
+    },
     query (group) {
       let unordered,
           filterFn
@@ -114,9 +149,15 @@ export default defineComponent({
 
       return []
     },
-    getLoadingClass (url) {
-      return this.result?.[url]?.state == 'complete' ? "relay loaded" : "relay"
-    },
+
   }
 })
 </script>
+
+<style lang='css' scoped>
+  .nip span {
+    text-transform: uppercase;
+    letter-spacing:-1px;
+    font-size:12px;
+  }
+</style>

src/components/RelaySingleComponent.vue

@@ -1,15 +1,38 @@
 <template>
-  <td :key="generateKey(relay, 'aggregate')"><span :class="getAggregateResultClass(relay)"></span></td>
-  <td class="left-align relay-url" @click="copy(relay)">{{ relay }}</td>
-  <td>
-    <span v-tooltip:top.tooltip="nip05List(relay)"> <span class="verified-shape-wrapper" v-if="result.nips[5]"><span class="shape verified"></span></span></span>
+  <td class="status-indicator" :key="generateKey(relay, 'aggregate')">
+    <span :class="result.aggregate" class="aggregate indicator">
+        <span></span>
+        <span></span>
+    </span>
   </td>
+
+  <td class="relay left-align relay-url" @click="copy(relay)">
+    {{ relay }}
+  </td>
+
+  <td class="verified">
+    <span v-tooltip:top.tooltip="nip05List()"> <span class="verified-shape-wrapper" v-if="result.nips[5]"><span class="shape verified"></span></span></span>
+  </td>
+
   <!-- <td>{{result.flag}}</td> -->
-  <td><span>{{ result.latency.final }}<span v-if="result.check.latency">ms</span></span></td>
-  <td :key="generateKey(relay, 'check.connect')"><span :class="getResultClass(relay, 'connect')"></span></td>
-  <td :key="generateKey(relay, 'check.read')"><span :class="getResultClass(relay, 'read')"></span></td>
-  <td :key="generateKey(relay, 'check.write')"><span :class="getResultClass(relay, 'write')"></span></td>
-  <td>
+
+  <td class="latency">
+    <span>{{ result.latency.final }}<span v-if="result.check.latency">ms</span></span>
+  </td>
+
+  <td class="connect" :key="generateKey(relay, 'check.connect')">
+    <span :class="getResultClass(relay, 'connect')"></span>
+  </td>
+
+  <td class="read" :key="generateKey(relay, 'check.read')">
+    <span :class="getResultClass(relay, 'read')"></span>
+  </td>
+
+  <td class="write" :key="generateKey(relay, 'check.write')">
+    <span :class="getResultClass(relay, 'write')"></span>
+  </td>
+
+  <td class="info">
     <ul v-if="result.observations && result.observations.length">
       <li class="observation" v-for="(alert) in result.observations" :key="generateKey(relay, alert.description)">
         <span v-tooltip:top.tooltip="alert.description" :class="alert.type" v-if="alert.type == 'notice'">✉️</span>
@@ -17,14 +40,20 @@
       </li>
     </ul>
   </td>
-  <td>{{ setCheck(connection.nip(15)) }}</td>
-  <td>{{ setCheck(connection.nip(20)) }}</td>
+
+  <td class="nip nip-15">
+    {{ setCheck(connection.nip(15)) }}
+  </td>
+
+  <td class="nip nip-20">
+    {{ setCheck(connection.nip(20)) }}
+  </td>
 </template>
 
 <script>
 /* eslint-disable */
 import { defineComponent} from 'vue'
-import InspectorRelayResult from 'nostr-relay-inspector'
+// import InspectorRelayResult from 'nostr-relay-inspector'
 
 export default defineComponent({
   name: 'RelaySingleComponent',
@@ -34,7 +63,7 @@ export default defineComponent({
     result: {
       type: Object,
       default(rawProps){
-        return InspectorRelayResult
+        return {}
       }
     },
     showColumns: {
@@ -64,26 +93,6 @@ export default defineComponent({
     return {}
   },
   methods: {
-     getAggregateResultClass (url) {
-       let result = ''
-       if (this.result?.aggregate == null) {
-         result = 'unprocessed'
-       }
-       else if (this.result?.aggregate == 'public') {
-         result = 'readwrite'
-       }
-       else if (this.result?.aggregate == 'restricted') {
-         if(this.result?.check.write) {
-           result = 'write-only'
-         } else {
-           result = 'read-only'
-         }
-       }
-       else if (this.result?.aggregate == 'offline') {
-         result = 'offline'
-       }
-       return `aggregate indicator ${result}`
-     },
      getResultClass (url, key) {
 
        let result = this.result?.check?.[key] === true
@@ -113,8 +122,10 @@ export default defineComponent({
      setCaution (bool) {
        return !bool ? '⚠️' : ''
      },
-     nip05List (url) {
+     nip05List () {
+       // console.log(this.result)
        let string = ''
+
        if(this.result.nips[5]) {
          string = `${string}Relay domain contains NIP-05 verification data for:`
          let users = Object.entries(this.result.nips[5]),

src/components/RelayTableComponent.vue

@@ -17,114 +17,32 @@
         <div class="block">
           <table>
             <RelayListComponent
+              section="public"
+              :relays="relays"
+              :result="result"
+              :messages="messages"
+              :alerts="alerts"
+              :connections="connections"
+            />
+
+            <RelayListComponent
+              section="restricted"
+              :relays="relays"
+              :result="result"
+              :messages="messages"
+              :alerts="alerts"
+              :connections="connections"
+            />
+
+            <RelayListComponent
+              section="offline"
               :relays="relays"
               :result="result"
               :messages="messages"
               :alerts="alerts"
               :connections="connections"
             />
-          <!-- </table>
-        </div> -->
-      <!-- </column>
 
-      <column :xs="12" :md="12" :lg="6"> -->
-        <!-- <div class="block"> -->
-            <tr><td colspan="11"><h2><span class="indicator badge write-only">{{ query('restricted').length }}</span>Restricted</h2></td></tr>
-          <!-- <table class="online"> -->
-            <tr class="online"  v-if="query('restricted').length > 0">
-              <th class="table-column status-indicator"></th>
-              <th class="table-column relay"></th>
-              <th class="table-column verified"><span class="verified-shape-wrapper"><span class="shape verified"></span></span></th>
-              <!-- <th class="table-column location" v-tooltip:top.tooltip="Ping">
-                🌎
-              </th> -->
-              <th class="table-column latency" v-tooltip:top.tooltip="'Relay Latency on Read'">
-                ⌛️
-              </th>
-              <th class="table-column connect" v-tooltip:top.tooltip="'Relay connection status'">
-                🔌
-              </th>
-              <th class="table-column read" v-tooltip:top.tooltip="'Relay read status'">
-                👁️‍🗨️
-              </th>
-              <th class="table-column write" v-tooltip:top.tooltip="'Relay write status'">
-                ✏️
-              </th>
-              <th class="table-column info" v-tooltip:top.tooltip="'Additional information detected regarding the relay during processing'">
-                ℹ️
-              </th>
-              <th class="table-column nip nip-15" v-tooltip:top.tooltip="'Does the relay support NIP-15'">
-                NIP-15
-              </th>
-              <th class="table-column nip nip-20" v-tooltip:top.tooltip="'Does the relay support NIP-20'">
-                NIP-20
-              </th>
-            </tr>
-            <tr v-for="relay in query('restricted')" :key="{relay}" :class="getLoadingClass(relay)" class="online">
-              <td :key="generateKey(relay, 'aggregate')"><span :class="getAggregateResultClass(relay)"><span></span><span></span></span></td>
-              <td class="left-align relay-url" @click="copy(relay)">{{ relay }}</td>
-              <td></td>
-              <!-- <td>{{result[relay].flag}}</td> -->
-              <td><span>{{ result[relay].latency.final }}<span v-if="result[relay].check.latency">ms</span></span></td>
-              <td :key="generateKey(relay, 'check.connect')"><span :class="getResultClass(relay, 'connect')"></span></td>
-              <td :key="generateKey(relay, 'check.read')"><span :class="getResultClass(relay, 'read')"></span></td>
-              <td :key="generateKey(relay, 'check.write')"><span :class="getResultClass(relay, 'write')"></span></td>
-              <td>
-                <ul v-if="result[relay].observations && result[relay].observations.length">
-                  <li class="observation" v-for="(alert) in result[relay].observations" :key="generateKey(relay, alert.description)">
-                    <span v-tooltip:top.tooltip="alert.description" :class="alert.type" v-if="alert.type == 'notice'">✉️</span>
-                    <span v-tooltip:top.tooltip="alert.description" :class="alert.type" v-if="alert.type == 'caution'">⚠️</span>
-                  </li>
-                </ul>
-              </td>
-              <td>{{ setCheck(connections[relay].nip(15)) }}</td>
-              <td>{{ setCheck(connections[relay].nip(20)) }}</td>
-            </tr>
-          <!-- </table> -->
-        <!-- </div> -->
-        <!-- <div class="block"> -->
-          <tr> <td colspan="11"><h2><span class="indicator badge offline">{{ query('offline').length }}</span>Offline</h2></td></tr>
-          <!-- <table v-if="query('offline').length > 0"> -->
-            <tr class="offline"  v-if="query('offline').length > 0">
-              <th class="table-column status-indicator"></th>
-              <th class="table-column relay"></th>
-              <th class="table-column verified"></th>
-              <!-- <th class="table-column location"></th> -->
-              <th></th>
-              <th class="table-column connect" v-tooltip:top.tooltip="'Relay connection status'">
-                🔌
-              </th>
-              <th class="table-column read" v-tooltip:top.tooltip="'Relay read status'">
-                👁️‍🗨️
-              </th>
-              <th class="table-column write" v-tooltip:top.tooltip="'Relay write status'">
-                ✏️
-              </th>
-              <th class="table-column info" v-tooltip:top.tooltip="'Additional information detected regarding the relay during processing'">
-                ℹ️
-              </th>
-              <th></th>
-              <th></th>
-            </tr>
-            <tr v-for="relay in query('offline')" :key="{relay}" :class="getLoadingClass(relay)">
-              <td :key="generateKey(relay, 'aggregate')"><span :class="getAggregateResultClass(relay)"></span></td>
-              <td class="left-align relay-url">{{ relay }}</td>
-              <!-- <td></td> -->
-              <td></td>
-              <td></td>
-              <td :key="generateKey(relay, 'check.connect')"><span :class="getResultClass(relay, 'connect')"></span></td>
-              <td :key="generateKey(relay, 'check.read')"><span :class="getResultClass(relay, 'read')"></span></td>
-              <td :key="generateKey(relay, 'check.write')"><span :class="getResultClass(relay, 'write')"></span></td>
-              <td>
-                <ul v-if="messages[relay].notices.length">
-                  <li v-tooltip:left.tooltip="message" v-for="(message) in messages[relay].notices" :key="generateKey(relay, message)">✉️</li>
-                </ul>
-              </td>
-              <td></td>
-              <td></td>
-              <td></td>
-              <td></td>
-            </tr>
           </table>
         </div>
       </column>
@@ -136,19 +54,6 @@
       </column>
     </row>
 
-
-
-    <!-- <h2>Processing</h2>
-    <table v-if="relays.filter((relay) => result[relay] && !result[relay].state=='complete').length > 0">
-      <tr>
-        <th></th>
-      </tr>
-      <tr v-for="relay in relays.filter((url) => !result[url].state=='complete')" :key="{relay}" :class="getLoadingClass(relay)">
-        <td>{{ relay }}</td>
-      </tr>
-    </table>
-    <a href="./relays/">JSON API</a> -->
-
     <span class="credit"><a href="http://sandwich.farm">Another 🥪 by sandwich.farm</a>, built with <a href="https://github.com/jb55/nostr-js">nostr-js</a> and <a href="https://github.com/dskvr/nostr-relay-inspector">nostr-relay-inspector</a>, inspired by <a href="https://github.com/fiatjaf/nostr-relay-registry">nostr-relay-registry</a></span>
 
   </div>
@@ -210,16 +115,9 @@ export default defineComponent({
   },
 
   async mounted() {
-    // //console.log(this.relays.filter((relay) => this.result?.[relay] && !this.result?.[relay].state=='complete').length)
     this.relays.forEach(async relay => {
-      // const nip05 = await searchDomain(relay)
-      // console.log(relay, 'search domain', nip05)
       this.check(relay)
     })
-    // setTimeout(() => {
-    //   this.relays.forEach(relay => { this.checkLatency(relay) })
-    // }, 10000)
-
   },
 
   computed: {},
@@ -256,17 +154,8 @@ export default defineComponent({
 
           console.log(this.result[relay].observations)
         })
-        .on('close', () => {
-          // delete this.connections[relay]
-        })
-      //
-      // setTimeout( () => {
-      //   inspect
-      //     .reset()
-      //   inspect
-      //     .run()
-      //   //console.log('reset and run')
-      // }, 25000)
+        .on('close', () => {})
+
       this.connections[relay] = inspect
     },
 
@@ -302,27 +191,6 @@ export default defineComponent({
       })
     },
 
-    getAggregateResultClass (url) {
-      let result = ''
-      if (this.result?.[url]?.aggregate == null) {
-        result = 'unprocessed'
-      }
-      else if (this.result?.[url]?.aggregate == 'public') {
-        result = 'readwrite'
-      }
-      else if (this.result?.[url]?.aggregate == 'restricted') {
-        if(this.result?.[url]?.check.write) {
-          result = 'write-only'
-        } else {
-          result = 'read-only'
-        }
-      }
-      else if (this.result?.[url]?.aggregate == 'offline') {
-        result = 'offline'
-      }
-      return `aggregate indicator ${result}`
-    },
-
     getResultClass (url, key) {
 
       let result = this.result?.[url]?.check?.[key] === true

src/styles/main.scss

@@ -46,13 +46,23 @@ tr.relay.loaded td {
   margin-right:5px;
 }
 
-.badge.readwrite,
-.badge.offline {
+.public .badge,
+.offline .badge {
   color: white;
 }
 
-.badge.write-only,
-.badge.read-only,
+.public.online .badge {
+  background:green
+}
+
+.restricted.online .badge {
+  background:orange
+}
+
+.offline .badge {
+  background:red
+}
+
 tr.online .indicator.failure {
   background-color:orange !important;
 }
@@ -63,7 +73,7 @@ tr.online .indicator.failure {
     border-style: solid;
 }
 
-.indicator.pernding {
+.indicator.pending {
   background-color: #c0c0c0;
   border-color: rgba(55,55,55,0.5);
 }
@@ -83,18 +93,18 @@ border-color: rgba(255,0,0,0.5);
   border-color: rgba(255, 191, 0,0.5);
 }
 
-.indicator.readwrite {
+.indicator.public {
   background-color: green;
   border-color: rgba(0,255,0,0.5);
 }
 
-.indicator.read-only {
+.indicator.restricted {
   position:relative;
   border-color: transparent;
   background-color: transparent
 }
 
-.indicator.read-only span:first-child {
+.indicator.restricted span:first-child {
   position:absolute;
   width: 0;
   height: 0;
@@ -102,7 +112,7 @@ border-color: rgba(255,0,0,0.5);
   border-right: 14px solid transparent;
 }
 
-.indicator.read-only span:last-child {
+.indicator.restricted span:last-child {
   position:absolute;
   width: 0;
   height: 0;
@@ -110,28 +120,28 @@ border-color: rgba(255,0,0,0.5);
   border-left: 14px solid transparent;
 }
 
-
-.indicator.write-only {
-  position:relative;
-  border-color: transparent;
-  background-color: transparent
-}
-
-.indicator.write-only span:first-child {
-  position:absolute;
-  width: 0;
-  height: 0;
-  border-bottom: 14px solid orange;
-  border-left: 14px solid transparent;
-}
-
-.indicator.write-only span:last-child {
-  position:absolute;
-  width: 0;
-  height: 0;
-  border-top: 14px solid green;
-  border-right: 14px solid transparent;
-}
+//
+// .indicator.restricted {
+//   position:relative;
+//   border-color: transparent;
+//   background-color: transparent
+// }
+//
+// .indicator.restricted span:first-child {
+//   position:absolute;
+//   width: 0;
+//   height: 0;
+//   border-bottom: 14px solid orange;
+//   border-left: 14px solid transparent;
+// }
+//
+// .indicator.restricted span:last-child {
+//   position:absolute;
+//   width: 0;
+//   height: 0;
+//   border-top: 14px solid green;
+//   border-right: 14px solid transparent;
+// }
 
 .indicator.offline {
   background-color: red;
@@ -142,6 +152,9 @@ tr.online .relay-url {
   cursor: pointer;
 }
 
+
+
+
 .verified-shape-wrapper {
   display:inline-block;
   width: 16px;
@@ -255,16 +268,15 @@ h1 sup {
 
 
 .loading {
-    animation-duration: 1.8s;
-    animation-fill-mode: forwards;
-    animation-iteration-count: infinite;
-    animation-name: placeHolderShimmer;
-    animation-timing-function: linear;
-    background: #f6f7f8;
-    background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
-    background-size: 1000px 640px;
-    position: relative;
-
+  animation-duration: 1.8s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeHolderShimmer;
+  animation-timing-function: linear;
+  background: #f6f7f8;
+  background: linear-gradient(to right, #fafafa 8%, #f4f4f4 38%, #fafafa 54%);
+  background-size: 1000px 640px;
+  position: relative
 }
 
 .loaded .loading {
@@ -286,3 +298,9 @@ li.observation {
   display: inline;
   cursor: pointer;
 }
+
+tr.offline .verified, tr.offline .verified *,
+tr.offline .latency,
+tr.offline .nip {
+  visibility: hidden;
+}