CameraTrigger/ts/wifiview.ts

/*
 * SPDX-FileCopyrightText: 2023 Sascha Nitsch (@grumpydevelop@contentnation.net) https://contentnation.net/en/grumpydevelop
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 */

/// <reference path="view.ts" />
/// <reference path="cameratrigger.ts" />
interface SSID {
  name: string;
  quality: number;
  active: boolean;
  channel: number;
  encryption: string;
  index: number;
}
class WifiView extends View {
  private ssidlist: Array<SSID>;
  public form: any;
  constructor(app: CameraTrigger) {
    super(app);
    this.render();
    this.ssidlist = [];
  }

  finish() {
    this.root.off("change", "input[name=mode]");
    this.root.find("#ssidscan button").off("click");
    this.root.find("#ssidscan ul").off("change", "input[name=ssidlist]");
    this.root.find("#save").off("click");
  }

  render() {
    var template = $("#tplWifi").html();
    var data:any = {};
    data.l = this.app.lang;
    data.ssid = this.app.wifi.ssid;
    var html = Mustache.render(template, data);
    this.root.html(html);
    var active = $("#" + this.app.wifi.mode);
    active.prop("checked", true);
    this.root.on("change", "input[name=mode]", this, this.modechange);
    this.root.find("#ssidscan button").on("click", this, this.loadSSIDList);
    this.root.find("#save").on("click", this, this.save);
    this.modechange();
  }

  modechange(event?: JQuery.TriggeredEvent) {
    if (event && event.data) {
      event.data.modechange();
      return false;
    }

    var mode = this.root.find("input[name=mode]:checked").val();
    var sync = this.root.find("#ssidscan");
    var ssid = this.root.find("#ssid");
    if (mode == "client") {
      // show sync button and optionally load first list
      sync.removeClass("hidden");
      ssid.attr("disabled","disabled");
      if (!this.ssidlist || this.ssidlist.length == 0) {
        this.loadSSIDList();
      }
    } else {
      // hide sync button
      sync.addClass("hidden");
      ssid.removeAttr("disabled");
    }
  }

  loadSSIDList(event?: JQuery.TriggeredEvent) {
    if (event && event.data) {
      event.preventDefault();
      event.data.loadSSIDList()
      return false;
    }
    var button = this.root.find("#ssidscan button");
    button.addClass("loading");
    Api.get("ssid.json", {}, this, this.ssidListReceived, this.app.error);
  }

  ssidListReceived(listdata) {
    var i;
    this.ssidlist = [];
    var button = this.root.find("#ssidscan button");
    button.removeClass("loading");
    var existing = this.root.find("#ssid").val();
    for (i=0; i < listdata.length; ++i) {
      this.ssidlist.push({name:listdata[i][0], quality: -listdata[i][1], active: listdata[i][0] === existing, channel:listdata[i][2], encryption: this.app.lang.wifi["encryption" + listdata[i][3]], index:i});
    }
    var template = $("#tplWifiSSID").html();
    var data:any = {};
    data.l = this.app.lang;
    data.ssids = this.ssidlist;
    var html = Mustache.render(template, data);
    var list = this.root.find("#ssidscan ul"); 
    list.html(html);
    list.on("change", "input[name=ssidlist]", this, this.selectSSID);
  }

  selectSSID(event?: JQuery.TriggeredEvent) {
    if (event && event.data) {
      event.data.selectSSID();
      return false;
    }
    var ssid = this.root.find("#ssidscan input[name=ssidlist]:checked").val();
    this.root.find("#ssid").val(ssid);
  }

  save(event?: JQuery.TriggeredEvent) {
    if (event && event.data) {
      event.preventDefault();
      event.data.save();
      return false;
    }
    var save = this.root.find("#save");
    save.addClass("loading");
    this.form = {target: save[0]};
    var data = {
      ssid: this.root.find("input[name=ssid]").val(), 
      mode: this.root.find("input[name=mode]:checked").val(),
      password: this.root.find("input[name=password]").val()
    };
    Api.post("wifi",data, this, this.saved, this.app.error);
  }

  saved(response: any) {
    this.root.find("#save").removeClass("loading");
    if (response.error) {
      $.toast({
        text: this.app.lang.error[response.error],
        position: 'top-right',
        icon: 'error'
      });
    } else {
      $.toast({
        text: this.app.lang.generic.savesuccess,
        position: 'top-right',
        icon: 'success'
      });
      window.setTimeout(function(){document.location.href="http://" + response.redirect;}, 3000);
    }
    
  }
}