Merge pull request #8 from conix-center/record-crud-ui

Merge in UI baseline for Atlas

.gitignore

@@ -0,0 +1 @@
+*.swp

atlas-web-app/api/models/Record.js

@@ -1,27 +1,50 @@
+// Periodically revisit validation for this model, per this:
+// https://github.com/conix-center/ATLAS/issues/1
+
 /**
  * Record.js
  *
- * @description :: An ATLAS record which contains info to connect to ARENA things
+ * @description :: An ATLAS record which contains info to connect to ARENA
+                   things
  * @docs        :: https://docs.google.com/presentation/d/1dc1RdlGROBYj1zIoPR8HX_RBIKn8-KRmNZscXVrdIs0/edit#slide=id.g60b507f38e_11_80
+ *                 https://sailsjs.com/documentation/concepts/models-and-orm/models
+ *                 RFC 4122 defines UUID
  */
 
 module.exports = {
 
   attributes: {
-    //ltj: I'm referencing docs on models rn:
-    //    https://sailsjs.com/documentation/concepts/models-and-orm/models
-
-    //ltj: uuid is defined by RFC 4122. We don't expect to check, enforce
-    //    or generate uuids, ATLAS just stores them, thus 'string' type
-    uuid: { type: 'string', required: true, unique: true },
-    //ltj: TODO: tighten up position naming a bit, would prefer:
-    //    pos.lat, pos.lon, pos.elev, with possible x,y,z aliases
-    //   : Abstractly, spatial coords are meatspace location...
-    lat: { type: 'number', required: false },
-    lon: { type: 'number', required: false },
-    elev: { type: 'number', required: false },
-    //    ... and url is cyberspace location
-    url: { type: 'string', required: false },
+
+    uuid: {
+      type: 'string',
+      required: true,
+      unique: true, 
+      isUUID: true,
+      // sy: NOTE: 'isUUID' and other validation functions protect db from
+      //           invalid data but do not cater to helping a user...
+    },
+
+    lat: { 
+      type: 'number',
+      required: false,
+      // sy: TODO: add custom validation that checks if number isGeoCoord
+    },
+
+    lon: {
+      type: 'number', 
+      required: false,
+    },
+
+    ele: {
+      type: 'number',
+      required: false,
+    },
+
+    url: {
+      type: 'string',
+      required: false,
+      isURL: true,
+    },
 
   },
 

atlas-web-app/assets/styles/style.css

@@ -0,0 +1,46 @@
+/*TODO: combine styles that are the same but for diff elements */
+
+body {
+  color: white;
+  background-color: #133926;
+  font-family: "Lucida Console", Monaco, monospace;
+}
+
+h1 {
+  color: black;
+  background-color: #8dd8b4;
+}
+
+a:link {
+  color: #ff0000;
+}
+
+a:visited {
+  color: #ff0000;
+}
+
+button {
+  background-color: #0d261a;
+  text-decoration: underline;
+  color: #ff0000;
+}
+
+form {
+  background-color: #0d261a;
+}
+
+input[type=submit] {
+  background-color: #0d261a;
+  text-decoration: underline;
+  color: #ff0000;
+}
+
+input {
+  background-color: black;
+  color: #00ff00;
+}
+
+select {
+  background-color: black;
+  color: #00ff00;
+}

atlas-web-app/config/routes.js

@@ -19,8 +19,9 @@ module.exports.routes = {
   *                                                                          *
   ***************************************************************************/
 
-  // '/': { view: 'pages/homepage' },
-  'GET /local/:uuid': { action: 'record/redirect-uuid' },
+  '/': { view: 'pages/homepage' },
+  '/create-record-form': { view: 'pages/create-record-form' },
+  '/search-records-form': { view: 'pages/search-records-form' },
 
   /***************************************************************************
   *                                                                          *
@@ -33,5 +34,6 @@ module.exports.routes = {
   *                                                                          *
   ***************************************************************************/
 
+  'GET /local/:uuid': { action: 'record/redirect-uuid' },
 
 };

atlas-web-app/package.json

@@ -9,11 +9,13 @@
     "@sailshq/lodash": "^3.10.4",
     "@sailshq/socket.io-redis": "^5.2.0",
     "grunt": "1.0.4",
+    "requirejs": "^2.3.6",
     "sails": "^1.2.3",
     "sails-hook-grunt": "^4.0.0",
     "sails-hook-orm": "^2.1.1",
     "sails-hook-sockets": "^2.0.0",
-    "sails-mongo": "^1.0.1"
+    "sails-mongo": "^1.0.1",
+    "uuid": "^3.3.3"
   },
   "devDependencies": {
     "eslint": "5.16.0"

atlas-web-app/views/layouts/layout.ejs

@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title>New Sails App</title>
+    <title>CMU CyLab ATLAS</title>
 
     <!-- Viewport mobile tag for sensible mobile support -->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
@@ -31,8 +31,9 @@
             + Use a different or additional preprocessor, like SASS, SCSS or Stylus
     -->
 
-    <!--STYLES-->
-    <link rel="stylesheet" href="/styles/importer.css">
+    <!--STYLES-->
+    <link rel="stylesheet" href="/styles/importer.css">
+    <link rel="stylesheet" href="/styles/style.css">
     <!--STYLES END-->
   </head>
 
@@ -105,8 +106,8 @@
 
     -->
 
-    <!--SCRIPTS-->
-    <script src="/dependencies/sails.io.js"></script>
+    <!--SCRIPTS-->
+    <script src="/dependencies/sails.io.js"></script>
     <!--SCRIPTS END-->
   </body>
 </html>

atlas-web-app/views/pages/create-record-form.ejs

@@ -0,0 +1,44 @@
+<!--
+Periodically revisit validation needs for this form. See:
+https://github.com/conix-center/ATLAS/issues/1
+-->
+
+<a href="/">ATLAS Home</a> <a>/</a> <a>Create Record Form</a> <a>&gt;</a>
+
+<h1>
+Create New ATLAS Record
+</h1>
+
+<h2>
+Please fill out this form and submit:
+</h2>
+
+<form action="/record/create">
+UUID:
+<br/>
+<input type="text" name="uuid" id="get_uuid_dst" placeholder="REQUIRED!" required> 
+<!--FIXME: <button type="Button" onclick="getElementById('get_uuid_dst').innerHTML = sails.uuidv4();">Get UUID</button>-->
+<br/>
+<br/>
+URL:
+<br/>
+<input type="text" name="url">
+<br/>
+<br/>
+Latitude:
+<br/>
+<input type="text" name="lat">
+<br/>
+<br/>
+Longitude:
+<br/>
+<input type="text" name="lon">
+<br/>
+<br/>
+Elevation:
+<br/>
+<input type="text" name="ele">
+<br/>
+<br/>
+<input type="submit" value="submit">
+</form>

atlas-web-app/views/pages/search-records-form.ejs

@@ -0,0 +1,30 @@
+<!--
+Periodically revisit validation/sanitation needs for this form. See:
+https://github.com/conix-center/ATLAS/issues/1
+-->
+
+<a href="/">ATLAS Home</a> <a>/</a> <a>Advanced Search Records</a> <a>&gt;</a>
+
+<h1>
+Advanced Search ATLAS Records
+</h1>
+
+<h2>
+Please enter valid Waterline query language:
+</h2>
+
+<form action="/record">
+<a href="https://sailsjs.com/documentation/reference/blueprint-api/find-where">
+find API & where clause reference
+</a>
+<br/>
+where:
+<br/>
+<!-- TODO: ltj: add more helpful example, like: '{"url":{"contains":"espn"}}'
+                this probably includes making input size to window...  -->
+<input type="text" name="where" placeholder="JSON" required>
+<br/>
+<br/>
+<input type="submit" value="submit">
+<!-- TODO: ltj: add sorting/pagination fields.. -->
+</form>

testing/initw.test.records.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+#ltj: adds a few entries to db using default Sails devenv host info
+curl 'http://localhost:1337/record/create?uuid=356a5dcd-9d22-4cde-85b0-1942b20f05e7&url=ltsyrealjones.com'
+
+curl 'http://localhost:1337/record/create?uuid=db3c47f1-21d9-4eb7-99fc-a8b199ebcf8a&url=www.espn.com'

ui-mock-ups/create-record_simplest-form.html

@@ -0,0 +1,25 @@
+<html>
+<body>
+<!-- ltj: I'm not sure how transferable this is to a Sails app -->
+<h1>Create *New* ATLAS Record</h1>
+
+	<form>
+	UUID:<br>
+	<input type="text" name="uuid"><br>
+	<br>
+	URL:<br>
+	<input type="text" name="url"><br>
+	<br>
+	Latitude:<br>
+	<input type="text" name="lat"><br>
+	<br>
+	Longitude:<br>
+	<input type="text" name="lon"><br>
+	<br>
+	Elevation:<br>
+	<input type="text" name="ele"><br>
+	<br>
+	<input type="submit" value="submit">
+	</form>
+</body>
+</html>

ui-mock-ups/hello-world.html

@@ -0,0 +1,6 @@
+<html>
+<body>
+Hello world!
+<!-- yeah, not really a UI, this is mostly just to get a commit on my new branch -->
+</body>
+</html>