erichelgeson · February 22, 2018 02:53
diff --git a/wm.html b/wm.html
 <!DOCTYPE html>
 <html>

 <head>
  <meta charset="UTF-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
    crossorigin="anonymous">
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 </head>

 <body>
  <div id="app">
    <br/>
    <div class="container">
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <div class="alert alert-info" role="alert">
            Enter your Waste Management Account number to see your next pickup schedule
          </div>
          <form @submit.prevent="submitForm">
            <div class="form-group">
              <input id="account" class="form-control" type="text" v-model="account" placeholder="WM Account Number" required/>
            </div>
            <button type="submit" class="btn btn-primary btn-block">Get Schedule</button>
          </form>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 offset-md-3">
          <hr/>
          <h4 v-if="working">
            <center>
              <i class="fas fa-spinner fa-pulse"></i>
            </center>
          </h4>
          <h4 v-if="contracts.length > 0">Schedule</h4>
          <div class="row">
            <div class="col-6 col-sm-6" v-bind:class="{ 'text-right': index % 2 !== 0 }" v-for="(contract, index) in contracts">
              {{ trashOrRecycleEmoji(contract.serviceName) }}
              <span v-if="isToday(contract.nextPickupDate)">
                <span v-if="eta(contract.eta) != null">{{ eta(contract.eta) }}</span>
              </span>
              <span v-else>{{ toMoment(contract.nextPickupDate).endOf('day').fromNow() }}</span>
              <br/>
              <small>{{ contract.pickupSchedule }}</small>
            </div>
          </div>
          <pre>{{ errorMessage }}</pre>
        </div>
      </div>
    </div>
  </div>

  <script>
    var app = new Vue({
      el: '#app',
      data() {
        var lsAccount = localStorage.getItem('account');
        return {
          account: lsAccount,
          contracts: [],
          errorMessage: '',
          working: false
        }
      },
      methods: {
        submitForm() {
          localStorage.setItem('account', this.account);
          this.working = true;
          this.errorMessage = '';
          this.contracts = [];

          axios.get('https://www.wm.com/restconnect/connect/api/v2/account/' + this.account + '/serviceContractDetails')
            .then(response => {
              var contracts = response.data.serviceContractDetails.accountCCDBInfo.serviceContracts
              if (contracts[0] !== undefined) {
                this.contracts = contracts[0].serviceContractDetails
              } else { // WM API returns 200 for everything.
                this.errorMessage = "Bad account number or no active contrats.";
                localStorage.removeItem('account');
              }
              this.working = false;
            })
            .catch(error => {
              this.contracts = [];
              this.errorMessage = error.message;
              localStorage.removeItem('account');
            });
        },
        trashOrRecycleEmoji: function (serviceName) {
          if (serviceName.includes("Recycle")) {
            return "♻️";
          } else {
            return "🗑️";
          }
        },
        isToday: function (date) {
          return moment(date).calendar(moment(), {
            sameDay: '[Today]'
          }) == 'Today';
        },
        eta: function (eta) {
          if (eta && (eta.svcdDateTime !== null)) {
            return eta.reasonDesc + " " + moment(eta.svcdDateTime).format("h:mm a");
          } else {
            return null;
          }
        },
        toMoment: function (date) {
          if (date) {
            return moment(date);
          }
        }
      }
    });
  </script>
 </body>

 </html>
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
	crossorigin="anonymous">
	<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	</head>

	<body>
	<div id="app">
	<br/>
	<div class="container">
	<div class="row">
	<div class="col-md-6 offset-md-3">
	<div class="alert alert-info" role="alert">
	Enter your Waste Management Account number to see your next pickup schedule
	</div>
	<form @submit.prevent="submitForm">
	<div class="form-group">
	<input id="account" class="form-control" type="text" v-model="account" placeholder="WM Account Number" required/>
	</div>
	<button type="submit" class="btn btn-primary btn-block">Get Schedule</button>
	</form>
	</div>
	</div>
	<div class="row">
	<div class="col-md-6 offset-md-3">
	<hr/>
	<h4 v-if="working">
	<center>
	<i class="fas fa-spinner fa-pulse"></i>
	</center>
	</h4>
	<h4 v-if="contracts.length > 0">Schedule</h4>
	<div class="row">
	<div class="col-6 col-sm-6" v-bind:class="{ 'text-right': index % 2 !== 0 }" v-for="(contract, index) in contracts">
	{{ trashOrRecycleEmoji(contract.serviceName) }}
	<span v-if="isToday(contract.nextPickupDate)">
	<span v-if="eta(contract.eta) != null">{{ eta(contract.eta) }}</span>
	</span>
	<span v-else>{{ toMoment(contract.nextPickupDate).endOf('day').fromNow() }}</span>
	<br/>
	<small>{{ contract.pickupSchedule }}</small>
	</div>
	</div>
	<pre>{{ errorMessage }}</pre>
	</div>
	</div>
	</div>
	</div>

	<script>
	var app = new Vue({
	el: '#app',
	data() {
	var lsAccount = localStorage.getItem('account');
	return {
	account: lsAccount,
	contracts: [],
	errorMessage: '',
	working: false
	}
	},
	methods: {
	submitForm() {
	localStorage.setItem('account', this.account);
	this.working = true;
	this.errorMessage = '';
	this.contracts = [];

	axios.get('https://www.wm.com/restconnect/connect/api/v2/account/' + this.account + '/serviceContractDetails')
	.then(response => {
	var contracts = response.data.serviceContractDetails.accountCCDBInfo.serviceContracts
	if (contracts[0] !== undefined) {
	this.contracts = contracts[0].serviceContractDetails
	} else { // WM API returns 200 for everything.
	this.errorMessage = "Bad account number or no active contrats.";
	localStorage.removeItem('account');
	}
	this.working = false;
	})
	.catch(error => {
	this.contracts = [];
	this.errorMessage = error.message;
	localStorage.removeItem('account');
	});
	},
	trashOrRecycleEmoji: function (serviceName) {
	if (serviceName.includes("Recycle")) {
	return "♻️";
	} else {
	return "🗑️";
	}
	},
	isToday: function (date) {
	return moment(date).calendar(moment(), {
	sameDay: '[Today]'
	}) == 'Today';
	},
	eta: function (eta) {
	if (eta && (eta.svcdDateTime !== null)) {
	return eta.reasonDesc + " " + moment(eta.svcdDateTime).format("h:mm a");
	} else {
	return null;
	}
	},
	toMoment: function (date) {
	if (date) {
	return moment(date);
	}
	}
	}
	});
	</script>
	</body>

	</html>