Telekom.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: pink; icon-glyph: broadcast-tower;
const apiUrl = "https://pass.telekom.de/api/service/generic/v1/status"
const tapUrl = "https://pass.telekom.de/"
const tapUrl_active = true
const cacheFileName = "scriptable-telekom.json"
const LIMIT_CRIT = 90
const LIMIT_WARN = 75
var isOnline = 0;
var isUnlimited = 0;
// get the data for data pass
const dataPass = await getApiData()
// check for darkmode
var darkMode = checkDarkMode()
// DrawContext config for line chart
var chartConfig = {
  width:125,
  height:6,
  cornerW:4,
  cornerH:3
}
// default for fonts
var font = {
  h1: Font.boldRoundedSystemFont(30),
  h2: Font.boldRoundedSystemFont(13),
  txt: Font.mediumRoundedSystemFont(12),
  small: Font.mediumSystemFont(10)
}
// default values for SF Images
var iconImages = {
  statusOnline:{
    icon:"antenna.radiowaves.left.and.right",
    size:20
  },
  statusOffline:{
    icon:"wifi.exclamationmark",
    size:20
  },
  usedVolume:{
    icon:"tray.and.arrow.down",
    size:15
  },
  remainTime:{
    icon:"timer",
    size:15
  },
}
const telekomColor = "#eb346b"
// default colors
var colorConfig = {
  telekom: new Color("#eb346b"),
  statusOK: Color.green(),
  statusWarn: Color.orange(),
  statusCrit: Color.red(),
  imgStatusOnline: Color.dynamic(Color.white(), Color.lightGray()),
  imgStatusOffline: Color.darkGray(),
  title: Color.dynamic(Color.white(), new Color(telekomColor)),
  text: Color.white(),
  bgGradient1: Color.dynamic(new Color(telekomColor), Color.black()),
  bgGradient2: Color.dynamic(new Color("e32b8a"), Color.black()),
  footer: Color.darkGray(),
  iconColor: Color.dynamic(Color.white(), Color.lightGray()),
  chartBg: Color.white()
}
if (darkMode) {
//   colorConfig.title = new Color("#eb346b"),
//   colorConfig.iconColor = Color.lightGray()
}
 // Gray out if local data instead of Telekom data
 if (isOnline == 0) {
  colorConfig.title = Color.darkGray(),
  colorConfig.iconColor = Color.darkGray(),
  colorConfig.text = Color.darkGray(),
  colorConfig.statusOK = Color.darkGray(),
  colorConfig.statusWarn = Color.darkGray(),
  colorConfig.statusCrit = Color.darkGray(),
  colorConfig.footer = Color.darkGray(),
  colorConfig.chartBg = Color.lightGray()
}
// initialize the widget
let widget = await createWidget()
if (tapUrl_active) {
  widget.url = tapUrl
}
// Formatting background
// if (!darkMode) {
  // Add background gradient
  let gradient = new LinearGradient()
  gradient.locations = [0, 1]
  gradient.colors = [
    Color.dynamic(Color.magenta(), Color.black()),
    colorConfig.bgGradient2
  ]
  widget.backgroundGradient = gradient
// }
if (!config.runsInWidget) {
  await widget.presentSmall()
}
// complete
Script.setWidget(widget)
Script.complete()
// FUNCTIONS BLOCK
// create the widget - main
async function createWidget(items) {
  //  init the local filemanager for caching
  let fm = FileManager.local()
  let dir = fm.documentsDirectory()
  let path = fm.joinPath(dir, cacheFileName)
  // create the list widget
  const list = new ListWidget()
  // Line1 - Title Stack fixed
  let titleStack = list.addStack()
  titleStack.addSpacer(2)
  const line1 = titleStack.addText("Telekom")
  line1.font = font.h2
  line1.textColor = colorConfig.title
  titleStack.addSpacer()
  // status image
  if (isOnline) {
    let imgStatus = createSFImage(iconImages.statusOnline.icon, iconImages.statusOnline.size, titleStack)
    imgStatus.tintColor = colorConfig.imgStatusOnline
  } else{
    let imgStatus = createSFImage(iconImages.statusOffline.icon, iconImages.statusOffline.size, titleStack)
    imgStatus.tintColor = colorConfig.imgStatusOffline
  }
  // Data Stack table
  let dataStack = list.addStack()
  if (dataPass.passName = "Unlimited Datengeschenk") {
  isUnlimited = 1;
  dataPass.usedPercentage = 0;
  dataPass.initialVolume = 100;
  dataPass.usedVolume = 0;
}
  // insert percentage of used volume
  const line2 = dataStack.addText(dataPass.usedPercentage + "%")
  line2.font = font.h1
  // colorize
  line2.textColor = getStatusColor(dataPass.usedPercentage)
  // spacer before chart
  list.addSpacer(8)
  // create line chart bar to visualize the used volume
  const imgw = list.addImage(createProgress(dataPass.initialVolume, dataPass.usedVolume))
  imgw.imageSize=new Size(chartConfig.width, chartConfig.height)
  // spacer after chart
  list.addSpacer(8)
  // Display details of used volume
  var usedVolStack = list.addStack()
  // insert symbol
  let imgVolume = createSFImage(iconImages.usedVolume.icon, iconImages.usedVolume.size, usedVolStack)
  imgVolume.tintColor = colorConfig.iconColor
  usedVolStack.addSpacer(7)
  console.log("isUnlimited=" + isUnlimited)
  var tmpstrg
  if (isUnlimited == 0) {
    // insert used / initial volume text
    tmpstrg = dataPass.usedVolumeStr + " / " + dataPass.initialVolumeStr     
  } else {
    console.log("check")
    tmpstrg = "unlimited"
  }
  let line3 = usedVolStack.addText(tmpstrg)
  line3.font = font.txt
  line3.textColor = colorConfig.text
  // spacer between text
  list.addSpacer(3)
  // Remaining Time
  if (dataPass.remainingTimeStr) {
    let remainingTimeStack = list.addStack()
    // insert symbol
    let imgTime = createSFImage(iconImages.remainTime.icon, iconImages.remainTime.size, remainingTimeStack)
    imgTime.tintColor = colorConfig.iconColor
    remainingTimeStack.addSpacer(7)
    // insert remaining time text
    let line4 = remainingTimeStack.addText(dataPass.remainingTimeStr)
    line4.font = font.txt
    line4.textColor = colorConfig.text
  }
  // add spacer and adjust alignment
  list.addSpacer(10)
  // Add time of last widget reisOnline:
  const now = new Date();
  let timeLabel = list.addDate(now)
  timeLabel.font = font.small
  timeLabel.centerAlignText()
  timeLabel.applyTimeStyle()
  timeLabel.textColor = colorConfig.footer

  return list
}

