Telekom Datenvolumen Widget - edit olikdesign (orig. @Sillium)

telekom-datenvolumen

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: pink; icon-glyph: magic;
// creator: https://github.com/Sillium | functions added https://github.com/LupusArgentum | Color and Layout edit by https://github.com/olikdesign

const apiUrl = "https://pass.telekom.de/api/service/generic/v1/status"

let widget = await createWidget()
widget.backgroundColor = new Color("#E20074")
if (!config.runsInWidget) await widget.presentSmall()
Script.setWidget(widget)
Script.complete()

async function createWidget(items) {
  let fm = FileManager.local()
  let dir = fm.documentsDirectory()
  let jsonLocalPath = fm.joinPath(dir, "scriptable-telekom.json")
  let lastFetchDateLocalPath = fm.joinPath(dir, "lastUpdate.txt")

  const list = new ListWidget()
  list.addSpacer()
 
  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 = false, api_online = false, lastFetchDate = false
    try {
      // Fetch data from pass.telekom.de
      data = await r.loadJSON()
      // Write JSON to local file
      fm.writeString(jsonLocalPath, JSON.stringify(data, null, 2))
      api_online = true
      lastFetchDate = new Date()
      fm.writeString(lastFetchDateLocalPath, lastFetchDate.toString())
    } catch (err) {
      console.log(err)
      // Read data from local file
      if (fm.fileExists(jsonLocalPath) && fm.fileExists(lastFetchDateLocalPath)) {
        data = JSON.parse(fm.readString(jsonLocalPath), null)
        lastFetchDate = new Date(fm.readString(lastFetchDateLocalPath, null))
      } else {
        const errorList = new ListWidget()
        errorList.addText("Please disable WiFi for initial execution.")
        return errorList
      }
    }
   

    let stack = list.addStack()
    let dataIcon = SFSymbol.named('antenna.radiowaves.left.and.right');
  let dataIconElement = stack.addImage(dataIcon.image)
  dataIconElement.imageSize = new Size(15, 15)
  dataIconElement.tintColor = Color.white()
  stack.addSpacer(4)
  let titlename = stack.addText("Datenvolumen")
  titlename.font = Font.mediumSystemFont(14)
  titlename.textColor = Color.white()
      
      
  	const availabledata = 100 - data.usedPercentage;
	const fontName = "Futura-Medium"  
    const line2 = list.addText(availabledata + "%")
    line2.font = new Font(fontName, 36)
    line2.textColor = new Color("#101e43")
    if (data.usedPercentage >= 75) {
      line2.textColor = Color.orange()
    } else if (data.usedPercentage >= 90) {
      line2.textColor = Color.red()
    }


 let row = list.addStack()
function addUsedData() {
  let stack = row.addStack()
  stack.layoutHorizontally()
	let line3 = stack.addText(data.usedVolumeStr)
    line3.font = Font.boldSystemFont(14)
    line3.textColor = Color.white()
    stack.addSpacer(10)
	const lineSpacer = stack.addText("●")
    lineSpacer.font = Font.heavySystemFont(14)
    lineSpacer.rightAlignText()
    lineSpacer.textColor = Color.green()
    if (data.usedPercentage >= 75) {
      lineSpacer.textColor = Color.orange()
    } else if (data.usedPercentage >= 90) {
      lineS.textColor = Color.red()
    }
}	  
addUsedData();
    const line4 = list.addText("von " + data.initialVolumeStr + " verbraucht")
    line4.font = Font.mediumSystemFont(10)
    line4.textColor = Color.white()
    list.addSpacer(6)
    
    list.addSpacer()
    let line5
	 
    // alt text on line5 if local data instead of Telekom API data:
    if (api_online) {
      let plan = (data.remainingSeconds ? "prepaid" : data.remainingTimeStr ? "postpaid" : "")
      switch (plan) {
        case "prepaid":
          let days = Math.floor(data.remainingSeconds / 86400)
          let hours = Math.floor((data.remainingSeconds % 86400) / 3600)
          line5 = list.addText("noch " + days + " Tage " + hours + " Std.")
          line5.font = Font.mediumSystemFont(10)
          line5.textColor = new Color("#101e43")
          break;
      
        case "postpaid":
          line5 = list.addText("gültig bis:\n" + data.remainingTimeStr)
          line5.font = Font.mediumSystemFont(12)
          break;
      }
      
    } else {
        line5 = list.addText("API Offline")
        line5.font = Font.boldSystemFont(12)
        line5.textColor = new Color("#101e43")
    }
    
    // Add time (and date) of last data fetch
    const df = new DateFormatter()
    const wasFetchedToday = (lastFetchDate.getDate() == new Date().getDate())
    df.dateFormat = (wasFetchedToday ? "HH:mm" : "dd.MM. HH:mm")
    
    let timeLabel = list.addText("aktualisiert " + df.string(lastFetchDate))
    timeLabel.font = Font.mediumSystemFont(9)
    timeLabel.textColor = new Color("#101e43", 0.5)
    list.addSpacer()
      
  } catch (err) {
    console.log(err)
    list.addText("Error fetching JSON from https://pass.telekom.de/api/service/generic/v1/status")
  }
 
  return list
}

Layout Idee @LupusArgentum

Kleinere Optische Merkmale wurden angepasst und geändert.

Wie bereits erwähnt, ist dein Widget echt klasse!
Kannst du eigentlich auch statt „API offline“ die Zeit der letzten erfolgreichen (!) Aktualisierung einblenden lassen? Ich glaube das ist bei dem Fork von Silicium oderLapusArgentum so. Das wäre die Krönung bei deinem Fork…!

Kurze Rückmeldung wäre schön 👍🏿

@Augustus88

Ist jetzt im oberem Code mit eingepflegt. :-)

@olikdesign

Tolles Widget.

Besteht die Möglichkeit die Farben des Widgets zu ändern? Also z.b.: das man das Widget als helles oder dunkles Widget nutzen kann?

Ich bin da leider totaler Noob und hab keine Ahnung davon. Würde mich aber mal dran versuchen wenn du erklären könntest wo man da was ändern muss.

Gruß