VpnBoard.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-gray; icon-glyph: paper-plane;

// 添加require，是为了vscode中可以正确引入包，以获得自动补全等功能
if (typeof require === "undefined") require = importModule;
const { DmYY, Runing } = require("./DmYY");

// @组件代码开始
class Widget extends DmYY {
  constructor(arg) {
    super(arg);
    this.name = "Vpn";
    this.en = "vpnBoard";
    this.CACHE_KEY = this.md5(`dataSouce_${this.en}`);
    this.Run();
  }

  useBoxJS = false;
  dataSource = {
    restData: "0",
    usedData: "0",
    todayUsed: "0",
    isCheckIn: false,
  };

  chartConfig = (labels = [], datas = [], text = []) => {
    const color = `#${this.widgetColor.hex}`;
    let template;
    let path = this.FILE_MGR.documentsDirectory();
    path = path + "/VPNBoardTemplate.js";
    if (this.FILE_MGR.fileExists(path)) {
      template = require("./VPNBoardTemplate");
    } else {
      template = `
{
  'type': 'bar',
  'data': {
    'labels': __LABELS__,
    'tips': __TEXT__,
    'datasets': [
      {
        type: 'line',
        backgroundColor: '#fff',
        borderColor: getGradientFillHelper('vertical', ['#c8e3fa', '#e62490']),
        'borderWidth': 2,
        pointRadius: 5,
        'fill': false,
        'data': __DATAS__,
      },
    ],
  },
  'options': {
      plugins: {
        datalabels: {
          display: true,
          align: 'top',
          color: __COLOR__,
          font: {
             size: '16'
          },
          formatter: function(value, context) {
            return context.chart.data.tips[context.dataIndex];
          }
        },
      },
      layout: {
          padding: {
              left: 0,
              right: 0,
              top: 30,
              bottom: 10
          }
      },
      responsive: true,
      maintainAspectRatio: true,
      'legend': {
        'display': false,
      },
      'title': {
        'display': false,
      },
      scales: {
        xAxes: [ // X 轴线
          {
            gridLines: {
              display: false,
              color: __COLOR__,
            },
            ticks: {
              display: true, 
              fontColor: __COLOR__,
              fontSize: '16',
            },
          },
        ],
        yAxes: [
          {
            ticks: {
              display: false,
              beginAtZero: true,
              fontColor: __COLOR__,
            },
            gridLines: {
              borderDash: [7, 5],
              display: false,
              color: __COLOR__,
            },
          },
        ],
      },
    },
 }`;
      const content = `// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-gray; icon-glyph: ellipsis-v;
const template = \`${template}\`;
module.exports = template;`;
      this.FILE_MGR.writeString(path, content);
    }
    template = template.replaceAll("__COLOR__", `'${color}'`);
    template = template.replace("__LABELS__", `${JSON.stringify(labels)}`);
    template = template.replace("__TEXT__", `${JSON.stringify(text)}`);
    template = template.replace("__DATAS__", `${JSON.stringify(datas)}`);
    return template;
  };

  account = {
    title: "",
    url: "",
    email: "",
    password: "",
  };

  range = {
    11.1: { todayUsed: "30M" },
    11.2: { todayUsed: "130M" },
    11.3: { todayUsed: "300M" },
    11.4: { todayUsed: "30M" },
    11.5: { todayUsed: "2g" },
    11.6: { todayUsed: "3G" },
  };
  max = 6;

  init = async () => {
    try {
      if (this.account.url) {
        await this.login();
        await this.checkin();
        await this.dataResults();
        if (Keychain.contains(this.CACHE_KEY)) {
          this.range = JSON.parse(Keychain.get(this.CACHE_KEY));
        }
        const date = new Date();
        const format = new DateFormatter();
        format.dateFormat = "MM.dd";
        const dateDay = format.string(date);
        this.range[dateDay] = this.dataSource;
        const rangeKey = Object.keys(this.range);
        if (rangeKey.length > this.max) {
          for (let i = 0; i <= rangeKey.length - this.max; i++) {
            delete this.range[rangeKey[i]];
          }
        }
        Keychain.set(this.CACHE_KEY, JSON.stringify(this.range));
      }
    } catch (e) {
      console.log(e);
    }
  };

  async login() {
    const table = {
      url: this.account.url,
      body: `email=${encodeURIComponent(
        this.account.email
      )}&passwd=${encodeURIComponent(
        this.account.password
      )}&remember_me=on&rumber-me=week`,
    };
    const request = new Request(table.url);
    request.body = table.body;
    request.method = "POST";
    const data = await request.loadString();
    try {
      if (
        JSON.parse(data).msg.match(
          /邮箱不存在|邮箱或者密码错误|Mail or password is incorrect/
        )
      ) {
        this.notify(this.name, "邮箱或者密码错误");
        console.log("登陆失败");
        this.cookie = request.response
          .cookies((item) => `${item.name}=${item.value}`)
          .join("; ");
      } else {
        console.log("登陆成功");
      }
    } catch (e) {
      console.log(e);
    }
  }