async function getApiData() {
   let fm = FileManager.local()
  let dir = fm.documentsDirectory()
  let path = fm.joinPath(dir, "scriptable-telekom.json")
  try {
    let r = new Request(apiUrl)
    // API only answers for mobile Safari
    r.headers = {
      "User-Agent": "Mozilla/5.0 (iPhone; CPU iPhone OS 13_5_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1"
    }

    let data = 0
    try {
      // Fetch data from pass.telekom.de
      data = await r.loadJSON()
      // Write JSON to iCloud file
      fm.writeString(path, JSON.stringify(data, null, 2))
      isOnline = 1
      
    } catch (err) {
      // Read data from iCloud file
      data = JSON.parse(fm.readString(path), null)
      if (!data || !data.usedPercentage) {
        const errorList = new ListWidget()
        errorList.addText("Please disable WiFi for initial execution.")
        return errorList
      }
    }
    return data;
  } catch (err) {  
    const errorList = new ListWidget()
    errorlist.addText("Error fetching JSON from https://pass.telekom.de/api/service/generic/v1/status")  
    return errorList
//     throw err;
  }

}

function getStatusColor(usedVolPercentage) {
  let statuscolor = colorConfig.statusOK
  if (usedVolPercentage >= LIMIT_WARN) {
    statuscolor = colorConfig.statusWarn
  } else if (usedVolPercentage >= LIMIT_CRIT) {
    statuscolor = colorConfig.statusCrit
  }
  return statuscolor
}

function insertStatusImage(isOnline, stack) {
  if (isOnline == 0) {
    let sym = SFSymbol.named("wifi.exclamationmark")
    var wimg = stack.addImage(sym.image)
    wimg.imageSize = new Size(20, 20)
    wimg.tintColor = Color.darkGray()
    wimg.rightAlignImage()
  } else {
    let sym = SFSymbol.named("antenna.radiowaves.left.and.right")
    let wimg = stack.addImage(sym.image)
    wimg.imageSize = new Size(20, 20)
    wimg.tintColor = Color.white()
    wimg.rightAlignImage()
  }
}
function createSFImage(symbolStr, size, stack) {
  let sym = SFSymbol.named(symbolStr)
  var wimg = stack.addImage(sym.image)
  wimg.imageSize = new Size(size, size)  
  return wimg
}
function checkDarkMode() {
  let hourNow = new Date().getHours()
  //Define nighttime (19h - 7h) for styling changes
  let nightTime = (hourNow >= 19 || hourNow < 7)

  return nightTime
}

function createProgress(total,havegone){
  const context =new DrawContext()
  context.size=new Size(chartConfig.width, chartConfig.height)
  context.opaque=false
  context.respectScreenScale=true
  context.setFillColor(colorConfig.chartBg)
  const path = new Path()
  path.addRoundedRect(new Rect(0, 0, chartConfig.width, chartConfig.height), chartConfig.cornerW, chartConfig.cornerH)
  context.addPath(path)
  context.fillPath()
  context.setFillColor(getStatusColor(dataPass.usedPercentage))
  const path1 = new Path()
  path1.addRoundedRect(new Rect(0, 0, chartConfig.width*havegone/total, chartConfig.height), chartConfig.cornerW, chartConfig.cornerH)
  context.addPath(path1)
  context.fillPath()
  return context.getImage()
}