ui: style member, job, group

src/scripts/hd-widgets.js

@@ -90,6 +90,7 @@ document.addEventListener('WebComponentsReady', function(event) {
       return 'div';
     }
     getTemplate(value, index) {
+      return JSON.stringify(value);
       var firstname, lastname;
       if (typeof value == 'object')
         if (Object.keys(value).length > 1) {
@@ -109,4 +110,53 @@ document.addEventListener('WebComponentsReady', function(event) {
     }
   }
   customElements.define('hdapp-author', HDAppAuthor);
+
+  class HDAppClosingDate extends SIBWidget {
+    get template() {
+      return this.value
+        ? `<strong>closed</strong> (${this.value})`
+        : '<strong>open</strong>';
+    }
+
+    render() {
+      console.log(this.value);
+      this.innerHTML = this.template;
+    }
+  }
+
+  customElements.define('hdapp-closing-date', HDAppClosingDate);
+
+  class HDAppAvailable extends SIBWidget {
+    get template() {
+      return this.value
+        ? '<strong>Available</strong>'
+        : '<strong>Not available</strong>';
+    }
+
+    render() {
+      console.log(this.value);
+      this.innerHTML = this.template;
+    }
+  }
+
+  customElements.define('hdapp-available', HDAppAvailable);
+
+  class HDAppHyperlink extends SIBWidget {
+    get template() {
+      const escaped = this.value
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+        .replace(/'/g, '&#039;');
+      return `<a href="${escaped}">${escaped}</a>`;
+    }
+
+    render() {
+      console.log(this.value);
+      this.innerHTML = this.template;
+    }
+  }
+
+  customElements.define('hdapp-hyperlink', HDAppHyperlink);
 });