  async checkin() {
    const url = this.account.url;
    let checkinPath =
      url.indexOf("auth/login") !== -1 ? "user/checkin" : "user/_checkin.php";
    const checkinreqest = {
      url: url.replace(/(auth|user)\/login(.php)*/g, "") + checkinPath,
      headers: {
        cookie: this.cookie,
      },
    };
    const data = await this.$request.post(checkinreqest, "STRING");
    if (data.match(/\"msg\"\:/)) {
      console.log("签到成功");
      this.dataSource.isCheckIn = true;
    } else {
      console.log("签到失败");
    }
  }

  async dataResults() {
    let url = this.account.url;
    const userPath =
      url.indexOf("auth/login") !== -1 ? "user" : "user/index.php";
    url = url.replace(/(auth|user)\/login(.php)*/g, "") + userPath;
    const webView = new WebView();
    await webView.loadURL(url);
    const js = `
var response = {todayUsed: "0KB", usedData: "0KB", restData: "0KB"};
if($('.progressbar').length){
  response.todayUsed = $('.progressbar .label-flex:eq(0) .card-tag').text();
  response.usedData =  $('.progressbar .label-flex:eq(1) .card-tag').text();
  response.restData =  $('.progressbar .label-flex:eq(2) .card-tag').text();
} else if(document.body.innerHTML.includes('trafficDountChat')){
  response.todayUsed =  $('.card.card-statistic-2:eq(1) .breadcrumb-item').text().split(' ')[1];
  response.restData =  $('.card.card-statistic-2:eq(1) .card-body').text().trim();
  response.usedData = document.body.innerHTML.match(/trafficDountChat\\s*\\(([^\\)]+)/)[1].match(/\\d[^\\']+/g)[0];
}
completion(response);
    `;
    const response = await webView.evaluateJavaScript(js, true);
    this.dataSource = { ...this.dataSource, ...response };
  }

  translateFlow(value) {
    const unit = [
      { unit: "T", value: 1024 * 1024 },
      { unit: "G", value: 1024 },
      { unit: "M", value: 1 },
      { unit: "K", value: 1 / 1024 },
    ];
    const data = { unit: "", value: parseFloat(value) };
    unit.forEach((item) => {
      if (value.indexOf(item.unit) > -1) {
        data.unit = item.unit;
        data.value = Math.floor(parseFloat(value) * item.value * 100) / 100;
      }
    });

    return data;
  }

  createChart = async (size) => {
    let labels = [],
      data = [],
      text = [];
    const rangeKey = Object.keys(this.range);
    rangeKey.forEach((key) => {
      labels.push(key);
      const value = this.range[key].todayUsed.toLocaleUpperCase();
      const valueUnit = this.translateFlow(value);
      data.push(valueUnit.value);
      text.push(value);
    });
    if (this.widgetSize === "small") {
      labels = labels.slice(-3);
      data = data.slice(-3);
    }
    console.log(data);
    const chart = this.chartConfig(labels, data, text);
    console.log(chart);
    const url = `https://quickchart.io/chart?w=${size.w}&h=${
      size.h
    }&f=png&c=${encodeURIComponent(chart)}`;
    return await this.$request.get(url, "IMG");
  };

  createDivider(w) {
    const drawContext = new DrawContext();
    drawContext.size = new Size(543, this.widgetSize === "small" ? 4 : 2);
    const path = new Path();
    path.addLine(new Point(1000, 20));
    drawContext.addPath(path);
    drawContext.setStrokeColor(new Color("#000", 1));
    drawContext.setLineWidth(2);
    drawContext.strokePath();

    const stackLine = w.addStack();
    stackLine.borderWidth = 1;
    stackLine.borderColor = new Color("#000", 0.4);
    stackLine.addImage(drawContext.getImage());
    w.addSpacer(5);
  }

  async setHeader(w, size) {
    const header = w.addStack();
    header.centerAlignContent();
    const left = header.addStack();
    left.centerAlignContent();
    let icon =
      "https://raw.githubusercontent.com/58xinian/icon/master/glados_animation.gif";
    if (this.account.icon) icon = this.account.icon;
    const stackIcon = left.addStack();
    try {
      const imgIcon = await this.$request.get(icon, "IMG");
      const imgIconItem = stackIcon.addImage(imgIcon);
      let iconSize = new Size(16, 16);
      if (this.widgetSize === "small") iconSize = new Size(12, 12);
      imgIconItem.imageSize = iconSize;
      imgIconItem.cornerRadius = 4;
      left.addSpacer(5);
    } catch (e) {
      console.log(e);
    }

    const vpnName = { ...this.textFormat.title };
    vpnName.size = size;
    vpnName.color = this.widgetColor;
    this.provideText(this.account.title, left, vpnName);

    header.addSpacer();

    const right = header.addStack();
    right.bottomAlignContent();
    const vpnFlow = { ...this.textFormat.title };
    vpnFlow.color = new Color("#26c5bc");
    vpnFlow.size = size;
    this.provideText(
      this.dataSource.isCheckIn ? "已签到" : "未签到",
      right,
      vpnFlow
    );

    w.addSpacer();
  }

  setLabel(w, data, size) {
    const stackLabel = w.addStack();
    const textBattery = { ...this.textFormat.battery };
    textBattery.size = size.label;
    textBattery.color = this.widgetColor;
    this.provideText(data.label, stackLabel, textBattery);

    textBattery.size = size.value;
    const stackValue = w.addStack();
    stackValue.centerAlignContent();
    textBattery.color = new Color(data.color);
    this.provideText(data.value, stackValue, textBattery);
  }

  setFooter(w, size) {
    const footer = w.addStack();
    footer.centerAlignContent();

    this.setLabel(
      footer,
      {
        label: "剩余：",
        color: "#ff3e3e",
        value: this.dataSource.restData,
        unit: "GB",
      },
      size
    );
    footer.addSpacer();
    this.setLabel(
      footer,
      {
        label: "累计：",
        color: "#dc9e28",
        value: this.dataSource.usedData,
        unit: "GB",
      },
      size
    );
  }

  setContent = async (w, size) => {
    const imageFlow = await this.createChart(size);
    const stackContent = w.addStack();
    stackContent.addImage(imageFlow);
  };

  renderSmall = async (w) => {
    await this.setHeader(w, 10);
    await this.setContent(w, { w: 195, h: 85 });
    this.createDivider(w);
    this.setFooter(w, { label: 6, value: 8 });
    return w;
  };

  renderMedium = async (w) => {
    await this.setHeader(w, 16);
    await this.setContent(w, { w: 390, h: 85 });
    this.createDivider(w);
    this.setFooter(w, { label: 14, value: 18 });
    return w;
  };

  renderLarge = async (w) => {
    w.addText("暂不支持");
    return w;
  };

  /**
   * 渲染函数，函数名固定
   * 可以根据 this.widgetFamily 来判断小组件尺寸，以返回不同大小的内容
   */
  async render() {
    await this.init();
    const widget = new ListWidget();
    await this.getWidgetBackgroundImage(widget);
    if (this.widgetFamily === "medium") {
      return await this.renderMedium(widget);
    } else if (this.widgetFamily === "large") {
      return await this.renderLarge(widget);
    } else {
      return await this.renderSmall(widget);
    }
  }

  Run = () => {
    try {
      if (config.runsInApp) {
        this.registerAction("默认账号", this.actionSettings, {
          name: "text.badge.star",
          color: "#a0d911",
        });
        this.registerAction(
          "新增账号",
          async () => {
            const account = await this.setAlertInput(
              "添加账号",
              "添加账号数据，添加完成之后请去设置默认账号",
              {
                title: "机场名",
                icon: "图标",
                url: "登陆地址",
                email: "邮箱账号",
                password: "密码",
              },
              false
            );
            if (!this.settings.dataSource) this.settings.dataSource = [];
            if (!account) return;
            if (
              account.title &&
              account.url &&
              account.email &&
              account.password
            ) {
              this.settings.dataSource.push(account);
            }
            this.settings.dataSource = this.settings.dataSource.filter(
              (item) => item
            );
            this.saveSettings();
          },
          {
            name: "text.badge.plus",
            color: "#fadb14",
          }
        );
        this.registerAction("清除账号", this.deletedVpn, {
          name: "text.badge.xmark",
          color: "#f5222d",
        });
        this.registerAction("基础设置", this.setWidgetConfig);
      }
      this.account = this.settings.account || this.account;
      this.CACHE_KEY += "_" + this.account.title;
      const index =
        typeof args.widgetParameter === "string"
          ? parseInt(args.widgetParameter)
          : false;
      if (
        this.settings.dataSource &&
        this.settings.dataSource[index] &&
        index !== false
      ) {
        this.account = this.settings.dataSource[index];
      }
    } catch (e) {
      console.log(e);
    }
  };

  async actionSettings() {
    try {
      const table = new UITable();
      const dataSource = this.settings.dataSource || [];
      dataSource.map((t, index) => {
        const r = new UITableRow();
        r.addText(
          `parameter：${index}  机场名：${t.title}     账号：${t.email}`
        );
        r.onSelect = (n) => {
          this.settings.account = t;
          this.notify(t.title, `默认账号设置成功\n账号：${t.email}`);
          this.saveSettings(false);
        };
        table.addRow(r);
      });
      table.present(false);
    } catch (e) {
      console.log(e);
    }
  }

  async deletedVpn() {
    try {
      const table = new UITable();
      const dataSource = this.settings.dataSource || [];
      dataSource.map((t, index) => {
        const r = new UITableRow();
        r.addText(`❌   机场名：${t.title}     账号：${t.email}`);
        r.onSelect = (n) => {
          dataSource.splice(index, 1);
          this.settings.dataSource = dataSource;
          this.notify(t.title, `❌\n账号：${t.email}`);
          this.saveSettings(false);
        };
        table.addRow(r);
      });
      table.present(false);
    } catch (e) {
      console.log(e);
    }
  }
}

// @组件代码结束
// await Runing(Widget, "", false); // 正式环境
await Runing(Widget, "", false); //远程开发环境