Update Is Art for maintainability.

rheaplex · May 8, 2017 · d976547 · d976547
1 parent a6bda62
commit d976547
Show file tree

Hide file tree

Showing 35 changed files with 35,934 additions and 819 deletions.
diff --git a/dapps/is-art/app/.meteor/.finished-upgraders b/dapps/is-art/app/.meteor/.finished-upgraders
diff --git a/dapps/is-art/app/.meteor/.gitignore b/dapps/is-art/app/.meteor/.gitignore
diff --git a/dapps/is-art/app/.meteor/.id b/dapps/is-art/app/.meteor/.id
diff --git a/dapps/is-art/app/.meteor/packages b/dapps/is-art/app/.meteor/packages
diff --git a/dapps/is-art/app/.meteor/platforms b/dapps/is-art/app/.meteor/platforms
diff --git a/dapps/is-art/app/.meteor/release b/dapps/is-art/app/.meteor/release
diff --git a/dapps/is-art/app/.meteor/versions b/dapps/is-art/app/.meteor/versions
diff --git a/dapps/is-art/app/IsArt.sol.js b/dapps/is-art/app/IsArt.sol.js
diff --git a/dapps/is-art/app/is-art.css b/dapps/is-art/app/is-art.css
@@ -1,18 +1,25 @@
-body {
-    text-align: center;
-    font-family: sans;
+#is-art {
+    width: 75vmin;
+    height: 75vmin;
+    position: absolute;
+    top:0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
 }
 
-h1 {
+#is-art h1 {
+    font-family: 'Open Sans', sans-serif;
+    text-align: center;
     font-size: 72pt;
 }
 
-#is_art {
-    position: absolute;
-    top: 50%; left: 50%; width: 500px; height: 600px;
-    margin: -200px 0 0 -250px;
+#is-art-status {
+    color: #550000;
 }
 
-#status {
-    color: #550000;
+#is-art-gui {
+    width: 440px;
+    height: 300px;
 }
diff --git a/dapps/is-art/app/is-art.html b/dapps/is-art/app/is-art.html
@@ -1,18 +1,60 @@
-<head>
-  <title>Is This Contract Art?</title>
-</head>
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Is This Contract Art?</title>
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:700"
+          rel="stylesheet">
+    <link href="../../shared/css/bootstrap.css"
+          rel="stylesheet">
+    <link href="../../shared/css/shared.css"
+          rel="stylesheet">
+    <link href="is-art.css"
+          rel="stylesheet">
+  </head>
+  <body>
+    <div id="updating">Updating...</div>
 
-<body>
-  {{> is_art }}
-  {{> dapp_modalPlaceholder}}
-</body>
+    <div id="status"></div>
 
-<template name="is_art">
-  <h1 id="is_art">This contract <span id="status">{{ status }}</span> art</h1>
-</template>
+    <div id="representation">
+      <div id="is-art">
+        <h1>This<br>
+          contract<br>
+          <span id="is-art-status">may be</span> art</h1>
+      </div>
+    </div>
 
-<template name="toggle_is_art">
-  <h2>Toggle this contract's status as art</h2>
-  <h3>Pay gas from account:</h3>
-  {{> dapp_selectAccount accounts=my_accounts}}
-</template>
+    <!-- Here so we don't have to try to click outside the represenation. -->
+    <div id="background" onclick="Shared.showGui(event, -1)"></div>
+
+    <div id="is-art-gui" class="gui">
+      <h2>Toggle</h2>
+      <form>
+        <div class="form-group">
+          <label for="gui-gas-account">Account to pay gas from</label>
+          <select class="form-control" id="gui-gas-account"></select>
+        </div>
+        <button type="button" class="btn btn-primary"
+                onClick="IsArt.userSelectedUpdate()">Update</button>
+        &nbsp;
+        <button type="button" class="btn btn-default"
+                onClick="IsArt.userSelectedCancel()">Cancel</button>
+      </form>
+      <br>
+      <p><b><i>Note that toggling the status of the contract will cost
+            gas!</i></b></p>
+      <p>To toggle the status of the contract, press &quot;Update&quot;.</p>
+      <p>Otherwise, just press &quot;Cancel&quot;.</p>
+    </div>
+
+    <script src="../../shared/js/jquery.js"></script>
+    <script src="../../shared/js/bootstrap.js"></script>
+    <script src="../../shared/js/web3.js"></script>
+    <script src="../../shared/js/shared.js"></script>
+    <script src="IsArt.sol.js"></script>
+    <script src="is-art.js"></script>
+  </body>
+</html>
diff --git a/dapps/is-art/app/is-art.js b/dapps/is-art/app/is-art.js
@@ -1,5 +1,5 @@
 /*  IsArt - Ethereum contract that is or isn't art.
-    Copyright (C) 2015, 2016  Rhea Myers <rob@Rhea Myers.org>
+    Copyright (C) 2015, 2016, 2017  Rhea Myers <rob@Rhea Myers.org>
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
@@ -15,80 +15,71 @@
     along with this program.  If not, see <http://www.gnu.org/licenses/>.
 */
 
