Addition of styles, code cleanup

jtomes123 · Jan 14, 2018 · 05ea2b1 · 05ea2b1
1 parent c88bc59
commit 05ea2b1
Show file tree

Hide file tree

Showing 4 changed files with 99 additions and 25 deletions.
diff --git a/Frontend/client/main.html b/Frontend/client/main.html
@@ -28,6 +28,18 @@ <h1>No web3 detected</h1><br>
       <input type="submit" text="Submit"> 
     </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">
+        <br>
+        <h4>Text color</h4>
+        <input id="textc" class="colorsel" type="color" name="textc" value="#000000">
+        <br>
+        <h4>Show address qrcode</h4>
+        <input id="showqr" type="checkbox" checked name="showqr">
+        <h4><a href="{{link}}" target="_blank">Preview</a></h4>
+      </form>
       <h4>Link:</h4>
       <code>{{link}}</code>
       <h4>iframe:</h4>
@@ -43,4 +55,5 @@ <h4>iframe:</h4>
     <p>{{content}}</p>
     <p><footer>{{signature}}</footer></p>
   </div>
+  <aside class="poweredby">Powered by <a href="http://heroku.ethtags.com">Dogtags</a>.</aside>
 </template>
diff --git a/Frontend/client/main.js b/Frontend/client/main.js
@@ -13,6 +13,7 @@ Template.main.onCreated(function mainOnCreated() {
   this.nameAsync = new ReactiveVar("Retrieving...");
   this.contentAsync = new ReactiveVar("Retrieving...");
   this.address = new ReactiveVar("Address");
+  this.link = new ReactiveVar("#");
   var DogtagsContract = web3.eth.contract([
       {
         "constant": true,
@@ -106,6 +107,7 @@ Template.main.onCreated(function mainOnCreated() {
   var na = this.nameAsync;
   var ca = this.contentAsync;
   var adr = this.address;
+  var lnk = this.link;
   Meteor.setTimeout(function() {
     console.log(web3.eth.accounts);
     adr.set(web3.eth.accounts[0]);
@@ -124,7 +126,10 @@ Template.main.onCreated(function mainOnCreated() {
       else
           console.error(error);
     });
-  } ,2500);
+  } ,750);
+  Meteor.setTimeout(function() {
+    lnk.set("http://ethtags.herokuapp.com" + "/iframe/" + adr.get());
+  }, 1000);
 });
 
 Template.main.helpers({
@@ -138,23 +143,27 @@ Template.main.helpers({
     return ca.get();
   },
   link() {
-    return "ethtags.herokuapp.com/iframe/"+Template.instance().address.get();
+    return Template.instance().link.get();
   },
   iframe() {
-    return "<iframe src=\"ethtags.herokuapp.com/iframe/"+Template.instance().address.get()+"\"></iframe>";
+    return "<iframe src=\""+ Template.instance().link.get() +"\"></iframe>";
   }
 });
 
 Template.main.events({
   'submit .new-post'(event, instance) {
-    event.preventDefault();
-    instance.dogtags.SetDogtag(event.target.name.value, $('textarea').get(0).value, function (error, result){
-      if(!error)
-          console.log(result)
-      else
-          console.error(error);
-  });
-},
+      event.preventDefault();
+      instance.dogtags.SetDogtag(event.target.name.value, $('textarea').get(0).value, function (error, result){
+        if(!error)
+            console.log(result)
+        else
+            console.error(error);
+      });
+  },
+  'change .style'(event, instance) {
+    //console.log("Change: " + $("#bgc").val() + " " + $("#textc").val() + " " + $("#showqr").is(":checked"));
+    instance.link.set("http://ethtags.herokuapp.com" + "/iframe/" + instance.address.get() + "/" + $("#showqr").is(":checked") + "/" + $("#bgc").val().replace("#", "") + "/" + $("#textc").val().replace("#", ""));
+  },
 });
 
 Template.iframe.helpers({
@@ -171,21 +180,40 @@ Template.iframe.helpers({
 });
 Template.iframe.onRendered(function () {
   var adr = FlowRouter.getParam("_id");
-  $('#code').qrcode({
-    size: 150,
-    text: adr,
-    radius: 0.5,
-    quiet: 1,
-    exLevel: 'H',
-    mode: 2,
-    label: 'Address',
-    fontname: 'sans',
-    fontcolor: '#000',
-  });
+  var bgc = FlowRouter.getParam('_bgc');
+  var textc = FlowRouter.getParam('_textc');
+  var qrcodec = '000000';
+  if(typeof(textc) != 'undefined')
+    qrcodec = textc;
+  if(FlowRouter.getParam("_showqr") != "false")
+  {
+    $('#code').qrcode({
+      size: 150,
+      text: adr,
+      radius: 0.5,
+      quiet: 1,
+      exLevel: 'H',
+      mode: 2,
+      label: 'Ethereum',
+      fontname: 'sans',
+      fontcolor: '#' + qrcodec,
+      fill: '#' + qrcodec,
+    });
+  }
+  else
+  {
+    $('#code').hide();
+  }
+
+  if(typeof(bgc) != 'undefined')
+    $('body').css('background-color', '#' + bgc);
+  if(typeof(textc) != 'undefined')
+    $('body').css('color', '#' + textc);
 });
 Template.iframe.onCreated(function iframeOnCreated() {
+  //TODO: Change to mainnet when published
   if(typeof web3 === 'undefined')
-    BlazeLayout.render('App_Body', {main: 'eth_miss'});
+    web3 = new Web3(new Web3.providers.HttpProvider('https://ropsten.infura.io/'));
 
   this.nameAsync = new ReactiveVar("Retrieving...");
   this.contentAsync = new ReactiveVar("Retrieving...");
@@ -301,7 +329,7 @@ Meteor.setTimeout(function() {
     else
         console.error(error);
   });
-} ,1500);
+} ,750);
 });
 
 FlowRouter.route('/iframe/:_id', {
@@ -310,6 +338,27 @@ FlowRouter.route('/iframe/:_id', {
     BlazeLayout.render('App_Body', {main: 'iframe', address: FlowRouter.getParam('_id')});
   }
 });
+FlowRouter.route('/iframe/:_id/:_showqr', {
+  name: 'iframe',
+  action() {
+    BlazeLayout.render('App_Body', {main: 'iframe', address: FlowRouter.getParam('_id'), 
+      hideqr: FlowRouter.getParam('_showqr')});
+  }
+});
+FlowRouter.route('/iframe/:_id/:_showqr/:_bgc', {
+  name: 'iframe',
+  action() {
+    BlazeLayout.render('App_Body', {main: 'iframe', address: FlowRouter.getParam('_id'), 
+      hideqr: FlowRouter.getParam('_showqr')});
+  }
+});
+FlowRouter.route('/iframe/:_id/:_showqr/:_bgc/:_textc', {
+  name: 'iframe',
+  action() {
+    BlazeLayout.render('App_Body', {main: 'iframe', address: FlowRouter.getParam('_id'), 
+      hideqr: FlowRouter.getParam('_showqr')});
+  }
+});
 FlowRouter.route('/', {
   name: 'main',
   action() {

diff --git a/Frontend/client/main.less b/Frontend/client/main.less
@@ -20,6 +20,9 @@ body header footer {
 body div {
     margin: auto;
 }
+body {
+    padding: 5%;
+}
 .new-post * {
     width: 100%;
 }
@@ -57,4 +60,11 @@ body div {
 
 canvas {
     float: left;
-}
+}
+.colorsel {
+    padding: 2px;
+}
+.poweredby {
+    text-align: center;
+    font-size: 0.75rem;
+}
diff --git a/Frontend/server/main.js b/Frontend/server/main.js
@@ -3,3 +3,5 @@ import { Meteor } from 'meteor/meteor';
 Meteor.startup(() => {
   // code to run on server at startup
 });
+
+