clean up, added more components

config.json

 {
+  "repo": "http://localhost:8080/repo/",
   "api": "/solr/ocflcore",
   "dev": {
     "proxy": {

src/components/Footer.js

+const Footer = function (data) {
+  return `
+  <footer class="footer">
+    <div class="container">
+      <div class="row">
+        <div class="col-md-10">
+          <div class="copyright">
+            <p class="font-weight-light small">&copy; copyright</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </footer>
+  `
+};
+
+module.exports = Footer;
\ No newline at end of file

src/components/Header.js

 const Header = function (data) {
   return `
     <header id="header" class="container">
-      <nav class="navbar navbar-expand-lg navbar-light bg-light">
-        <a class="navbar-brand" href="#">Navbar</a>
-        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span class="navbar-toggler-icon"></span>
-        </button>
-      
-        <div class="collapse navbar-collapse" id="navbarSupportedContent">
-          <ul class="navbar-nav mr-auto">
-            <li class="nav-item active">
-              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link" href="#">Link</a>
-            </li>
-            <li class="nav-item dropdown">
-              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                Dropdown
-              </a>
-              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
-                <a class="dropdown-item" href="#">Action</a>
-                <a class="dropdown-item" href="#">Another action</a>
-                <div class="dropdown-divider"></div>
-                <a class="dropdown-item" href="#">Something else here</a>
-              </div>
-            </li>
-            <li class="nav-item">
-              <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-            </li>
-          </ul>
-          <form class="form-inline my-2 my-lg-0">
-            <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
-            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
-          </form>
+    <div class="container-fluid">
+          <div class="row">
+            <div class="col-md-9">
+              <p></p>
+              <p class="header-main">
+                <img src="${data.header.logoURL}" [attr.alt]="${data.header.title}" style="width:110px;"/>
+                <a href="${data.header.URL}">${data.header.title}</a>
+              </p>
+            </div>
+            <div class="col-md-3">
+              <p></p>
+              <nav class="navbar">
+                <div class="navbar-nav">
+                  <a class="nav-item nav-link"
+                     href="${data.header.helpURL}" target="_blank noreferer">
+                    ${data.header.help}<i class="fa fa-question-circle" aria-hidden="true"></i></a>
+                </div>
+                <div class="navbar-nav">
+                  <a class="nav-item nav-link"
+                     href="${data.header.portalURL}" target="_blank noreferer">
+                    ${data.header.portal}<i class="fa fa-external-link" aria-hidden="true"></i></a>
+                </div>
+              </nav>
+            </div>
+          </div>
         </div>
-      </nav>
     </header>
     `
 };

src/components/Loading.js

+const Loading = function () {
+  return `
+    <section class="center">
+    <div>loading</div>
+    </section>
+    `;
+};
+
+module.exports = Loading;
\ No newline at end of file

src/components/Main.js

 const Main = function (data) {
   var html = '';
   const docs = data.main.docs;
+  html += `<ul class="list-group">`;
   if (docs.length > 0) {
     docs.forEach((d) => {
-      var url = '/repo/' + d['uri_id'] + '/';
-      html += '<div class="item"><a href="' + url + '">' + d['name'][0] + '</a> ' + d['record_type_s'] + '</div>\n'
+      var url = `${data.config.repo}${d['uri_id']}/`;
+      html += `<li class="list-group-item">
+        <div class="item"><a href="${url}">${d['name'][0]}</a> ${d['record_type_s']} </div>
+</li>`
     });
   }
+  html += `</ul>`;
+
   return html;
 };
 

src/components/Search.js

+const Search = function (data) {
+  return `
+    <div class="search-header">
+      <div class="row no-gutters align-items-center h-100">
+        <div class="col-md-2"></div>
+        <div class="col-md-8">
+          <div class="input-group mb-3" *ngIf="currentParam">
+            <input [(ngModel)]="currentParam.searchText" type="text" class="form-control form-control-lg"
+                   [attr.aria-label]="${data.search.searchText}" [attr.placeholder]="${data.search.searchText}"
+                   (keyup.enter)="goSearch()" (keyup)="checkSearchText()">
+            <div class="input-group-append">
+              <button [disabled]="isSearching || !currentParam.searchText || invalidSearchText" [innerHTML]="searchLabelStr"
+                      (click)="goSearch()" class="btn btn-secondary btn-lg" type="submit">${data.search.searchText}</button>
+              <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split btn-lg"
+                      data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+                <span class="sr-only">Toggle Search Type</span>
+              </button>
+              <div class="dropdown-menu">
+                <button *ngFor="let rType of availableRecordTypes" class="dropdown-item" (click)="setRecordType(rType)"
+                        [innerHTML]="getSearchRecordTypeLabel(rType)"></button>
+              </div>
+            </div>
+          </div>
+          <div *ngIf="searchError" class="alert alert-danger" role="alert">
+            ${data.search.error}
+          </div>
+          <div *ngIf="invalidSearchText" class="alert alert-danger" role="alert">
+            ${data.search.invalidSearch}
+          </div>
+        </div>
+        <div class="col-md-2"></div>
+      </div>
+    </div>
+  `;
+};
+module.exports = Search;
\ No newline at end of file

src/index.js

@@ -4,48 +4,52 @@ import 'bootstrap';
 import './style.css';
 
 const Delegate = require('./lib/Delegate');
-const nginxService = require('./lib/NginxService');
+const searchService = require('./lib/SearchService');
 
 const config = require('../config.json');
 
 //App view components
 const Header = require('./components/header');
 const Main = require('./components/main');
+const Footer = require('./components/footer');
+const Search = require('./components/search');
 
 //Default state
 let state = {
   header: {
     title: 'Data Portal',
+    URL: '/',
+    logo: 'assets/mint.svg',
+    help: 'help',
+    helpURL: '',
+    portal: 'Back to Stash',
+    portalURL: 'http://stash.research.uts.edu.au',
     menu: [
-      {id: 'sign-out-header', name: 'Sign Out'}
+      {id: 'back', name: 'Back'}
     ]
   },
+  search:{
+    error: 'Search Error',
+    invalidSearch: 'Invalid Search',
+    searchText: 'Search'
+  },
   main: {
     docs: []
-  }
+  },
+  config: config
 };
 
 const app = document.querySelector('#app');
 
 const renderApp = function (data, into) {
   console.log('rendering')
-  into.innerHTML = [Header(data), Main(data)].join('');
-};
-
-const renderLoading = function () {
-  let loading = `
-    <section class="center">
-    <div>loading</div>
-    </section>
-    `
-  state.main = loading;
-  renderApp(state, app)
+  into.innerHTML = [Header(data), Search(data), Main(data), Footer(data)].join('');
 };
 
 (async () => {
-  const res = await nginxService({uri: '/solr/ocflcore'});
-  state.main.docs = res['response']['docs'];
-  console.log(state);
+
+  state.main.docs = await searchService.searchAll({api: config.api});
+
   renderApp(state, app);
 
 })();
\ No newline at end of file

src/lib/NginxService.js

-const axios = require('axios');
-
-const NginxService = async function (config) {
-  const req = await axios.get(`${config.uri}/select?q=*%3A*`);
-  return req.data;
-};
-
-module.exports = NginxService;
\ No newline at end of file

src/lib/SearchService.js

+const axios = require('axios');
+
+const SearchService = {
+  searchAll: async function (config) {
+    const req = await axios.get(`${config.api}/select?q=*%3A*`);
+    if (req.data) {
+      return req.data['response']['docs'];
+    } else {
+      return [];
+    }
+  }
+};
+
+module.exports = SearchService;
\ No newline at end of file