Handball iOS Widgets mit Scriptable

Voraussetzungen

• Du besitzt ein iPhone mit mindestens iOS 14 (Widgets müssen funktionieren).

• Du hast die Scriptable App installiert (klick).

• Du hast eine Handball-Mannschaft, bei welcher du auf dem Laufenden bleiben willst.

(Optional) Handball-Mannschaft Identifier herausfinden

Installieren des Tabellen-Codes

/*
 *
 * MIT License
 *
 * Copyright (c) 2024 Mathias Bauer
 *
 * wwww.mathiasbauer.com
 * info at mathiasbauer dot com
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

//
// Schritt 1 von 1:
// Setzen Sie den Identifier ihres Teams.
// Wenn Sie den Identifier nicht wissen, besuchen Sie die folgende Website um ihn herauszufinden:
// https://mathiasbauer.com/handball-ios-widgets-mit-scriptable
//
const teamIdentifier = "x";

// Font sizes
const regularFontSize = 10;
const refreshDateSize = 8;
const headerTextSize = 10;
const imageSize = 15;

// Parsing widget parameters
const params = args.widgetParameter ? args.widgetParameter.split(",") : [];
// Constructing URL for API call
const url = `https://www.handball.net/a/sportdata/1/widgets/team/${teamIdentifier}/table`;
// Checking if dark theme is selected
const isDarkTheme = params?.[0] === "dark";
// Creating a new ListWidget
const widget = new ListWidget();
// Stack for header content
const headerStack = widget.addStack();
// Variable to store home team name
let homeTeamName;

// Function to adjust widget settings
function adjustSettings() {
  widget.url = "https://mathiasbauer.com/handball-ios-widgets-mit-scriptable";
  if (isDarkTheme) {
    widget.backgroundColor = new Color("#1C1C1E"); // Dark theme background color
  }
  headerStack.setPadding(0, 0, 5, 0);
}

// Function to fetch data from the API
async function fetchData(url) {
  const req = new Request(url);
  const apiResult = await req.loadJSON();
  return { data: apiResult };
}

// Function to load team logo image
async function loadTeamLogo(logoPath) {
  logoPath =
    logoPath == null
      ? "https://www.handball.net/img/handball-net-logo-sm.png"
      : logoPath.replace("handball-net:", "https://www.handball.net/");
  try {
    const req = new Request(logoPath);
    return await req.loadImage();
  } catch (error) {
    console.error("Error loading team logo:", error);
  }
}

// Function to build the widget
async function buildWidget() {
  adjustSettings();
  const data = await fetchData(url);
  if (!data.data.table) {
    displayNoGameData();
    return;
  }

  homeTeamName = data.data.teamSummary.name;
  let teamName = data.data.teamSummary.name
    ? data.data.table.teamSummary.name
    : "Unknown Team";
  let headerText = headerStack.addText(
    homeTeamName + " " + teamName + " Spielplan"
  );
  headerText.font = Font.boldSystemFont(headerTextSize);
  if (isDarkTheme) {
    headerText.textColor = new Color("#FFFFFF"); // White text color for dark theme
  }

  addTeam("Pl.", null, "Team", "Sp.", "Tore", "Pkt.");
  widget.addSpacer(1);

  for (const item of data.data.table.rows) {
    let place = item.rank;
    let image = await loadTeamLogo(item.team.logo);
    let name = item.team.name;
    let gamesPlayed = item.games;
    let points = item.points;
    let goals = item.goals;
    addTeam(place, image, name, gamesPlayed, points, goals);
  }

  widget.addSpacer(2);
  let refreshedAt = getRefreshedAtDate();
  addRefreshedAtDate(refreshedAt);
}

// Function to get the refreshed at date
function getRefreshedAtDate() {
  const date = new Date();

  const day = date.getDate().toString().padStart(2, "0");
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");

  const formattedDate = `Aktualisiert am ${day}.${month} um ${hours}:${minutes} Uhr`;

  return formattedDate;
}

// Function to display message when no game data is available
function displayNoGameData() {
  const noDataText = widget.addText("Keine aktuellen Spieldaten gefunden.");
  noDataText.font = Font.mediumSystemFont(regularFontSize);
  if (isDarkTheme) {
    noDataText.textColor = new Color("#FFFFFF"); // White text color for dark theme
  }
}

// Helper function to create a stack
const createStack = (rowStack) => {
  const stack = rowStack.addStack();
  stack.setPadding(0, 0, 0, 0);
  return stack;
};

// Helper function to add text to a stack
const addTextToStack = (stack, text, size = 0) => {
  const textItem = stack.addText(text.toString());
  textItem.font = Font.mediumSystemFont(regularFontSize);
  stack.size = new Size(size, 0);
  textItem.leftAlignText();
  return textItem;
};

// Helper function to add an image to a stack
const addImageToStack = (stack, image, size) => {
  if (image) {
    const imageNode = stack.addImage(image);
    imageNode.imageSize = new Size(size, size);
    imageNode.leftAlignImage();
    stack.setPadding(0, 0, 0, size);
  } else {
    addTextToStack(stack, "", size + 15);
  }
};

// Function to add a team row to the widget
function addTeam(place, image, teamName, gamesPlayed, goals, points) {
  const rowStack = widget.addStack();
  rowStack.setPadding(0, 0, 0, 0);
  rowStack.layoutHorizontally();

  const placeStack = createStack(rowStack);
  const placeText = addTextToStack(placeStack, place, 15);

  const imageStack = createStack(rowStack);
  addImageToStack(imageStack, image, imageSize);

  const gamesPlayedStack = createStack(rowStack);
  const gamesPlayedText = addTextToStack(gamesPlayedStack, gamesPlayed, 20);

  const goalsStack = createStack(rowStack);
  const goalsText = addTextToStack(goalsStack, goals, 35);
  goalsText.rightAlignText();

  const pointsStack = createStack(rowStack);
  const pointsText = addTextToStack(pointsStack, points, 35);

  const teamNameStack = createStack(rowStack);
  const teamNameText = addTextToStack(teamNameStack, teamName);
  teamNameText.leftAlignText();

  if (isDarkTheme) {
    let darkThemeColour = new Color("#FFFFFF"); // White text color for dark theme
    placeText.textColor = darkThemeColour;
    gamesPlayedText.textColor = darkThemeColour;
    goalsText.textColor = darkThemeColour;
    pointsText.textColor = darkThemeColour;
  }

  if (teamName === homeTeamName) {
    let highlightColour = new Color("#4B9CD3"); // Highlight color for home team
    teamNameText.textColor = highlightColour;
    placeText.textColor = highlightColour;
    gamesPlayedText.textColor = highlightColour;
    goalsText.textColor = highlightColour;
    pointsText.textColor = highlightColour;
  }
}

// Function to add the refreshed at date to the widget
function addRefreshedAtDate(date) {
  const dateStack = widget.addStack();
  const dateStackName = dateStack.addText(date);
  dateStackName.font = Font.mediumSystemFont(refreshDateSize);
}

// Call the buildWidget function to start building the widget
await buildWidget();

// Set the widget and complete the script
Script.setWidget(widget);
Script.complete();

// Present the widget in medium size
widget.presentMedium();

Als Widget einrichten

Klicke länger auf das Widget, um es zu konfigurieren. Klicke im aufkommenden Menü auf “Widget bearbeiten”.

Installieren des Spielplan-Codes

/*
 *
 * MIT License
 *
 * Copyright (c) 2024 Mathias Bauer
 *
 * wwww.mathiasbauer.com
 * info at mathiasbauer dot com
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 */

