~/equipment-system$ npm i -s https://github.com/spinalcom/spinal-browser-drive

  "name": "spinal-env-viewer-plugin-sample",

~/button-system$ npm i https://github.com/spinalcom/spinal-browser-admin.git

{
  "spinal-env-viewer-plugin-sample": "1.0.0"
}

<template>
<!-- 1: Add an md-element -->
  <md-content class="container md-scrollbar">
    <div>
      hey {{testHello}} - {{count}}
      <md-button @click="getSelection">
        TEST GET SELECTION
      </md-button>
      <md-button @click="logForgeFile">
        TEST GET ForgeFile
      </md-button>
    </div>
<!-- 2: Display the id, name, hydrometry, temperature and state of all equipments in the list -->
    <md-table>
      <md-table-row>
        <md-table-cell>Id</md-table-cell>
        <md-table-cell>Name</md-table-cell>
        <md-table-cell>Hygrometry</md-table-cell>
        <md-table-cell>Temperature</md-table-cell>
     </md-table-row>
      <md-table-row v-for="item in this.list"
                    :key="item._server_id">
        <md-table-cell>{{item.id.get()}}</md-table-cell>
        <md-table-cell>{{item.name.get()}}</md-table-cell>
        <md-table-cell>{{item.hygrometry.get()}}</md-table-cell>
        <md-table-cell>{{item.temperature.get()}}</md-table-cell>
      </md-table-row>
    </md-table>
  </md-content>
</template>

<script>
function loop(func) {
  func();
  setTimeout(() => {
    loop(func);
  }, 1000);
}

// 3: Load Automate from the drive and fill the list with its elements
function loadList() {
  this.spinalSystem.load("/__users__/admin/shared_with_me/Automate").then(
    automate => {
      this.equip = automate.sensors;
      for (let i = 0; i < automate.sensors.length; i++) {
        this.list.push(automate.sensors[i]);
      }
    },
    () => {
      console.log("error: could not load Automate");
    }
  );
}

export default {
  name: "testExtention",

  data() {
	this.spinalSystem;
	this.viewer;
    this.equip;
    return {
      testHello: "HELLO WORLD",
      count: 0,
// 4: The list array which will contain the equipments
      list: []
    };
  },
  methods: {
    getSelection: function() {
      let selection = this.viewer.getSelection();
      console.log(selection);
    },
    logForgeFile: function() {
      this.spinalSystem.getModel().then(forgefile => {
        console.log(forgefile);
      });
    }
  },
  created() {
    this.spinalSystem = window.spinal.spinalSystem;
    this.viewer = window.spinal.ForgeViewer.viewer;
  },
  mounted() {
// 5: Call to loadList
	loadList.call(this);

    let vm = this;
    loop(() => {
      vm.count += 1;
    });
  }
};
</script>

<style>
/* 6: Create the container style */
.container {
  height: calc(100% - 48px);
  overflow-y: auto;
  box-sizing: border-box;
}
</style>