Prayer times from jamemasjid.co.uk

prayer-times.js

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

/* **********************************************
by : @supermamon
on : 16 Oct 2021
ver: 1.0.0
for: https://www.reddit.com/r/Scriptable/comments/q8r061/make_widget_table_from_data_scraped_from_website/
********************************************** */


// styling
const STYLES = {
  small: {
    header_bgcolor  : Color.blue(),
    header_txcolor  : Color.white(),
    header_font     : new Font('Menlo-Bold',10),
    data_font       : new Font('Courier',10),
    column_width    : 7, //characters
    col_spacing     : 1, //characters
    row_spacing     : 6,
    text_color      : Color.dynamic(Color.black(), Color.white())
  },
  medium: {
    header_bgcolor  : Color.blue(),
    header_txcolor  : Color.white(),
    header_font     : new Font('Menlo-Bold',14),
    data_font       : new Font('Courier',14),
    column_width    : 12, //characters
    col_spacing     : 3,  //characters
    row_spacing     : 6,
    text_color      : Color.dynamic(Color.black(), Color.white())
  },
  large: {
    header_bgcolor  : Color.blue(),
    header_txcolor  : Color.white(),
    header_font     : new Font('Menlo-Bold',18),
    data_font       : new Font('Courier',18),
    column_width    : 8, //characters
    col_spacing     : 3,  //characters
    row_spacing     : 10,
    text_color      : Color.dynamic(Color.black(), Color.white())
  }
}


const family = config.widgetFamily ?? 'small' 
const STYLE = STYLES[family]

// data gathering ===============================

// load the URL into a webview
const url = 'https://jamemasjid.co.uk/'
const wv = new WebView()
await wv.loadURL(url)

// I only know this by experience and a little googling
let js = `Array.from(document.querySelectorAll('ul.prayer-times li')).map( li => Array.from(li.children).map(span=>span.innerText))`
const data = await wv.evaluateJavaScript(js)

// create the widget ============================
const widget = new ListWidget()
widget.setPadding(5,5,5,5)


// headers --------------------------------------
const headers = data[0]

// combine the headers into a single line of text
// using padEnd for equally sized columns
let rowStr = headers
  .map(cell => cell.toUpperCase().padEnd(STYLE.column_width))
  .join(' '.repeat(STYLE.col_spacing))

// add the header stack
const hStack = widget.addStack()
hStack.backgroundColor = STYLE.header_bgcolor
const hText = hStack.addText(rowStr)
hText.font = STYLE.header_font
hText.textColor = STYLE.header_txcolor

// space between header and times
widget.addSpacer(STYLE.row_spacing)


// times ----------------------------------------
const rows = data.slice(1)
for (const row of rows) {

  // combine the row into a single line of text
  // using padEnd for equally sized columns
  // also, remove the spacing before AM/PM
  let rowStr = row
    .map(cell => cell.toUpperCase().replace(/\s([AP]M)/,"$1").padEnd(STYLE.column_width))
    .join(' '.repeat(STYLE.col_spacing))

  // add the row
  const rowStack = widget.addStack()
  const hText = rowStack.addText(rowStr)
  hText.font = STYLE.data_font
  hText.textColor = STYLE.text_color
  
  // space between rows
  widget.addSpacer(STYLE.row_spacing)

}

if (config.runsInApp) await widget.presentSmall()
Script.setWidget(widget)
Script.complete()