//
// Schritt 1 von 1:
// Setzen Sie den den Identifier ihres Teams.
// Wenn Sie den Identifier nicht wissen, besuchen Sie die folgende Website um ihn herauszufinden:
// https://mathiasbauer.com/handball-ios-widgets-mit-scriptable
//
const teamIdentifier = "x";

// Font sizes
const regularFontSize = 13;
const refreshDateSize = 10;
const headerTextSize = 13;
const imageSize = 20;

const params = args.widgetParameter ? args.widgetParameter.split(",") : [];
const url = `https://www.handball.net/a/sportdata/1/widgets/team/${teamIdentifier}/team-schedule`;
const isDarkTheme = params?.[0] === "dark";
const padding = 4;
const widget = new ListWidget();
const headerStack = widget.addStack();

function adjustSettings() {
  widget.url = "https://mathiasbauer.com/handball-ios-widgets-mit-scriptable";
  if (isDarkTheme) {
    widget.backgroundColor = new Color("#1C1C1E");
  }
  widget.setPadding(padding, padding, padding, padding);
  headerStack.setPadding(0, 0, 8, 0);
}

async function fetchData(url) {
  const req = new Request(url);
  const apiResult = await req.loadJSON();
  return { data: apiResult };
}

async function loadTeamLogo(logoPath) {
  logoPath =
    logoPath == null
      ? "https://www.handball.net/img/handball-net-logo-sm.png"
      : logoPath.replace("handball-net:", "https://www.handball.net/");
  try {
    const req = new Request(logoPath);
    return await req.loadImage();
  } catch (error) {
    console.error("Error loading team logo:", error);
  }
}

