BlockChainSample/index.html at master · Roger-Lin-IISI/BlockChainSample · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<meta name="decorator" content=cola>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<script>
$(document).ready(function() {
  abi = [{'constant': true,'inputs': [{'name': '','type': 'bytes32'}],'name': 'votesReceived','outputs': [{'name': '','type': 'uint8'}],'payable': false,'stateMutability': 'view','type': 'function'},{'constant': true,'inputs': [{'name': 'candidate','type': 'bytes32'}],'name': 'validCandidate','outputs': [{'name': '','type': 'bool'}],'payable': false,'stateMutability': 'view','type': 'function'},{'constant': true,'inputs': [{'name': 'candidate','type': 'bytes32'}],'name': 'totalVotesFor','outputs': [{'name': '','type': 'uint8'}],'payable': false,'stateMutability': 'view','type': 'function'},{'constant': true,'inputs': [{'name': '','type': 'uint256'}],'name': 'candidateList','outputs': [{'name': '','type': 'bytes32'}],'payable': false,'stateMutability': 'view','type': 'function'},{'constant': false,'inputs': [{'name': 'candidate','type': 'bytes32'}],'name': 'voteForCandidate','outputs': [],'payable': false,'stateMutability': 'nonpayable','type': 'function'},{'inputs': [{'name': 'candidateNames',        'type': 'bytes32[]'}],'payable': false,'stateMutability': 'nonpayable','type': 'constructor'}]
  VotingContract = web3.eth.contract(abi);
  // In your nodejs console, execute contractInstance.address to get the address at which the contract is deployed and change the line below to use your deployed address
  contractInstance = VotingContract.at('0xed0aa02f302842eb3245740f2a5d70ae08f6979f');
  candidates = {'Alice': 'candidate-1', 'Bob': 'candidate-2', 'Candy': 'candidate-3'}

  $("#vote").click(function(){
    voteForCandidate();
  })
  function voteForCandidate() {
    candidateName = $('#candidate').val();
    contractInstance.voteForCandidate(candidateName, {from: web3.eth.accounts[0]},
      function() {

      });
  }
  loop=()=>{
    let candidateNames = Object.keys(candidates);
    for (let name of candidateNames) {
      let val = contractInstance.totalVotesFor.call(name,(e,result)=>{
        $(`#${candidates[name]}` ).html(result.c[0].toString());
      })
    }
    setTimeout(loop,1000);

  }
  loop()
});
</script>
<body class="container">
    <h1>A Simple Hello World Voting Application</h1>
    <h2>
        本範例的智能合約部署在下列地址<br> 0x9a740465Ac6A2Ef11e3b10BeE5249825f5B8Dedd
    </h2>
    <div class="table-responsive">
        <table class="table table-bordered">
            <thead>
                <tr>
                    <th>Candidate</th>
                    <th>Votes</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>Alice</td>
                    <td id="candidate-1"></td>
                </tr>
                <tr>
                    <td>Bob</td>
                    <td id="candidate-2"></td>
                </tr>
                <tr>
                    <td>Candy</td>
                    <td id="candidate-3"></td>
                </tr>
            </tbody>
        </table>
    </div>
    <input type="text" id="candidate" />
    <a href="#" id="vote" name="vote" class="btn btn-primary">Vote</a>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdn.rawgit.com/ethereum/web3.js/develop/dist/web3.js"></script>
<!-- <script src="./index.js"></script> -->
</html>