v

<template>
  <div class="py-4">
    <v-card class="rounded-card mb-4" v-for="(item, index) in cardInfo" :key="index">
      <v-card-title>
        <v-icon color="secondary" left>{{item.icon}}</v-icon>
        <span class="title font-weight-light">{{item.name}}</span>
      </v-card-title>
      <v-divider></v-divider>
      <v-list v-for="(item, index) in item.content" :key="index">
        <v-list-tile>
          <v-list-tile-content>
            <v-list-tile-title>{{item.content}}</v-list-tile-title>
            <v-list-tile-sub-title>{{item.name}}</v-list-tile-sub-title>
          </v-list-tile-content>
        </v-list-tile>
      </v-list>
    </v-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mouseEvent: "determining...",
      motionEvent: "determining...",
      orientEvent: "determining...",
      absolute: "",
      alpha: 0,
      beta: 0,
      gamma: 0,
      accelX: 0,
      accelY: 0,
      accelZ: 0,
      eventAlpha: "determining...",
      eventBeta: "determining..."
    };
  },
  created() {
    window.addEventListener("devicemotion", this.accelMove);
    window.addEventListener("deviceorientation", this.gyroMove);
  },
  destroyed() {
    window.removeEventListener("devicemotion", this.accelMove);
    window.removeEventListener("deviceorientation", this.gyroMove);
  },
  computed: {
    gyroInfo: function() {
      return [
        { name: "alpha", content: this.alpha.toFixed(4) },
        { name: "beta", content: this.beta.toFixed(4) },
        { name: "gamma", content: this.gamma.toFixed(4) }
      ];
    },
    accelInfo: function() {
      return [
        { name: "x", content: this.accelX.toFixed(4) },
        { name: "y", content: this.accelY.toFixed(4) },
        { name: "z", content: this.accelZ.toFixed(4) }
      ];
    },
    cardInfo: function() {
      return [
        { name: "Gyroscope", icon: "360", content: this.gyroInfo },
        { name: "Accelerometer", icon: "forward", content: this.accelInfo }
      ];
    }
  },
  methods: {
    accelMove(event) {
      this.accelX = event.acceleration.x;
      this.accelY = event.acceleration.y;
      this.accelZ = event.acceleration.z;
    },
    gyroMove(event) {
      this.absolute = event.absolute;
      this.alpha = event.alpha;
      this.beta = event.beta;
      this.gamma = event.gamma;
    }
  }
};
</script>

<style>
</style>