Merge pull request #34 from fac-17/issues

Issues

database/db_build.js

@@ -7,8 +7,4 @@ const sql = fs.readFileSync(buildLink).toString();//listing of sql we create
 
 const runBuild = cb =>dbConnection.query(sql, cb);
 module.exports = runBuild;
-// dbConnection.query(sql, (error, res)=> {
-//     if (error) throw error;
-//     console.log('Tables are created', res)
-// });
 

public/index.html

@@ -26,24 +26,24 @@ <h1>SaVaGe<br />ARTWORK<br />CREATOR</h1>
 
     <section class="svg">
       <h2>Create a new SVG</h2>
-      <label for="SVGname">SVG name:</label>
+      <label for="SVGname">SVG name (any unique name):</label>
       <input class="SVGname" id="SVGname" />
-      <label for="SVGproperties">SVG properties:</label>
+      <label for="SVGproperties">SVG properties (optional):</label>
       <input class="SVGprops" id="SVGproperties" />
       <button class="SVGbutton">Create SVG</button>
     </section>
 
     <section class="shape">
       <h2>Create a new shape</h2>
-      <label for="shapeName">Shape name:</label>
+      <label for="shapeName">Shape name (any unique name):</label>
       <input class="SHAPEname" id="shapeName" />
       <label for="shapeType">Shape type:</label>
       <select class="SHAPEtype" id="shapeType" aria-label="shape type">
         <option value="circle">circle</option>
         <option value="rect">rect</option>
         <option value="polygon">polygon</option>
       </select>
-      <label for="shapeProperties">Shape properties:</label>
+      <label for="shapeProperties">Shape properties (depending on type):</label>
       <input class="SHAPEprops" id="shapeProperties" />
       <button class="SHAPEbutton">Create shape</button>
     </section>

public/style.css

@@ -34,6 +34,12 @@ button {
   width: 10rem;
   padding: 1%;
   border-radius: 3px;
+  cursor: pointer;
+}
+
+button:hover {
+  color:white;
+  background-color: black;
 }
 
 input,
