Prayer(Salat) Times Widget

prayer.js

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: blue; icon-glyph: magic;
const opacity = 0.7
const textColor = "#ffffff"
let imgPath = "pics/IMG6.2.jpg"
let currentDate = new Date()

let fm = FileManager.iCloud();
let fpath = fm.joinPath(fm.documentsDirectory(), imgPath)
let cachePath = fm.joinPath(fm.documentsDirectory(), "data");
if(!fm.fileExists(cachePath)){
  fm.createDirectory(cachePath)
}

async function prayerTimes() {
  let url = " https://github.com/ruqqq/prayertimes-database/blob/master/data/SG/1/2020.json"
  let json = {}
  try {
    let req = new Request(url)
	json = await req.loadJSON()
	fm.writeString(fm.joinPath(cachePath, "2020.json"), JSON.stringify(json));
  } catch(e) {
	  log('Offline mode')
	  try{
		let raw = fm.readString(fm.joinPath(cachePath, "2020.json"));
		json = raw;
		usingCachedData = true;
	  }catch(e2){
		console.log("Error: No offline data cached")
	  }
  } 
	json = JSON.parse(json)
	let thisMonthData = json[currentDate.getMonth()]
	return thisMonthData[currentDate.getDate()-1].times
}

let icons = ["sun.dust.fill", "sunrise.fill", "sun.max.fill", "sun.haze.fill", "sunset.fill", "moon.stars.fill"]
async function prayerWidget(stack) {
  
    let tStack = stack.addStack()
    
    stack.addSpacer(10)
    stack.setPadding(0, 10, 0, 0)
    stack.backgroundImage = Image.fromFile(fpath)
    
    addWidgetTextLine(tStack, "Salat Times", 	{
	  color: textColor,
	  opacity,
	  font: Font.boldRoundedSystemFont(14),
	  align : "left"})

    let pStack = stack.addStack()
    pStack.layoutHorizontally()
    
    let times = await prayerTimes()
    for (var i=0;i < times.length; i++) {
      if(i == 1) continue;      
      let symbol = SFSymbol.named(icons[i])
      let sysElem = pStack.addImage(symbol.image)
      sysElem.imageSize = new Size(15, 15)
      sysElem.tintColor = Color.white()
      sysElem.imageOpacity = opacity
      
	  let localTime = formatTime24(new Date(times[i]))
	  
	  addWidgetTextLine(pStack, "\xa0" + localTime + "\xa0", {
		color: textColor,
		opacity,
		font: Font.regularSystemFont(12),
		align: "center",
		})
      pStack.addSpacer(null)
    }
}

async function createWidget() {
  let globalStack = new ListWidget() 
	//Top spacing
  globalStack.addSpacer(10)
  await prayerWidget(globalStack)
  return globalStack
}

function addWidgetTextLine(
	widget,
	text,
	{
	  color = "#ffffff",
	  textSize = 12,
	  opacity = 1,
	  align,
	  font = "",
	  lineLimit = 0,
	}
  ) {
	let textLine = widget.addText(text)
	textLine.textColor = new Color(color)
	if (typeof font === "string") {
	  textLine.font = new Font(font, textSize)
	} else {
	  textLine.font = font
	}
	console.log(`${text}`)
	console.log(`${typeof opacity}`)
	textLine.textOpacity = opacity
	switch (align) {
	  case "left":
		textLine.leftAlignText()
		break
	  case "center":
		textLine.centerAlignText()
		break
	  case "right":
		textLine.rightAlignText()
		break
	  default:
		textLine.leftAlignText()
		break
	}
}

function formatTime24(date) {
	let dateFormatter = new DateFormatter()
	dateFormatter.dateFormat = "HH:mm"
	return dateFormatter.string(date) 
}

let widget = await createWidget()
if (config.runsInWidget) {
  Script.setWidget(widget)
} else {
	widget.presentMedium()
}
Script.complete()