Wireframes and lorem ipsum data

ScriptGadget · Nov 9, 2017 · 661c1c0 · 661c1c0
1 parent 9a3e456
commit 661c1c0
Show file tree

Hide file tree

Showing 6 changed files with 105 additions and 8 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
 build/
 node_modules/
 *.log
+.#*
diff --git a/app/done.html b/app/done.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Pooka Partners -- Earn money as an imaginary friend.</title>
+  <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
+  <script src="./app.js"></script>
+</head>
+<body>
+  <h1>Pooka Partners</h1>
+  <h2>imaginary money for imaginary people</h2>
+  <br>
+  <h3>You have agreed to <span id="description">&nbsp;</span> by <span id="deadline">&nbsp;</span> for <span id="amount">&nbsp;</span>.</h3>
+  <br>
+  <h1>Done? Press this button. </h1>
+  <br><input type="hidden" id="task" value="123456"></input>
+  <br><br><button id="send" onclick="App.done()">Done</button>
+  <br><br>
+  <span id="status"></span>
+  <br>
+  <br>
+  <br>
+  <h2>More Tasks</h2>
+  <div id="task_list">
+    No open tasks.
+  </div>
+</body>
+</html>
diff --git a/app/index.html b/app/index.html
@@ -1,20 +1,27 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>DoneButton - A Universal Event Oracle</title>
+  <title>Pooka Partners - Hire an imaginary friend.</title>
   <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
   <script src="./app.js"></script>
 </head>
 <body>
-  <h1>DoneButton</h1>
-  <h2>A Universal Event Oracle</h2>
+  <h1>What can a pooka do for you?</h1>
 
   <br>
-  <h1>Press The Button When You Finish Your Task </h1>
-  <br><label for="task">Task ID:</label><input type="text" id="task" placeholder="e.g., 123456"></input>
-  <br><br><button id="send" onclick="App.done()">Done</button>
+  <h2>Oh magic Pooka, </h2>
+  <br><label for="description">if you </label><input type="text" id="description" placeholder="e.g., narfle the garthok"></input>
+  <br><label for="deadline">before </label><input type="date" id="deadline"></input>
+  <br><label for="amount">I'll pay </label><input type="text" id="amount" placeholder="In Ethereum e.g., 0.035"></input>
+  <br><input type="hidden" id="task" value="123456"></input>
+  <br><br><button id="Offer" onclick="App.offer()">Offer</button>
   <br><br>
   <span id="status"></span>
   <br>
+  <br>
+  <h2>Tasks</h2>
+  <div id="task_list">
+    No open tasks.
+  </div>
 </body>
 </html>
diff --git a/app/javascripts/app.js b/app/javascripts/app.js
@@ -17,9 +17,17 @@ var DoneButton = contract(donebutton_artifacts);
 var accounts;
 var account;
 
+// Handy functions
+function getParameters(search) {
+  return search.slice(1).split('&').reduce(function(p,c,i,a) {p[c.split('=')[0]] = c.split('=')[1]; return p;}, {})
+};
+
 window.App = {
   start: function() {
     var self = this;
+
+    // Make sure parameters are correct.
+    this.snarfParams();
 
     // Bootstrap the DoneButton abstraction for Use.
     DoneButton.setProvider(web3.currentProvider);
@@ -39,13 +47,54 @@ window.App = {
       accounts = accs;
       account = accounts[0];
     });
+    this.loadList();
   },
+  snarfParams: function() {
+    var parameters = getParameters(location.search);
+    if (parameters['id'] === undefined) {
+      console.log("How did you get here?");
+      // Could do something like this, but not for the demo.
+      // location.replace("/");
+    }
+
+    var id = parameters['id'];
+    console.log(id);
+    document.getElementById("task").value = id;
+    var description = document.getElementById("description");
+    var deadline = document.getElementById("deadline");
+    var amount = document.getElementById("amount");
+    description.innerHTML = "Narfle the Garthok!";
+    deadline.innerHTML = "12/22/2017";
+    amount.innerHTML = "0.85";
+  },
+
+  // Load a list of open tasks
+  loadList: function() {
+    var task_list = document.getElementById("task_list");
+    var tasks = [
+      {id: '11111', description: "Narfle the Garthok!", amount: "0.085", deadline: "12/22/2017", done: false},
+      {id: '22222', description: "Lolligag in Riverwood.", amount: "0.125", deadline: "11/15/2017", done: true},
+    ];
 
+    var html = '<table class="tasks"><thead><tr><th>Description</th><th>Amount</th><th>Deadline</th><th>Do It?</th></tr></thead>';
+    tasks.forEach(function (i) {
+      html += '<tr><td>' + i['description'] + '</td><td>'+ i['amount'] + '</td><td>'+ i['deadline']  +'</td><td>'+ '<a href="\done.html?id=' + i['id'] + '">Ok</a>' +'</td></tr>';
+    });
+    html += '</table>';
+    task_list.innerHTML = html;
+  },
+
   setStatus: function(message) {
     var status = document.getElementById("status");
     status.innerHTML = message;
   },
+
+  // Add a new offer to the list of tasks in the contract.
+  offer: function() {
 
+  },
+
+  // Mark the current offer as done.
   done: function() {
     var self = this;
 

diff --git a/app/stylesheets/app.css b/app/stylesheets/app.css
@@ -50,3 +50,15 @@ h3 {
 .hint {
   color: #666;
 }
+.tasks {
+    width: 90%;
+    margin: auto;
+}
+
+.tasks th {
+    text-align: center;
+}
+
+.tasks td {
+    text-align: center;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -8,9 +8,10 @@ module.exports = {
     filename: 'app.js'
   },
   plugins: [
-    // Copy our app's index.html to the build folder.
+    // Copy our app's html to the build folder.
     new CopyWebpackPlugin([
-      { from: './app/index.html', to: "index.html" }
+      { from: './app/index.html', to: "index.html" },
+      { from: './app/done.html', to: "done.html" }
     ])
   ],
   module: {