@@ -43,6 +49,8 @@ select {
   font-size: 1rem;
   padding: 1% !important;
   border-radius: 3px;
+  cursor: pointer;
+
 }
 /*----------------------------LAYOUT/GRID-------------------------*/
 body {
@@ -102,6 +110,7 @@ label {
 .interface-add-shape-to-svg {
   display: flex;
   margin-top: 2%;
+  align-items: center;
 }
 .list-of-shapes,
 .list-of-svgs {

src/handlers.js

@@ -1,11 +1,7 @@
 const fs = require("fs");
 const path = require("path");
-const getAllDataQuery = require("./queries/getAllDataquery");
-const getSVGsQuery = require("./queries/getSVGsquery");
-const postSVGquery = require("./queries/postSVGquery");
-const postSHAPEquery = require("./queries/postSHAPEquery");
-const getSHAPEsquery = require("./queries/getSHAPEsquery");
-const insertSVG_SHAPEquery= require("./queries/post_SVG_SHAPE");
+const queries = require('./queries');
+
 
 module.exports = {
   staticAssets(req, res) {
@@ -34,26 +30,22 @@ module.exports = {
       data += chunk;
     });
     req.on("end", () => {
-      console.log(data);
       let dataObject = JSON.parse(data);
-      postSVGquery(dataObject.name, dataObject.props, (error, result) => {
+      queries.postSVGquery(dataObject.name, dataObject.props, (error, result) => {
         if (error) console.log(error);
-        console.log(result);
         res.writeHead(200, { "content-type": "text/html" });
         res.end("{}");
       });
     });
   },
   getAllData(req, res) {
-    getAllDataQuery(result => {
-      console.log(result.rows);
+    queries.getAllDataQuery(result => {
       res.writeHead(200, { "content-type": "application/json" });
       res.end(JSON.stringify(result.rows));
     });
   },
   getSVGs(req, res) {
-    getSVGsQuery(result => {
-      console.log(result.rows);
+    queries.getSVGsQuery(result => {
       res.writeHead(200, { "content-type": "application/json" });
       res.end(JSON.stringify(result.rows));
     });
@@ -65,9 +57,8 @@ module.exports = {
       data2 += chunk;
     });
     req.on("end", () => {
-      console.log(data2);
       let data2Obj = JSON.parse(data2);
-      postSHAPEquery(
+      queries.postSHAPEquery(
         data2Obj.name,
         data2Obj.props,
         data2Obj.type,
@@ -81,8 +72,7 @@ module.exports = {
   },
 
   getSHAPEs(req, res) {
-    getSHAPEsquery(result => {
-      console.log(result.rows);
+    queries.getSHAPEsquery(result => {
       res.writeHead(200, { "content-type": "application/json" });
       res.end(JSON.stringify(result.rows));
     });
@@ -95,7 +85,7 @@ module.exports = {
     });
   req.on("end", () => {
     let obj = JSON.parse(data3);
-    insertSVG_SHAPEquery(obj.svg_id, obj.shape_id, (error,result) => {
+    queries.insertSVG_SHAPEquery(obj.svg_id, obj.shape_id, (error,result) => {
       if (error) return (error);      
       res.writeHead(200, { "content-type": "text/html"});
       res.end("{}");

src/queries/index.js

@@ -0,0 +1,8 @@
+module.exports = {
+  getAllDataQuery: require("./getAllDataquery"),
+  getSVGsQuery: require("./getSVGsquery"),
+  postSVGquery: require("./postSVGquery"),
+  postSHAPEquery: require("./postSHAPEquery"),
+  getSHAPEsquery: require("./getSHAPEsquery"),
+  insertSVG_SHAPEquery: require("./post_SVG_SHAPE")
+};

src/queries/postSHAPEquery.js

@@ -1,7 +1,6 @@
 const dbConnection = require("../../database/db_connection");
 
 const postSHAPEquery = (name, props, type, cb) =>{
-    console.log("params", name, props, type);
     dbConnection.query("INSERT INTO shape(name,props,type) VALUES ($1,$2,$3)", 
     [name, props, type], 
     (err, res)=>{

src/router.js

@@ -4,7 +4,6 @@ const router = (req, res) => {
   if (req.url === "/") {
     req.url = "/public/index.html";
   }
-  console.log("Received URL: ", req.url);
   if (req.url.startsWith("/public")) {
     handlers.staticAssets(req, res);
   } else if (req.url === "/postSVG") {

tests/db_test.js

@@ -1,4 +1,5 @@
 const tape = require("tape");
+const queries = require('../src/queries');
 const runDBbuild = require("../database/db_build");
 const getSvgquery = require("../src/queries/getSVGsquery");
 const getShapequery = require("../src/queries/getSHAPEsquery");
@@ -11,7 +12,7 @@ tape("tape is working?", t => {
 tape("What is the number of rows in svg table?", t => {
     runDBbuild(function(err, res) {
         t.error(err, "No error");
-        getSvgquery(result => {
+        queries.getSVGsQuery(result => {
             t.equal(result.rows.length, 3);
             t.end();
 
@@ -23,7 +24,7 @@ tape("What is the value of name and props in the first row?", t => {
     runDBbuild(function(err, res) {
         t.error(err, "No error ");
         let expected= {name:'picasso',props:'{"fill":"pink"}',id:1};
-        getSvgquery(result => {
+        queries.getSVGsQuery(result => {
             t.deepEqual(result.rows[0], expected);
             t.end();
         })
@@ -33,7 +34,7 @@ tape("What is the value of name and props in the first row?", t => {
 tape("What is the number of rows in shape table?", t => {
     runDBbuild(function(err, res) {
         t.error(err, "No error");
-        getShapequery(result => {
+        queries.getSHAPEsquery(result => {
             t.equal(result.rows.length, 5)
             t.end();
         })
@@ -44,7 +45,7 @@ tape("What are the values of name, props and type in the second row?- shape tabl
     runDBbuild(function(err, res) {
         t.error(err, "No error ");
         let expected= { name:'sq',type:'rect',props:'{"x":20,"y":30,"width":40,"height":40}', id:2};
-        getShapequery(result => {
+        queries.getSHAPEsquery(result => {
             t.deepEqual(result.rows[1], expected);
             t.end();
         })