external-tools-frontend/_assets/js/app.js

var DEBUG_APP = true;

$('#dataform').on('submit', function (e) {
  e.preventDefault();

  var inputContent = $.trim($('#data').val());

  if (inputContent.length > 0) {
    var warData = JSON.parse(inputContent);
    if (initApp(warData, 'withSave', warData) != false) {
      $('#data').val('');
    }
  }
});

$('#fileUpload').on('change', function () {
  var fileUploader = document.getElementById("fileUpload");
  if (fileUploader.files.length > 0) {
    getFileContents(fileUploader.files[0]);
  }
});

function initApp(data, callback, callbackData) {
  if (data.results && data.results.length == 3) {
    var reWriteMapData = JSON.parse(JSON.stringify(data));
    reWriteMapData.results[1].ident = reWriteMapData.results[1].ident.replace(/group_\d+_/g, "");
    reWriteMapData.results[2].ident = reWriteMapData.results[2].ident.replace(/group_\d+_/g, "");
    reWriteMapData.results.shift();
    callbackData = data = JSON.parse(JSON.stringify(reWriteMapData));
    delete reWriteMapData;
    if (DEBUG_APP) console.log(data);
  }
  if (!data.results || data.results.length != 2 ||
    !data.results[0] ||
    data.results[0].ident != "body" ||
    !data.results[1] ||
    data.results[1].ident != "clanWarGetInfo" ||
    !data.results[1].result ||
    !data.results[1].result.response) {
    alert("Please recreate the JSON, switch to the main screen, and switch back to GuildWars. Then copy the JSON!");
    return false;
  }

  if (DEBUG_APP) console.log(data)
  var mapData = data.results[1].result.response;

  if (DEBUG_APP) console.log('data', JSON.parse(JSON.stringify(data)));
  enhanceMap(mapData.enemySlots);
  enhanceMap(mapData.ourSlots);

  app.map = mapData;
  app.map.warDate = data.warDate;

  if (DEBUG_APP) console.log('app.map', JSON.parse(JSON.stringify(mapData)));

  Vue.nextTick(function () {
    // Determine which player team has more power: titans or heroes
    determineBestTeam('ally');
    determineBestTeam('enemy');

    // Syncs checkboxes between hero/titan teams
    syncCheckboxes();

    // Highlights the other player team when the other one is hovered
    highlightHovered();

    if (callback == 'withSave') {
      saveToStorage(callbackData);
    }
  });
}

function initApp2(data) {

  var mapData = data;
  if (DEBUG_APP) console.log('data', JSON.parse(JSON.stringify(data)));
  enhanceMap(mapData.enemySlots);
  enhanceMap(mapData.ourSlots);

  app.map = mapData;
  app.map.warDate = data.warDate;

  if (DEBUG_APP) console.log('app.map', JSON.parse(JSON.stringify(mapData)));

  Vue.nextTick(function () {
    // Determine which player team has more power: titans or heroes
    determineBestTeam('ally');
    determineBestTeam('enemy');

    // Syncs checkboxes between hero/titan teams
    syncCheckboxes();

    // Highlights the other player team when the other one is hovered
    highlightHovered();
  });
}

var app = {};
var jsondata = [];

if (DEBUG_APP) {
  Vue.config.devtools = true;
}
console.log("hello");
$.getJSON('/hwtools/data/clanWarGetInfo.json', function (data) {
  console.log("hello 222222222");
  jsondata = data
  jsondata = jsondata.filter(function (el) {
    return !!(el.enemyClan && el.enemyClan.title);
  });
  mapData = jsondata[0];
  enhanceMap(mapData.enemySlots);
  enhanceMap(mapData.ourSlots);

  console.log(jsondata[0]);
  app = new Vue({
    el: '#app',
    data: {
      map: mapData, //mapData,  the data obtained from the game
      mapSlots: mapSlots, // maps building names and types of data obtained from the game
      storage: jsondata || []
    },
    computed: {
      // Helps render enemy teams in order by power level
      orderedEnemies: function () {
        return orderByPower(this.map.enemySlots);
      },
      // Helps render allied teams in order by power level
      orderedAllies: function () {
        return orderByPower(this.map.ourSlots);
      },
      // Renders total team powers: hero, titan, total
      getAllyPower: function () {
        return getTotalPower(this.map.ourSlots);
      },
      // Renders total enemy team powers: hero, titan, total
      getEnemyPower: function () {
        return getTotalPower(this.map.enemySlots);
      }
    },
    filters: {
      formatNumber: function (value) {
        return value.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,');
      },
      unixToLocale: function (value) {
        return new Date(value * 1000).toDateString();
      }
    }
  });
})
.fail(function( jqxhr, textStatus, error ) {
  var err = textStatus + ", " + error;
  console.log( "Request Failed: " + err );
})