async function buildWidget() {
  adjustSettings();
  const data = await fetchData(url);

  let teamName = data.data.schedule.data[0].tournament.name
    ? data.data.schedule.data[0].tournament.name
    : "Unknown Team";
  let headerText = headerStack.addText(
    data.data.team.name + " " + teamName + " Spielplan"
  );

  headerText.font = Font.boldSystemFont(headerTextSize);
  if (isDarkTheme) {
    headerText.textColor = new Color("#FFFFFF");
  }

  for (const item of data.data.schedule.data) {
    if (!item) {
      displayNoGameData();
      break;
    }

    const homeTeamName = item.homeTeam.name ? item.homeTeam.name : "";
    const awayTeamName = item.awayTeam.name ? item.awayTeam.name : "";
    const homeTeamGoal = item.homeGoals ? item.homeGoals.toString() : "-";
    const awayTeamGoal = item.awayGoals ? item.awayGoals.toString() : "-";
    const gameStart = item.startsAt ? formatUnixTimestamp(item.startsAt) : "";
    const place = item.field.name ? item.field.name : "";
    const city = item.field.city ? item.field.city : "";
    const gameInfo =
      gameStart && place && city ? `${gameStart} bei ${place} in ${city}` : "";

    // Load team logos
    const homeTeamImage = await loadTeamLogo(item.homeTeam.logo);
    const awayTeamImage = await loadTeamLogo(item.awayTeam.logo);

    addTeam(
      homeTeamImage,
      homeTeamName,
      homeTeamGoal,
      homeTeamGoal > awayTeamGoal,
      awayTeamImage,
      awayTeamName,
      awayTeamGoal,
      awayTeamGoal > homeTeamGoal,
      gameInfo
    );
    widget.addSpacer(5);
  }
  widget.addSpacer(1);
  let refreshedAt = getRefreshedAtDate();
  addRefreshedAtDate(refreshedAt);
}

const formatUnixTimestamp = (timestamp) => {
  const date = new Date(timestamp);
  const daysOfWeek = [
    "Sonntag",
    "Montag",
    "Dienstag",
    "Mittwoch",
    "Donnerstag",
    "Freitag",
    "Samstag",
  ];
  const months = [
    "Januar",
    "Februar",
    "März",
    "April",
    "Mai",
    "Juni",
    "Juli",
    "August",
    "September",
    "Oktober",
    "November",
    "Dezember",
  ];

  const hours = ("0" + date.getHours()).slice(-2);
  const minutes = ("0" + date.getMinutes()).slice(-2);
  const dayOfWeek = daysOfWeek[date.getDay()];
  const dayOfMonth = ("0" + date.getDate()).slice(-2);
  const month = months[date.getMonth()];

  return `${hours}:${minutes} Uhr am ${dayOfWeek}, den ${dayOfMonth}. ${month}`;
};

