started a brand new data portal

f97aca2b · Moises Sacal · f97aca2b · f97aca2b · f97aca2b · f97aca2b
Commit f97aca2b authored 5 years ago by Moises Sacal
--- a/.babelrc
+++ b/.babelrc
+{
+  "presets": ["@babel/preset-env"]
+}
\ No newline at end of file
--- a/.gitignore
+++ b/.gitignore
+.idea
+dist
+node_modules
+.DS_Store
\ No newline at end of file
--- a/config.json
+++ b/config.json
+{
+  "api": "/solr/ocflcore",
+  "dev": {
+    "proxy": {
+      "/solr/ocflcore": {
+        "target": "http://localhost:8080",
+        "secure": false
+      }
+    }
+  }
+}
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "data-portal",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build": "webpack -w",
+    "start:dev": "webpack-dev-server"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.6.2",
+    "@babel/preset-env": "^7.6.2",
+    "babel-loader": "^8.0.6",
+    "css-loader": "^3.2.0",
+    "html-webpack-plugin": "^3.2.0",
+    "popper.js": "^1.15.0",
+    "style-loader": "^1.0.0",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^2.1.0",
+    "webpack": "4.28.4",
+    "webpack-cli": "3.2.1",
+    "webpack-dev-server": "^3.8.1"
+  },
+  "dependencies": {
+    "axios": "^0.19.0",
+    "bootstrap": "^4.3.1",
+    "jquery": "^3.4.1"
+  }
+}
--- a/src/components/Header.js
+++ b/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>
+      </nav>
+    </header>
+    `
+};
+
+module.exports = Header;
\ No newline at end of file
--- a/src/components/Main.js
+++ b/src/components/Main.js
+const Main = function (data) {
+  var html = '';
+  const docs = data.main.docs;
+  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'
+    });
+  }
+  return html;
+};
+
+module.exports = Main;
\ No newline at end of file
--- a/src/index.html
+++ b/src/index.html
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8"/>
+    <title><%= htmlWebpackPlugin.options.title %></title>
+</head>
+<body>
+<div id="app"></div>
+</body>
+</html>
\ No newline at end of file
--- a/src/index.js
+++ b/src/index.js
+import * as $ from 'jquery';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import 'bootstrap';
+import './style.css';
+
+const Delegate = require('./lib/Delegate');
+const nginxService = require('./lib/NginxService');
+
+const config = require('../config.json');
+
+//App view components
+const Header = require('./components/header');
+const Main = require('./components/main');
+
+//Default state
+let state = {
+  header: {
+    title: 'Data Portal',
+    menu: [
+      {id: 'sign-out-header', name: 'Sign Out'}
+    ]
+  },
+  main: {
+    docs: []
+  }
+};
+
+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)
+};
+
+(async () => {
+  const res = await nginxService({uri: '/solr/ocflcore'});
+  state.main.docs = res['response']['docs'];
+  console.log(state);
+  renderApp(state, app);
+
+})();
\ No newline at end of file
--- a/src/lib/Delegate.js
+++ b/src/lib/Delegate.js
+const Delegate = function(selector, eventName, targetSelector, listener) {
+  document.querySelector(selector).addEventListener(eventName, function (event) {
+    var closestMatch = closest(event.target, targetSelector)
+    if (closestMatch) {
+      event.delegateTarget = closestMatch
+      listener(event)
+    }
+  })
+};
+
+module.exports = Delegate;
\ No newline at end of file
--- a/src/lib/NginxService.js
+++ b/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
--- a/src/style.css
+++ b/src/style.css
+div{
+    font-family: Arial;
+    color: red;
+    size: B5;
+}
\ No newline at end of file
--- a/webpack.config.js
+++ b/webpack.config.js
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const config = require('./config.json');
+
+module.exports = {
+  // the entry can be split so we dont load many things that are not required
+  entry: './src/index.js',
+  output: {
+    filename: 'main.js',
+    path: path.resolve(__dirname, 'dist')//'/Users/moises/source/github-uts/ocfl-nginx/assets/'
+  },
+  // optimization: {
+  //   minimizer: [new UglifyJsPlugin()]
+  // },
+  plugins: [new HtmlWebpackPlugin({
+    title:'Data Portal',
+    template: 'src/index.html'})],//Keep this file as is. We should manage html in JS
+  devServer: {
+    contentBase: path.join(__dirname, 'dist'),
+    port: 9000,
+    headers: {
+      'Access-Control-Allow-Origin': '*',
+      'Access-Control-Allow-Headers': '*',
+      'Access-Control-Allow-Methods': '*',
+    },
+    proxy: config.dev.proxy,
+  },
+  module: {
+    rules: [
+      // {
+      //   test: /\.js$/,
+      //   exclude: /(node_modules)/,
+      //   use: {
+      //     loader: 'babel-loader',//Webpack loader to perform transformation on files. if using ES2017 needs to be transformed into ES2015 This is why we use Babel
+      //     options: {
+      //       presets: ['@babel/preset-env'] //most browser supported with this preset, you can add more presets here.
+      //     }
+      //   }
+      // },
+      {
+        test: /\.css$/,
+        use: [
+          {loader: 'style-loader'},
+          {loader: 'css-loader'}
+        ]
+      }
+    ]
+  }
+};
\ No newline at end of file