Vue

by Daedalus

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div id="app" class="container-fluid">
  <div class="form-group mt-2">
    <input type="file" ref="files" multiple @change="parseFiles" />
  </div>
  <div class="form-group mt-2">
    <input type="text" class="form-control" v-model="termStart" placeholder="startX startY startZ" />
  </div>
  <div class="form-group mt-2">
    <input type="text" class="form-control" v-model="termEnd" placeholder="endX endY endZ" />
  </div>
  <div class="form-group mt-2">
    <button type="button" class="btn btn-primary" @click="search">
      Search
    </button>
  </div>
  <div class="form-group mt-2">
    <ul>
      <li>&lt;filename&gt; name: x y z</li>
      <li v-for="result in searchResults">&lt;{{result.file}}&gt; {{result.name}}: {{result.x}} {{result.y}} {{result.z}}</li>
    </ul>
  </div>
</div>

Vue

var parser = new DOMParser();
new Vue({
  el: "#app",
  data: {
  	files: [],
    termStart: '',
    termEnd: '',
    searchResults: []
  },
  methods: {
  	parseFiles() {
      let file;

      // Looping in case they uploaded multiple files
      for(var x = 0, xlen = this.$refs.files.files.length; x < xlen; x++) {
        file = this.$refs.files.files[x];
        var reader = new FileReader();

        reader.onload = (e) => {
          let data = e.target.result; // File contents here
          this.files.push({name: file.name, data});
        };

        reader.readAsText(file);
      }
    },
    search() {
      let searchArr = [];
      this.files.forEach(file => {
      	let xmlDoc = parser.parseFromString(file.data, "text/xml");
        for (let i = 0; i < xmlDoc.getElementsByTagName('group').length; i++) {
        	let group = xmlDoc.getElementsByTagName('group')[i],
              name = group.attributes.name.nodeValue,
              coords = group.attributes.pos.nodeValue.split(' ');
          searchArr.push({
          	file: file.name,
            name,
            x: parseFloat(coords[0]),
            y: parseFloat(coords[1]),
            z: parseFloat(coords[2])
          });
        }
      });
      this.searchResults = searchArr.filter(result => {
       if ((result.x <= this.start.x && result.x >= this.end.x)
       		 && (result.y <= this.start.y && result.y >= this.end.y)
           && (result.z <= this.start.z && result.z >= this.end.z)) {
         return true;
       } else {
         return false;
       }
      });
    }
  },
  computed: {
  	start() {
      let terms = this.termStart.split(' ');
    	return {
      	x: parseFloat(terms[0]),
        y: parseFloat(terms[1]),
        z: parseFloat(terms[2])
      }
    },
    end() {
      let terms = this.termEnd.split(' ');
    	return {
      	x: parseFloat(terms[0]),
        y: parseFloat(terms[1]),
        z: parseFloat(terms[2])
      }
    }
  }
});