Added homepage with the ability to look up a dogtag for specific address

jtomes123 · Mar 23, 2018 · 97264dd · 97264dd
1 parent cecb1bb
commit 97264dd
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 11 deletions.
diff --git a/Frontend/client/main.html b/Frontend/client/main.html
@@ -37,13 +37,13 @@ <h1>No web3 detected</h1><br>
     </form>
     <div class="buttonContainer">
       <form class="style">
-        <h3>Your Dogtag</h3>
-        <h4>Background color</h4>
-        <input id="bgc" class="colorsel" type="color" name="bgc" value="#FFFFFF">
-        <h4>Text color</h4>
-        <input id="textc" class="colorsel" type="color" name="textc" value="#000000">
-        <h4>Show address qrcode</h4>
-        <input id="showqr" type="checkbox" checked name="showqr">
+        <h3 style="width: 100%; text-align:center;">Your Dogtag</h3>
+        <div><h4>Background color</h4>
+        <input id="bgc" class="colorsel" type="color" name="bgc" value="#FFFFFF"></div>
+        <div><h4>Text color</h4>
+        <input id="textc" class="colorsel" type="color" name="textc" value="#000000"></div>
+        <div style="display: flex; justify-content: space-between; align-items: center; width: 50%"><h4>Show address qrcode</h4>
+        <input id="showqr" type="checkbox" checked name="showqr"></div>
         <br>
       </form>
       <button class="previewbut" onclick="{var w = window.open('{{link}}', '_blank'); w.focus(); event.preventDefault();}">Preview</button>
@@ -120,7 +120,7 @@ <h4>iframe:</h4>
   <div class="menu">
     <img src="/icon.svg" class="logo">
     <ul>
-      <li><button class="but_home">Home</button></li>
+      <li><button class="but_home">My Dogtag</button></li>
       <li><button class="but_about">About</button></li>
       <li><button class="but_faq">FAQ</button></li>
     </ul>
@@ -166,15 +166,39 @@ <h4>Dogtag</h4>
       <p id="popupAdr">Address: xxx</p>
       <p id="popupName">Name: xxx</p>
       <p id="popupCon">Bio: xxx</p>
-      <p style="display: flex; justify-content: space-around; align-items: center;">Do you want to donate to the contract? <input type="number" step="0.0001" placeholder="0.5 ETH" id="ethDonateAmount"></p>
+      <p style="display: flex; justify-content: space-around; align-items: center;">
+        Do you want to donate to the contract?
+        <input type="number" step="0.0001" placeholder="0.5 ETH" id="ethDonateAmount"></p>
       <button class="previewbut" id="confirm">Confirm</button><button class="previewbut" id="cancel">Cancel</button>
     </div>
   </div>
 </template>
 
 <template name="withdraw">
   <h2>Withdraw</h2>
-  <p>This page is ment only for the owner of this contract in order to simplify withdrawls. Do not invoke a withdrawl unless you are the owner, the transaction will have no effect otherwise.</p>
-  <p style="display: flex; justify-content: space-around; align-items: center;">How much do you wish to withdraw (less than 90% of total contract balance)? <input type="number" step="0.0001" placeholder="0.5 ETH" id="ethWithdrawAmount"></p>
+  <p>This page is ment only for the owner of this contract in order to simplify withdrawls. Do not invoke a
+     withdrawl unless you are the owner, the transaction will have no effect otherwise.</p>
+  <p style="display: flex; justify-content: space-around; align-items: center;">How much do you wish to withdraw 
+    (less than 90% of total contract balance)? 
+    <input type="number" step="0.0001" placeholder="0.5 ETH" id="ethWithdrawAmount"></p>
   <button class="previewbut">Withdraw</button>