-var TOGGLE_ACCOUNT_SELECTOR = '.dapp-modal-container .dapp-select-account';
+////////////////////////////////////////////////////////////////////////////////
+// The main contract behaviour object
+////////////////////////////////////////////////////////////////////////////////
 
-var bytesToString = function (value) {
-  return web3.toAscii(value).replace(/\0+$/, "");
+var IsArt = {};
+
+////////////////////////////////////////////////////////////////////////////////
+// Blockchain interaction
+////////////////////////////////////////////////////////////////////////////////
+
+IsArt.commitNetworkToggle = function () {
+  this.contract.toggle.sendTransaction({from: Shared.selectedGasAccount()},
+                                        // Callback so we're async for Metamask
+                                        function (error, result) {});
 };
 
-if (Meteor.isClient) {
+////////////////////////////////////////////////////////////////////////////////
+// Representation of the contract's state
+////////////////////////////////////////////////////////////////////////////////
 
-  Template.is_art.helpers({
-    status: function () {
-      return Session.get('status');
-    }
-  });
+IsArt.setContractStatus = function (status) {
+  $('#is-art-status').text(Shared.bytesToString(status));
+};
 
-  // Keep track of when we're updating the contract state on the blockchain
-  // and don't show the update dialog during that time so the user doesn't
-  // waste gas trying to change it again.
-  var updating = false;
-
-  Template.is_art.events({
-    'click': function(){
-      if (! updating) {
-        EthElements.Modal.question({
-          template: 'toggle_is_art',
-          data: {
-            my_accounts: EthAccounts.find().fetch()
-          },
-          ok: function(){
-            updating = true;
-            var is_art = IsArt.deployed();
-            // Update the state on the blockchain
-            var account = TemplateVar.getFrom(TOGGLE_ACCOUNT_SELECTOR, 'value');
-            is_art.toggle({ from: account }).then(function() {
-              return is_art.is_art.call();
-            }).then(function(value) {
-              // We don't need to update the status, the event will do this
-              //Session.set('status', bytesToString(value));
-              updating = false;
-            }).catch(function(e) {
-              console.log(e);
-              alert("Error sending toggling; see log.");
-            });
-          },
-          cancel: true
-        });
-      }
-    }
-  });
+////////////////////////////////////////////////////////////////////////////////
+// Contract manipulation GUI
+////////////////////////////////////////////////////////////////////////////////
 
-  // Why do we put this inside window.onload?
-  // Truffle adds init code *after* this file is inlined, so we can't access
-  //   IsArt.deployed here as it doesn't exist until the init code is called.
-  window.onload = function() {
+IsArt.guiDisplayHook = function () {};
 
-    EthAccounts.init();
+////////////////////////////////////////////////////////////////////////////////
+// GUI user actions
+////////////////////////////////////////////////////////////////////////////////
 
-    var is_art = IsArt.deployed();
+IsArt.userSelectedUpdate = function () {
+  this.commitNetworkToggle();
+  Shared.showUpdating();
+  Shared.hideGui();
+};
 
-    is_art.is_art.call().then(function(value) {
-      var string_value = bytesToString(value);
-      Session.setDefault('status', string_value);
-    });
+IsArt.userSelectedCancel = function () {
+  Shared.hideGui();
+};
 
-    is_art.Status({}, function(error, result){
-      if (! error) {
-        // Store the new status in local storage, updating the UI as a result
-        Session.set('status', bytesToString(result.args.is_art));
-      }
-    });
-  };
-}
+////////////////////////////////////////////////////////////////////////////////
+// Main Program Lifecycle
+////////////////////////////////////////////////////////////////////////////////
 
-if (Meteor.isServer) {
-  Meteor.startup(function () {
-    // code to run on server at startup
+$(window).on('load', function () {
+  Shared.init(IsArt.guiDisplayHook);
+  IsArt.contract = Shared.instantiateContract(contract_data);
+  IsArt.filter = Shared.installFilter(IsArt.contract.Status,
+                                      {},
+                                      function(result) {
+                                        var status = result.args.is_art;
+                                        IsArt.setContractStatus(status);
+                                        // Hide updating when tx is mined.
+                                        // Any update will do this,
+                                        // so it's not ideal.
+                                        // But it's better than nothing.
+                                        Shared.hideUpdating();
+                                      });
+  IsArt.contract.is_art.call(function (err, value) {
+    if (! err) {
+      IsArt.setContractStatus(value);
+    }
   });
-}
+});