function startApp()
{
  var app = new Vue({
    el: '#app',

    data: {
    },

    created: function()
    {
      var self = this;

      self.notificationTimer = null;

      // Sequential loading of all the settings makes sure
      // we don't overload the ESP8266 with requests, as that
      // can cause it to run out of memory easily.
      // This is a horrible way to implement it, but I don't feel like
      // including a big library or working out a clean short solution
      // at the moment, and it works :)
      self.loadStatus().then(function()
      {
        self.loadConnection().then(function()
        {
          self.loadSystem().then(function()
          {
            self.stopLoadingIndicator();
            self.loading = false;
          });
        });
      });
    },

    methods: {



      loadConnection: function()
      {
        var self = this;
        return axios.get('/api/connection', { retry: 10, retryDelay: 1000 })
          .then(function(response)
          {
            if (typeof response.data == 'object')
              self.connection = response.data;
          })
          .catch(self.handleAPIError.bind(self, 'error.loadConnection'));
      },

      loadSystem: function()
      {
        var self = this;
        return axios.get('/api/system', { retry: 10, retryDelay: 1000 })
          .then(function(response)
          {
            if (typeof response.data == 'object')
              self.system = response.data;
          })
          .catch(self.handleAPIError.bind(self, 'error.loadSystem'));
      },


      applyConnection: function()
      {
        var self = this;
        if (self.saving) return;

        self.saving = true;

        axios.post('/api/connection', {
            hostname: self.connection.hostname,
            accesspoint: self.connection.accesspoint,
            station: self.connection.station,
            ssid: self.connection.ssid,
            password: self.connection.password,
            dhcp: self.connection.dhcp,
            ip: self.connection.ip,
            subnetmask: self.connection.subnetmask,
            gateway: self.connection.gateway,
        }, { retry: 10, retryDelay: 1000, headers: { 'Content-Type': 'application/json' } })
          .then(function(response)
          {
          })
          .catch(self.handleAPIError.bind(self, 'error.applyConnection'))
          .then(function()
          {
            self.saving = false;
          });
      },

      applySystem: function()
      {
        var self = this;
        if (self.saving) return;

        self.saving = true;

        axios.post('/api/system', self.system, { retry: 10, retryDelay: 1000, headers: { 'Content-Type': 'application/json' } })
          .then(function(response)
          {
            self.showNotification(i18n.t('rebootPending'));
          })
          .catch(self.handleAPIError.bind(self, 'error.applySystem'))
          .then(function()
          {
            self.saving = false;
          });
      },


      uploadFirmware: function()
      {
        var self = this;
        if (self.saving) return;

        self.saving = true;
        self.uploadProgress = 0;


        var data = new FormData();
        data.append('file', document.getElementById('firmwareFile').files[0]);

        var config = {
          timeout: 360000,
          onUploadProgress: function(progressEvent)
          {
            self.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
          }
        };

        axios.post('/api/firmware', data, config)
          .then(function(response)
          {
            self.showNotification(i18n.t('rebootPending'));
          })
          .catch(self.handleAPIError.bind(self, 'error.uploadFirmware'))
          .then(function()
          {
            self.uploadProgress = false;
            self.saving = false;

            document.getElementById('firmware').reset();
          });
      },
    }
  });
}