AltSidePark.widget

AltSidePark.widget is my attempt at an Übersicht widget.

A widget to display the daily alternate side parking status. it uses a node proxy server to gather the data it will render. Included here is also a 'short' version of the widget.

Fonts needed

SF Pro
SF Pro Display
Iosevka Term

How to get the fonts

https://developer.apple.com/fonts/
brew install font-hack-nerd-font
brew install font-iosevka
brew install font-iosevka-nerd-font

Setup

Setup a node Proxy Server

npm install express http-proxy-middleware

npm install cors

npm install express axios

npm install axios node-cron

mkdir -p ~/bin/Ubersicht-proxy/

cd ~/bin/Ubersicht-proxy/

npm init -y

~/bin/Ubersicht-proxy/node server.js

This simple proxy server collects and stores Alternate Side Parking information daily. Additionally, it saves this data to the file altSideParkingData.json. The server provides an API that enables requests to re-fetch the data from the URL http://localhost:3000/api/updateAltSideParking.

cd ~/bin/Ubersicht-proxy/

node server.js

const express = require('express');
const axios = require('axios');
const fs = require('fs');
const cors = require('cors');
const cron = require('node-cron');

const app = express();
const PORT = 3000;

// Enable CORS for all origins (or limit to your widget's origin)
app.use(cors({
  origin: 'http://127.0.0.1:41416', // Allow only your widget's origin
  methods: 'GET, OPTIONS',
  allowedHeaders: 'Content-Type, Authorization',
}));

// Function to get the current date in 'YYYY-MM-DD' format
const getCurrentDate = () => {
  const now = new Date();
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0'); // Month is 0-indexed
  const day = String(now.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// Function to fetch data (from the NYC 311 API )and save it to a file with lastUpdated timestamp
const fetchAndSaveData = async () => {
  try {
    const today = getCurrentDate(); // Get today's date dynamically
    console.log(`Fetching data for date: ${today}`);
  
    // Make a request to the NYC 311 API with the dynamic date
    const response = await axios.get(`https://portal.311.nyc.gov/home-cal/?today=${today}`);
  
    // Add the current timestamp to the response data
    const dataWithTimestamp = {
      ...response.data,
      lastUpdated: new Date().toISOString(), // Add timestamp in ISO format
    };
  
    // Save the response data with timestamp to a file
    fs.writeFileSync('altSideParkingData.json', JSON.stringify(dataWithTimestamp, null, 2));
    console.log('Data saved to altSideParkingData.json with timestamp');
  } catch (error) {
    console.error('Error fetching data from NYC 311 API:', error);
  }
};

// Schedule the fetch to run once a day (every 24 hours)
cron.schedule('0 0 * * *', () => {
  console.log('Running scheduled data fetch...');
  fetchAndSaveData();
});

// Route to manually fetch and update the data
app.get('/api/updateAltSideParking', async (req, res) => {
  try {
    const today = getCurrentDate(); // Get today's date dynamically
    console.log(`Manually fetching data for date: ${today}`);
  
    // Make a request to the NYC 311 API with the dynamic date
    const response = await axios.get(`https://portal.311.nyc.gov/home-cal/?today=${today}`);
  
    // Save the response data to a file
    fs.writeFileSync('altSideParkingData.json', JSON.stringify(response.data, null, 2));
    console.log('Data manually saved to altSideParkingData.json');
    res.json({ message: 'Data manually updated successfully' });
  } catch (error) {
    console.error('Error fetching data from NYC 311 API:', error);
    res.status(500).json({ error: 'Error fetching data from NYC 311 API' });
  }
});

// Serve the static JSON file for altSideParking with last updated timestamp
app.get('/api/altSideParking', (req, res) => {
  fs.readFile('altSideParkingData.json', 'utf8', (err, fileData) => {
    if (err) {
      res.status(500).json({ error: 'Unable to read data from static file' });
    } else {
      try {
        // Get the file's last modified timestamp
        const fileStats = fs.statSync('altSideParkingData.json');
        const lastModified = fileStats.mtime; // Modification time

        // Parse the JSON data and append the last updated timestamp
        const jsonData = JSON.parse(fileData);
        jsonData.lastUpdated = lastModified; // Add timestamp to the same structure

        // Send the modified data
        res.json(jsonData);
      } catch (statErr) {
        res.status(500).json({ error: 'Error reading file metadata' });
      }
    }
  });
});

// Start the server
app.listen(PORT, () => {
  console.log(`Proxy server running at http://localhost:${PORT}`);
  // Initial fetch when the server starts (just in case you want it to start immediately)
  fetchAndSaveData();
});

Setup a launchctl script to launch the server at login.

We create a LaunchAgent to start the server and keep it running. The file lives in the /Users directory, and the user name needs to be hard coded in the file. Replace [$USER] with your username.

~/Library/LaunchAgents/com.user.ubersichtproxy.runner.plist

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
	<key>Label</key>
	<string>com.user.ubersichtproxy</string>
	<key>ProgramArguments</key>
	<array>
		<string>/opt/homebrew/bin/node</string>
		<string>/Users/[$USER]/bin/Ubersicht-proxy/server.js</string>
	</array>
	<key>RunAtLoad</key>
	<true/>
	<key>KeepAlive</key>
	<dict>
		<key>Crashed</key>
		<true/>
		<key>SuccessfulExit</key>
		<false/>
	</dict>
	<key>StandardErrorPath</key>
	<string>/tmp/ubersichtproxy.err</string>
	<key>StandardOutPath</key>
	<string>/tmp/ubersichtproxy.out</string>
	<key>WorkingDirectory</key>
	<string>/Users/*USER*/bin/Ubersicht-proxy</string>
</dict>
</plist>