+</template>
+
+<template name="home">
+    {{>title}}
+    <div class="homeSearch">
+      <p>Enter ethereum address</p>
+      <input type="text" id="searchAddress" style="width: 100%;">
+      <button class="previewbut" id="search">Search</button>
+    </div>
+</template>
+<template name="preview">
+  {{>title}}
+  <div class="dogtagPreview">
+    <p style="font-size: 1.5rem" id="name">{{name}}</p>
+    <p id="verified"><b>Verified</b></p>
+    <p style="font-size: 0.8rem" id="address">{{address}}</p>
+    <p id="info">{{info}}</p>
+  </div>
+  <button class="previewbut" id="back">Back</button>
 </template>
diff --git a/Frontend/client/main.js b/Frontend/client/main.js
@@ -382,6 +382,9 @@ Template.main.events({
 //Menu
 //--------------------------------------------------------
 Template.title.events({
+  'click .logo' (event, instance) {
+    FlowRouter.go('home');
+  },
   'click .but_home'(event, instance) {
     FlowRouter.go('main');
   },
@@ -536,7 +539,82 @@ Template.verificationConfirm.onCreated(function verconOnCreated() {
     });
   } ,750);
 });
+//--------------------------------------------------------
+//Home
+//--------------------------------------------------------
+Template.home.events({
+  'click #search'(event, instance) {
+    FlowRouter.go("/preview/" + $("#searchAddress").val());
+},
+});
+//--------------------------------------------------------
+//Preview
+//--------------------------------------------------------
+Template.preview.onCreated(function verconOnCreated() {
+  //TODO: Change to mainnet when published
+  if(typeof web3 === 'undefined')
+    web3 = new Web3(new Web3.providers.HttpProvider('https://ropsten.infura.io/'));
+
+  this.nameAsync = new ReactiveVar("Retrieving...");
+  this.contentAsync = new ReactiveVar("Retrieving...");
+  this.address = FlowRouter.getParam("_id");
 
+  //Gets the instance of Dogtags contract
+  var Dogtags = getContract();
+  console.log(Dogtags);
+  this.data.dogtags = Dogtags;
+  var na = this.nameAsync;
+  var ca = this.contentAsync;
+
+  //Wait for web3 to be injected, to be replaced in future with more efficient logic
+  Meteor.setTimeout(function() {
+    Dogtags.GetDogtagName(FlowRouter.getParam("_id"), function (error, result){
+      if(!error)
+        na.set(result);
+      else
+          console.error(error);
+    });
+
+    Dogtags.GetDogtagContent(FlowRouter.getParam("_id"), function (error, result){
+      if(!error)
+      {
+        ca.set(result);
+      }
+      else
+          console.error(error);
+    });
+
+    Dogtags.IsVerified(FlowRouter.getParam("_id"), function(error, result){
+      if(!error)
+      {
+        if(!result)
+        {
+          // User is not verified, hide the checkmark
+          $("#verified").hide();
+        }
+      }
+      else
+          console.error(error);
+    });
+  } ,750);
+});
+Template.preview.helpers({
+  info(){
+    return Template.instance().contentAsync.get();
+  },
+  name(){
+
+    return Template.instance().nameAsync.get();
+  },
+  address(){
+    return FlowRouter.getParam("_id");
+  },
+});
+Template.preview.events({
+  'click #back'(event, instance) {
+    FlowRouter.go("/");
+},
+});
 //--------------------------------------------------------
 //Iframe
 //--------------------------------------------------------

diff --git a/Frontend/client/routes.js b/Frontend/client/routes.js
@@ -1,3 +1,8 @@
+FlowRouter.route('/preview/:_id', {
+  action() {
+    BlazeLayout.render('App_Body', {main: 'preview', address: FlowRouter.getParam('_id')});
+  }
+});
 FlowRouter.route('/iframe/:_id', {
     name: 'iframe',
     action() {
@@ -26,6 +31,12 @@ FlowRouter.route('/iframe/:_id', {
     }
   });
   FlowRouter.route('/', {
+    name: 'home',
+    action() {
+      BlazeLayout.render('App_Body', {main: 'home'});
+    }
+  });
+  FlowRouter.route('/dogtag', {
     name: 'main',
     action() {
       BlazeLayout.render('App_Body', {main: 'main'});