Skip to content

P
pet-shop-tutorial
Commit f964c57c authored by cfm090304's avatar cfm090304
Browse files
Options

初始化提交

parents
Pipeline #28 canceled with stages
      Expand all Hide whitespace changes
      Inline Side-by-side
      Showing with 328 additions and 0 deletions
      src/css/bootstrap.min.css 0 → 100644
      View file @ f964c57c
      This source diff could not be displayed because it is too large. You can view the blob instead.
      src/css/bootstrap.min.css.map 0 → 100644
      View file @ f964c57c
      This diff is collapsed.
      src/fonts/glyphicons-halflings-regular.svg 0 → 100644
      View file @ f964c57c
      This source diff could not be displayed because it is too large. You can view the blob instead.
      src/index.html 0 → 100644
      View file @ f964c57c
      <!DOCTYPE html>
      <html lang="en">
      <head>
      <meta charset="utf-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
      <title>Pete's Pet Shop</title>
      <!-- Bootstrap -->
      <link href="css/bootstrap.min.css" rel="stylesheet">
      <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
      <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
      <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
      <![endif]-->
      </head>
      <body>
      <div class="container">
      <div class="row">
      <div class="col-xs-12 col-sm-8 col-sm-push-2">
      <h1 class="text-center">Pete's Pet Shop</h1>
      <hr/>
      <br/>
      </div>
      </div>
      <div id="petsRow" class="row">
      <!-- PETS LOAD HERE -->
      </div>
      </div>
      <div id="petTemplate" style="display: none;">
      <div class="col-sm-6 col-md-4 col-lg-3">
      <div class="panel panel-default panel-pet">
      <div class="panel-heading">
      <h3 class="panel-title">Scrappy</h3>
      </div>
      <div class="panel-body">
      <img alt="140x140" data-src="holder.js/140x140" class="img-rounded img-center" style="width: 100%;" src="https://animalso.com/wp-content/uploads/2017/01/Golden-Retriever_6.jpg" data-holder-rendered="true">
      <br/><br/>
      <strong>Breed</strong>: <span class="pet-breed">Golden Retriever</span><br/>
      <strong>Age</strong>: <span class="pet-age">3</span><br/>
      <strong>Location</strong>: <span class="pet-location">Warren, MI</span><br/><br/>
      <button class="btn btn-default btn-adopt" type="button" data-id="0">Adopt</button>
      </div>
      </div>
      </div>
      </div>
      <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
      <!-- Include all compiled plugins (below), or include individual files as needed -->
      <script src="js/bootstrap.min.js"></script>
      <script src="js/web3.min.js"></script>
      <script src="js/truffle-contract.js"></script>
      <script src="js/app.js"></script>
      </body>
      </html>
      src/js/app.js 0 → 100644
      View file @ f964c57c
      App = {
      web3Provider: null,
      contracts: {},
      init: async function() {
      // Load pets.
      $.getJSON('../pets.json', function(data) {
      var petsRow = $('#petsRow');
      var petTemplate = $('#petTemplate');
      for (i = 0; i < data.length; i ++) {
      petTemplate.find('.panel-title').text(data[i].name);
      petTemplate.find('img').attr('src', data[i].picture);
      petTemplate.find('.pet-breed').text(data[i].breed);
      petTemplate.find('.pet-age').text(data[i].age);
      petTemplate.find('.pet-location').text(data[i].location);
      petTemplate.find('.btn-adopt').attr('data-id', data[i].id);
      petsRow.append(petTemplate.html());
      }
      });
      return await App.initWeb3();
      },
      initWeb3: async function() {
      /*
      * Replace me...
      */
      // Modern dapp browsers...
      if (window.ethereum) {
      App.web3Provider = window.ethereum;
      try {
      // Request account access
      await window.ethereum.enable();
      } catch (error) {
      // User denied account access...
      console.error("User denied account access")
      }
      }
      // Legacy dapp browsers...
      else if (window.web3) {
      App.web3Provider = window.web3.currentProvider;
      }
      // If no injected web3 instance is detected, fall back to Ganache
      else {
      App.web3Provider = new Web3.providers.HttpProvider('http://localhost:7545');
      }
      web3 = new Web3(App.web3Provider);
      return App.initContract();
      },
      initContract: function() {
      /*
      * Replace me...
      */
      // 加载Adoption.json，保存了Adoption的ABI（接口说明）信息及部署后的网络(地址)信息，它在编译合约的时候生成ABI，在部署的时候追加网络信息
      $.getJSON('Adoption.json', function(data) {
      // 用Adoption.json数据创建一个可交互的TruffleContract合约实例。
      var AdoptionArtifact = data;
      App.contracts.Adoption = TruffleContract(AdoptionArtifact);
      // Set the provider for our contract
      App.contracts.Adoption.setProvider(App.web3Provider);
      // Use our contract to retrieve and mark the adopted pets
      return App.markAdopted();
      });
      return App.bindEvents();
      },
      bindEvents: function() {
      $(document).on('click', '.btn-adopt', App.handleAdopt);
      },
      markAdopted: function(adopters, account) {
      /*
      * Replace me...
      */
      var adoptionInstance;
      App.contracts.Adoption.deployed().then(function(instance) {
      adoptionInstance = instance;
      // 调用合约的getAdopters(), 用call读取信息不用消耗gas
      return adoptionInstance.getAdopters.call();
      }).then(function(adopters) {
      for (i = 0; i < adopters.length; i++) {
      if (adopters[i] !== '0x0000000000000000000000000000000000000000') {
      $('.panel-pet').eq(i).find('button').text('Success').attr('disabled', true);
      }
      }
      }).catch(function(err) {
      console.log(err.message);
      });
      },
      handleAdopt: function(event) {
      event.preventDefault();
      var petId = parseInt($(event.target).data('id'));
      /*
      * Replace me...
      */
      var adoptionInstance;
      // 获取用户账号
      web3.eth.getAccounts(function(error, accounts) {
      if (error) {
      console.log(error);
      }
      var account = accounts[0];
      App.contracts.Adoption.deployed().then(function(instance) {
      adoptionInstance = instance;
      // 发送交易领养宠物
      return adoptionInstance.adopt(petId, {from: account});
      }).then(function(result) {
      return App.markAdopted();
      }).catch(function(err) {
      console.log(err.message);
      });
      });
      }
      };
      $(function() {
      $(window).load(function() {
      App.init();
      });
      });
      src/js/bootstrap.min.js 0 → 100644
      View file @ f964c57c
      This diff is collapsed.
      src/js/truffle-contract.js 0 → 100644
      View file @ f964c57c
      This diff is collapsed.
      src/js/web3.min.js 0 → 100644
      View file @ f964c57c
      This source diff could not be displayed because it is too large. You can view the blob instead.
      src/pets.json 0 → 100644
      View file @ f964c57c
      [
      {
      "id": 0,
      "name": "Frieda",
      "picture": "images/scottish-terrier.jpeg",
      "age": 3,
      "breed": "Scottish Terrier",
      "location": "Lisco, Alabama"
      },
      {
      "id": 1,
      "name": "Gina",
      "picture": "images/scottish-terrier.jpeg",
      "age": 3,
      "breed": "Scottish Terrier",
      "location": "Tooleville, West Virginia"
      },
      {
      "id": 2,
      "name": "Collins",
      "picture": "images/french-bulldog.jpeg",
      "age": 2,
      "breed": "French Bulldog",
      "location": "Freeburn, Idaho"
      },
      {
      "id": 3,
      "name": "Melissa",
      "picture": "images/boxer.jpeg",
      "age": 2,
      "breed": "Boxer",
      "location": "Camas, Pennsylvania"
      },
      {
      "id": 4,
      "name": "Jeanine",
      "picture": "images/french-bulldog.jpeg",
      "age": 2,
      "breed": "French Bulldog",
      "location": "Gerber, South Dakota"
      },
      {
      "id": 5,
      "name": "Elvia",
      "picture": "images/french-bulldog.jpeg",
      "age": 3,
      "breed": "French Bulldog",
      "location": "Innsbrook, Illinois"
      },
      {
      "id": 6,
      "name": "Latisha",
      "picture": "images/golden-retriever.jpeg",
      "age": 3,
      "breed": "Golden Retriever",
      "location": "Soudan, Louisiana"
      },
      {
      "id": 7,
      "name": "Coleman",
      "picture": "images/golden-retriever.jpeg",
      "age": 3,
      "breed": "Golden Retriever",
      "location": "Jacksonwald, Palau"
      },
      {
      "id": 8,
      "name": "Nichole",
      "picture": "images/french-bulldog.jpeg",
      "age": 2,
      "breed": "French Bulldog",
      "location": "Honolulu, Hawaii"
      },
      {
      "id": 9,
      "name": "Fran",
      "picture": "images/boxer.jpeg",
      "age": 3,
      "breed": "Boxer",
      "location": "Matheny, Utah"
      },
      {
      "id": 10,
      "name": "Leonor",
      "picture": "images/boxer.jpeg",
      "age": 2,
      "breed": "Boxer",
      "location": "Tyhee, Indiana"
      },
      {
      "id": 11,
      "name": "Dean",
      "picture": "images/scottish-terrier.jpeg",
      "age": 3,
      "breed": "Scottish Terrier",
      "location": "Windsor, Montana"
      },
      {
      "id": 12,
      "name": "Stevenson",
      "picture": "images/french-bulldog.jpeg",
      "age": 3,
      "breed": "French Bulldog",
      "location": "Kingstowne, Nevada"
      },
      {
      "id": 13,
      "name": "Kristina",
      "picture": "images/golden-retriever.jpeg",
      "age": 4,
      "breed": "Golden Retriever",
      "location": "Sultana, Massachusetts"
      },
      {
      "id": 14,
      "name": "Ethel",
      "picture": "images/golden-retriever.jpeg",
      "age": 2,
      "breed": "Golden Retriever",
      "location": "Broadlands, Oregon"
      },
      {
      "id": 15,
      "name": "Terry",
      "picture": "images/golden-retriever.jpeg",
      "age": 2,
      "breed": "Golden Retriever",
      "location": "Dawn, Wisconsin"
      }
      ]
      Markdown is supported
      0% or
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment