From d9da5bd6b6963f9d76b25190a27ea055bfd1951a Mon Sep 17 00:00:00 2001
From: ManifoldFR <wilson.jallet@gmail.com>
Date: Tue, 27 Feb 2018 16:17:07 +0100
Subject: [PATCH] Error pages & form to lookup db
---
src/css/error.css | 3 +++
src/css/style.css | 61 +++++++++++++++++++++++++++++++++++++++++---
src/index.js | 26 ++++++++++++++-----
src/views/error.pug | 9 +++++++
src/views/head.pug | 2 --
src/views/home.pug | 20 ++++++++++-----
src/views/layout.pug | 5 +++-
7 files changed, 105 insertions(+), 21 deletions(-)
create mode 100644 src/css/error.css
delete mode 100644 src/views/head.pug
diff --git a/src/css/error.css b/src/css/error.css
new file mode 100644
index 0000000..4717ad4
--- /dev/null
+++ b/src/css/error.css
@@ -0,0 +1,3 @@
+h1 {
+ color: red;
+}
\ No newline at end of file
diff --git a/src/css/style.css b/src/css/style.css
index 6592b98..6d221f4 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -1,7 +1,60 @@
+* {
+ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
+}
+
body {
- padding: 2em
+ padding: 3em;
+ background-color: #f4f4f4;
}
-* {
- font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif
-}
\ No newline at end of file
+form {
+ margin-bottom: 1em;
+}
+
+.form-group {
+ margin-top: 0.7em;
+ margin-bottom: 0.7em;
+}
+
+.form-group label {
+ margin-right: 1em;
+}
+
+input.form-control {
+ width: auto;
+ background: none;
+ border: none;
+ padding-bottom: 2px;
+ border-bottom: solid 1.3px rgba(0, 0, 0, 0.2);
+ transition: border 0.2s ease-out;
+ font-family: "Segoe UI";
+}
+
+input.form-control:focus {
+ outline: none;
+ border-bottom-color: rgba(1, 40, 148, 0.842);
+}
+
+button.form-control {
+ display: block;
+ color: white;
+ width: 80px;
+ height: 30px;
+ background-color: rgba(0, 2, 138, 0.767);
+ border: solid 1px rgba(117, 117, 117, 0.226);
+ border-radius: 4px;
+}
+
+.form-group button {
+ margin-top: 0;
+ margin-left: 0.6em
+}
+
+button.form-control:hover {
+ background-color: rgba(37, 0, 138, 0.87);
+}
+
+button.form-control:active {
+ box-shadow: inset 0 8px 6px -6px black;
+ transition: background-color;
+}
diff --git a/src/index.js b/src/index.js
index 9bf29f3..7e96a3e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ import colors from 'colors';
import { graphqlExpress, graphiqlExpress } from 'graphql-server-express';
import makeExecutableSchema from 'graphql-tools';
import knex from '../db/knex_router';
+import path from 'path';
/**
* @function Home
@@ -10,7 +11,14 @@ import knex from '../db/knex_router';
*/
server.get('/', function(req, res) {
console.log('Connecting to '+req.url);
- res.render('home');
+ res.render('home', {title: 'Home', port: port});
+});
+
+server.get('/db?', function(req, res) {
+ let table_name = req.query.table;
+ let columns = req.query.columns;
+
+ res.redirect(`db/${table_name}?columns=${columns}`);
});
/**
@@ -34,8 +42,11 @@ server.get('/db/:table_name?', function(req, res) {
res.write(JSON.stringify(table,null,2));
res.end();
},function() {
- res.status(404);
- res.write(`Error: Relation ${req.params.table_name} does not exist`);
+ res.status(400);
+ res.render('error', {
+ status: res.statusCode,
+ error_message: "Bad request: can't find table " + req.params.table_name
+ });
res.end();
}
);
@@ -60,10 +71,11 @@ server.use((err, req, res, next) => {
res.locals.message = err.message;
res.status(err.status || 500);
- res.write(`Error 404
-
- Not found.`);
- res.end();
+ let error_message = res.statusCode == 404 ? 'Not found.' : 'Internal server error.';
+ res.render('error', {
+ status: res.statusCode,
+ error_message: error_message
+ });
});
// define port server is to listen on
diff --git a/src/views/error.pug b/src/views/error.pug
index e69de29..598246c 100644
--- a/src/views/error.pug
+++ b/src/views/error.pug
@@ -0,0 +1,9 @@
+extends layout.pug
+
+block extraStyles
+ include ../css/error.css
+
+block content
+ h1 Error #{status}
+ p #{error_message}
+ a(href="/") Go back
\ No newline at end of file
diff --git a/src/views/head.pug b/src/views/head.pug
deleted file mode 100644
index f995826..0000000
--- a/src/views/head.pug
+++ /dev/null
@@ -1,2 +0,0 @@
-style
- include ../css/style.css
\ No newline at end of file
diff --git a/src/views/home.pug b/src/views/home.pug
index ca31811..7835d6b 100644
--- a/src/views/home.pug
+++ b/src/views/home.pug
@@ -1,9 +1,15 @@
-block title
- include head.pug
- title Accueil
-
+extends layout.pug
block content
- h1 Welcome to API server
- p Hello, world ! This is server talking to you live on port 3000 !
- a(href="db/groups") Groups
\ No newline at end of file
+ h1 Welcome to API server
+ p Hello, world ! This is server talking to you live on port #{port} !
+ form(action="/db", method="get")
+ div.form-group
+ label(for="table") Table
+ input.form-control(type="search", name="table")
+ div.form-group
+ label(for="columns") Columns
+ input.form-control(type="search", name="columns")
+ button.form-control(type="submit") Search
+ |
+ a(href="/graphql") Check GraphQL
\ No newline at end of file
diff --git a/src/views/layout.pug b/src/views/layout.pug
index 6e39013..bfc94dd 100644
--- a/src/views/layout.pug
+++ b/src/views/layout.pug
@@ -4,6 +4,9 @@ html(lang="en")
meta(charset="UTF-8")
meta(name="viewport", content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible", content="ie=edge")
- block title
+ style
+ include ../css/style.css
+ block extraStyles
+ title API server - #{title}
body
block content
--
GitLab