telekom_data_usage.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: deep-gray; icon-glyph: magic;
const url = "http://pass.telekom.de/api/service/generic/v1/status";

const req = new Request(url);
req.allowInsecureRequest = true;
req.headers = {
  "User-Agent":
    "Mozilla/5.0 (iPhone; CPU iPhone OS 14_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1",
};

if (Device.isUsingDarkAppearance()) {
  backColor = "000000";
  textColor = "EDEDED";
  fillColor = "EDEDED";
  strokeColor = "E10075";
} else {
  backColor = "E10075";
  textColor = "EDEDED";
  fillColor = "EDEDED";
  strokeColor = "121212";
}

const canvas = new DrawContext();
const canvSize = 200;
const canvTextSize = 36;

const canvWidth = 22;
const canvRadius = 80;

canvas.opaque = false;
canvas.size = new Size(canvSize, canvSize);
canvas.respectScreenScale = true;

function sinDeg(deg) {
  return Math.sin((deg * Math.PI) / 180);
}

function cosDeg(deg) {
  return Math.cos((deg * Math.PI) / 180);
}

function drawArc(ctr, rad, w, deg) {
  bgx = ctr.x - rad;
  bgy = ctr.y - rad;
  bgd = 2 * rad;
  bgr = new Rect(bgx, bgy, bgd, bgd);

  canvas.setFillColor(new Color(fillColor));
  canvas.setStrokeColor(new Color(strokeColor));
  canvas.setLineWidth(w);
  canvas.strokeEllipse(bgr);

  for (t = 0; t < deg; t++) {
    rect_x = ctr.x + rad * sinDeg(t) - w / 2;
    rect_y = ctr.y - rad * cosDeg(t) - w / 2;
    rect_r = new Rect(rect_x, rect_y, w, w);
    canvas.fillEllipse(rect_r);
  }
}

/*
Initialize the cache to indicate if the app did fetch any data at all
*/
const files = FileManager.local();
const cachePath = files.joinPath(files.documentsDirectory(), "widget-telekom");

let widget = new ListWidget();

try {
  const data = await req.loadJSON();
  widget.setPadding(10, 10, 10, 10);

  if (data !== undefined) {
    // Just create the file with nothing in it to make the widget not update
    files.writeString(cachePath, "");

    widget.backgroundColor = new Color(backColor);

    let firstLineStack = widget.addStack();
    firstLineStack.setPadding(0, 10, 0, 10);

    let provider = firstLineStack.addText("Telekom");
    provider.font = Font.boldSystemFont(12);
    provider.textColor = new Color(fillColor);

    // Last Update
    firstLineStack.addSpacer();
    let lastUpdateText = firstLineStack.addDate(new Date());
    lastUpdateText.font = Font.mediumSystemFont(12);
    lastUpdateText.applyTimeStyle();
    lastUpdateText.textColor = Color.white();

    widget.addSpacer();

    let remainingPercentage = data.usedPercentage;

    drawArc(
      new Point(canvSize / 2, canvSize / 2),
      canvRadius,
      canvWidth,
      Math.floor(remainingPercentage * 3.6)
    );

    const canvTextRect = new Rect(
      0,
      100 - canvTextSize / 2,
      canvSize,
      canvTextSize
    );
    canvas.setTextAlignedCenter();
    canvas.setTextColor(new Color(textColor));
    canvas.setFont(Font.boldSystemFont(canvTextSize));
    canvas.drawTextInRect(`${remainingPercentage}%`, canvTextRect);

    const canvImage = canvas.getImage();
    let image = widget.addImage(canvImage);
    image.centerAlignImage();

    widget.addSpacer();
    let remainingText =
      data.usedVolumeStr +
      " / " +
      data.initialVolumeStr +
      "\n" +
      data.remainingTimeStr;

    let bottomStack = widget.addText(remainingText);
    bottomStack.font = Font.mediumSystemFont(12);
    bottomStack.textColor = new Color(fillColor);
    bottomStack.centerAlignText();
    widget.addSpacer(2);
  }

  if (!config.runsInWidget) {
    await widget.presentSmall();
  } else {
    Script.setWidget(widget);
    Script.complete();
  }

} catch (error) {
  /*
   If the phone is not in mobile network the request will fail. 
   In that case the widget should not update if there was content before.
   If there is no content show the hint that the phone should be in the mobile network at least once
  */
  const cacheExists = files.fileExists(cachePath);

  if (!cacheExists) {
    let text = widget.addText(
      "Phone needs to be at least once in mobile network"
    );
    text.centerAlignText();

    if (!config.runsInWidget) {
      await widget.presentSmall();
    } else {
      Script.setWidget(widget);
      Script.complete();
    }
  }
}