function getRefreshedAtDate() {
  const date = new Date();

  const day = date.getDate().toString().padStart(2, "0");
  const month = (date.getMonth() + 1).toString().padStart(2, "0");
  const hours = date.getHours().toString().padStart(2, "0");
  const minutes = date.getMinutes().toString().padStart(2, "0");

  const formattedDate = `Aktualisiert am ${day}.${month} um ${hours}:${minutes} Uhr`;

  return formattedDate;
}

function displayNoGameData() {
  const noDataText = widget.addText("Keine weiteren Spieldaten gefunden");
  noDataText.font = Font.mediumSystemFont(regularFontSize);
  if (isDarkTheme) {
    noDataText.textColor = new Color("#FFFFFF");
  }
}

function createRowStack() {
  const rowStack = widget.addStack();
  rowStack.layoutHorizontally();
  return rowStack;
}

function createStack(parentStack) {
  const stack = parentStack.addStack();
  return stack;
}

function addGameInfo(stack, info) {
  const gameInfoText = stack.addText(info);
  gameInfoText.font = Font.mediumSystemFont(regularFontSize);
  gameInfoText.leftAlignText();
}

function setImage(stack, image) {
  stack.setPadding(0, 0, 0, 10);
  const imageNode = stack.addImage(image);
  imageNode.imageSize = new Size(imageSize, imageSize);
  imageNode.leftAlignImage();
}

function setTeamName(stack, name) {
  stack.setPadding(0, 8, 0, 8);
  const teamNameText = stack.addText(name);
  teamNameText.font = Font.mediumSystemFont(regularFontSize);
}

function setGoals(stack, goals, isScoreBigger) {
  let possibleGoals = goals === "null" ? "-" : goals;
  const goalsText = stack.addText(possibleGoals);
  goalsText.font = Font.mediumSystemFont(regularFontSize);
  goalsText.rightAlignText();
  if (goals === "-") {
    if (isDarkTheme) {
      goalsText.textColor = new Color("#000000");
    } else {
      goalsText.textColor = new Color("#FFFFFF");
    }
    return;
  }
  goalsText.textColor = isScoreBigger
    ? new Color("#4AA956")
    : new Color("#D22E2E");
}

function addTeam(
  homeImage,
  homeTeamName,
  homeGoals,
  isHomeScoreBigger,
  awayImage,
  awayTeamName,
  awayGoals,
  isAwayScoreBigger,
  gameInfo
) {
  const homeRowStack = createRowStack();
  const awayRowStack = createRowStack();
  const gameInfoStack = createRowStack();

  // Adding home and away team information
  const homeGameInfoStack = createStack(gameInfoStack);

  const homeImageStack = createStack(homeRowStack);
  const awayImageStack = createStack(awayRowStack);

  const homeGoalsStack = createStack(homeRowStack);
  const awayGoalsStack = createStack(awayRowStack);

  const homeTeamNameStack = createStack(homeRowStack);
  const awayTeamNameStack = createStack(awayRowStack);

  addGameInfo(homeGameInfoStack, gameInfo);

  setImage(awayImageStack, awayImage);
  setImage(homeImageStack, homeImage);

  setGoals(homeGoalsStack, homeGoals, isHomeScoreBigger);
  setGoals(awayGoalsStack, awayGoals, isAwayScoreBigger);

  setTeamName(homeTeamNameStack, homeTeamName);
  setTeamName(awayTeamNameStack, awayTeamName);

  widget.addSpacer(4);
}

function addRefreshedAtDate(date) {
  const dateStack = widget.addStack();
  const dateStackName = dateStack.addText(date);
  dateStackName.font = Font.mediumSystemFont(refreshDateSize);
}

await buildWidget();

Script.setWidget(widget);
Script.complete();
widget.presentSmall();

Bonus: Eigene Anpassungen