index.html 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <title>DN42 Registry Explorer</title>
  5. <meta charset="utf-8">
  6. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  7. <link rel="stylesheet" href="bootstrap.min.css">
  8. <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  9. <!-- Style overrides -->
  10. <style>
  11. .material-icons { display:inline-flex;vertical-align:middle }
  12. body { box-shadow: inset 0 2em 10em rgba(0,0,0,0.4); min-height: 100vh }
  13. </style>
  14. </head>
  15. <body>
  16. <div id="explorer_app">
  17. <nav class="navbar navbar-fixed-top navbar-expand-md navbar-dark bg-dark">
  18. <search-input></search-input>
  19. <div class="collapse navbar-collapse w-100 ml-auto text-nowrap">
  20. <div class="ml-auto"><router-link class="navbar-brand"
  21. to="/">Registry Explorer</router-link>&nbsp;<a class="pull-right navbar-brand"
  22. href="https://dn42.us/"><img src="/dn42_logo.png" width="173" height="60"/></a>
  23. </div>
  24. </div>
  25. </nav>
  26. <router-view></router-view>
  27. </div>
  28. <footer class="page-footer font-small">
  29. <div style="margin-top: 20px; padding: 5px">
  30. <a href="https://git.dn42.us/burble/dn42regsrv">Source Code</a>.
  31. Powered by
  32. <a href="https://getbootstrap.com/">Bootstrap</a>,
  33. <a href="https://vuejs.org">Vue.js</a>,
  34. <a href="https://github.com/axios/axios">axios</a>,
  35. <a href="http://alexcorvi.github.io/anchorme.js/">Anchorme</a>.
  36. </div>
  37. </footer>
  38. <script type="text/x-template" id="search-input-template">
  39. <form class="form-inline" id="SearchForm">
  40. <input v-bind:value="search"
  41. v-on:input="debounceSearch($event.target.value)"
  42. class="form-control-lg" size="30" type="search"
  43. placeholder="Search the registry" aria-label="Search"/>
  44. </form>
  45. </script>
  46. <script type="text/x-template" id="app-root-template">
  47. <div class="p-3">
  48. <div class="jumbotron">
  49. <h1>DN42 Registry Explorer</h1>
  50. <p class="lead">Just start typing in the search box to start searching the registry</p>
  51. <hr/>
  52. <p>
  53. <p>Search Tips</p>
  54. <ul>
  55. <li>Searches are case independent
  56. <li>No need to hit enter, searches will start immediately
  57. <li>Prefixing the search by a registry type followed by / will narrow the search to
  58. just that type (e.g. <router-link class="text-success"
  59. to="domain/.dn42">domain/.dn42</router-link>)</li>
  60. <li>Searching for <b>type/</b> will return all the objects for that type (e.g.
  61. <router-link class="text-success" to="schema/">schema/</router-link>)</li>
  62. <li>A blank search box will return you to these instructions</li>
  63. <li>Just copy the URL to link to search results</li>
  64. <li>Searches are made on object names; searching the content of objects
  65. is not supported (yet!).</li>
  66. </ul>
  67. <hr/>
  68. <p>
  69. The registry explorer is a simple web app using
  70. <a href="https://git.dn42.us/burble/dn42regsrv">dn42regsrv</a>;
  71. a REST API for the DN42 registry built with <a href="https://golang.org/">Go</a>
  72. <br/>
  73. The DN42 registry contains personal data which is also available through this site.
  74. Please refer to the DN42 registry privacy policy, or contact dn42@burble.com for any
  75. queries.
  76. </p>
  77. </div>
  78. <registry-stats></registry-stats>
  79. </div>
  80. </script>
  81. <script type="text/x-template" id="registry-stats-template">
  82. <div class="container d-flex flex-column w-75">
  83. <h5>Registry Stats</h5>
  84. <section v-if="state == 'error'">
  85. <div class="alert alert-warning clearfix" role="alert">
  86. An error recurred whilst retrieving data from the API
  87. <button type="button" class="float-right btn btn-primary"
  88. v-on:click="reload"><span class="material-icons">refresh</span>
  89. Refresh</button>
  90. </div>
  91. </section>
  92. <section v-else-if="state == 'loading'">
  93. <div class="alert alert-info" role="alert">Loading data ...</div>
  94. </section>
  95. <section v-else>
  96. <p class="p-3 text-center">
  97. <span v-for="(value, key) in store.RegStats"
  98. class="mx-2 text-nowrap d-inline-block">
  99. <router-link v-bind:to="'/'+key+'/'">{{ key }}</router-link>
  100. : <b>{{ value }}</b>
  101. </span>
  102. </p>
  103. </section>
  104. </div>
  105. </script>
  106. <script type="text/x-template" id="app-search-template">
  107. <div class="p-3">
  108. <section v-if="state == 'loading'">
  109. <div class="alert alert-info" role="alert">Loading data ...</div>
  110. </section>
  111. <section v-else-if="state == 'error'">
  112. <div class="alert alert-warning clearfix" role="alert">
  113. An error recurred whilst retrieving search results
  114. </div>
  115. </section>
  116. <section v-else-if="state == 'noresults'">
  117. <h2>Searching for "{{ search }}" ...</h2>
  118. <div class="alert alert-dark" role="alert">
  119. Sorry, no results found
  120. </div>
  121. </section>
  122. <section v-else-if="state == 'resultlist'">
  123. <h2>Listing results for "{{ search }}" ...</h2>
  124. <div class="container d-flex flex-row flex-wrap">
  125. <div class="text-center">
  126. <span v-for="ref in result">
  127. <reg-object class="mx-4 my-2" v-bind:link="ref[0]+'/'+ref[1]"></reg-object>
  128. </span>
  129. </div>
  130. </div>
  131. </section>
  132. <section v-else-if="state == 'result'">
  133. <div v-for="(val, key) in result">
  134. <h2 class="mb-4"><reg-object v-bind:link="key"></reg-object></h2>
  135. <div class="pl-4">
  136. <table class="table">
  137. <thead>
  138. <tr><th scope="col">Key</th><th scope="col">Value</th></tr>
  139. </thead>
  140. <tbody>
  141. <tr v-for="a in val.Attributes">
  142. <th scope="row" class="border-0 py-1 pr-3 text-primary text-nowrap">
  143. {{ a[0] }}
  144. </th>
  145. <td class="border-0 p-1">
  146. <reg-attribute v-bind:content="a[1]"></reg-attribute>
  147. </td>
  148. </tr>
  149. </tbody>
  150. </table>
  151. </div>
  152. <section v-if="val.Backlinks.length != 0">
  153. <p>Referenced by</p>
  154. <div class="pl-4">
  155. <table class="table">
  156. <tbody>
  157. <tr v-for="rlink in val.Backlinks">
  158. <td class="border-0 p-1">
  159. <reg-object v-bind:link="rlink"></reg-object>
  160. </td>
  161. </tr>
  162. </tbody>
  163. </table>
  164. </div>
  165. </section>
  166. </div>
  167. </section>
  168. <section v-else>
  169. <div class="alert alert-warning" role="alert">
  170. Something went wrong, an invalid search state was encountered ({{ state }})
  171. <p>{{ $route.params.pathMatch }}</p>
  172. </div>
  173. </section>
  174. </div>
  175. </script>
  176. <script type="text/x-template" id="reg-object-template">
  177. <span class="text-nowrap d-inline-block">
  178. <router-link class="text-success mr-2" v-bind:to="'/'+link">
  179. {{ ( content ? content : obj ) }}
  180. </router-link>
  181. <span class="badge back-pill badge-dark test-muted">{{ rtype }}</span>
  182. </span>
  183. </script>
  184. <script type="text/x-template" id="reg-attribute-template">
  185. <span style="word-break: break-all; white-space: pre-wrap">
  186. <reg-object v-if="isRegObject()" v-bind:link="objectLink"></reg-object>
  187. <span v-else class="text-monospace" v-html="decorated"></span>
  188. </span>
  189. </script>
  190. <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  191. <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
  192. <script src="https://unpkg.com/vue"></script -->
  193. <script src="https://unpkg.com/vue-router"></script -->
  194. <script src="https://unpkg.com/axios@0.18.0/dist/axios.min.js"></script>
  195. <!-- script src="https://unpkg.com/vue@2.6.2/dist/vue.min.js"></script -->
  196. <!-- script src="https://unpkg.com/vue-router@3.0.2/dist/vue-router.js"></script -->
  197. <script src="anchorme.min.js"></script>
  198. <script src="explorer.js"></script>
  199. </body>
  200. </html>