input tag design/js for list inputs

source/css/base.css

@@ -125,6 +125,43 @@ HTML, BODY {
   height: 300px;
   width: 100%; }
 
+.inputTags-field {
+  border: 0;
+  background-color: transparent;
+  padding-top: .13rem; }
+
+input.inputTags-field:focus {
+  outline-width: 0; }
+
+.inputTags-list {
+  display: block;
+  width: 100%;
+  min-height: calc(2.25rem + 2px);
+  padding: .2rem .35rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
+
+.inputTags-item {
+  background-color: #3aba39;
+  margin-right: 5px;
+  padding: 5px 8px;
+  font-size: 10pt;
+  color: white;
+  border-radius: 4px; }
+
+.inputTags-item .close-item {
+  margin-left: 6px;
+  font-size: 13pt;
+  font-weight: bold;
+  cursor: pointer; }
+
 .btn-primary {
   background-color: #3e9bff;
   border-color: #006fe6;

source/scss/base.scss

@@ -151,6 +151,48 @@ HTML,BODY {
   width: 100%;
 }
 
+.inputTags-field {
+  border: 0;
+  background-color: transparent;
+  padding-top: .13rem;
+}
+
+input.inputTags-field:focus {
+  outline-width: 0;
+}
+
+.inputTags-list {
+  display: block;
+  width: 100%;
+  min-height: calc(2.25rem + 2px);
+  padding: .2rem .35rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  border-radius: .25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+}
+
+.inputTags-item {
+  background-color: #3aba39;
+  margin-right: 5px;
+  padding: 5px 8px;
+  font-size: 10pt;
+  color: white;
+  border-radius: 4px;
+}
+
+.inputTags-item .close-item {
+  margin-left: 6px;
+  font-size: 13pt;
+  font-weight: bold;
+  cursor: pointer;
+}
+
 @mixin dynamic-color-hov($color) {
     &.dyn-dark {
         background-color: darken($color, 12%) !important;

source/tmpl/form_service.gohtml

@@ -56,7 +56,7 @@
     <div class="form-group row{{if (eq .Type "tcp") or (eq .Type "udp")}} d-none{{end}}">
         <label for="headers" class="col-sm-4 col-form-label">HTTP Headers</label>
         <div class="col-sm-8">
-            <input name="headers" class="form-control" id="headers" autocapitalize="none" spellcheck="false" placeholder='Authorization=1010101,Content-Type=application/json' value="{{.Headers.String}}">
+            <input name="headers" class="input-tags form-control" id="headers" autocapitalize="none" spellcheck="false" placeholder='Authorization=1010101,Content-Type=application/json' value="{{.Headers.String}}">
             <small class="form-text text-muted">Comma delimited list of HTTP Headers (KEY=VALUE,KEY=VALUE)</small>
         </div>
     </div>

source/tmpl/service.gohtml

@@ -205,8 +205,11 @@
 {{$s := .Service}}
 <script src="/js/flatpickr.js"></script>
 <script src="/js/rangePlugin.js"></script>
+<script src="/js/inputTags.min.js"></script>
 <script>
 
+$(".input-tags").inputTags();
+
 let options = {
     chart: {
         height: "100%",
@@ -310,6 +313,7 @@ async function RenderChartLatency() {
 }
 
 $(document).ready(async function() {
+
     let startDate = $("#service_start").flatpickr({
         enableTime: false,
         static: true,

source/tmpl/services.gohtml

@@ -81,7 +81,10 @@
 {{ else }}
 <script src="/js/sortable.min.js"></script>
 {{end}}
+<script src="/js/inputTags.min.js"></script>
 <script>
+	$(".input-tags").inputTags();
+
     sortable('.sortable', {
         forcePlaceholderSize: true,
         hoverClass: 'sortable_drag',

source/wiki.go

@@ -1,6 +1,6 @@
 // Code generated by go generate; DO NOT EDIT.
 // This file was generated by robots at
-// 2019-04-19 11:45:38.037927 -0700 PDT m=+0.539240775
+// 2019-04-19 21:42:16.46651 -0700 PDT m=+0.559109073
 //
 // This contains the most recently Markdown source for the Statping Wiki.
 package source