supermamon · October 16, 2021 06:16 · Oct 16, 2021
diff --git a/prayer-times.js b/prayer-times.js
@@ -0,0 +1,112 @@
+// 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()
+