2025-summer/team-5
12
Fork 0
Code Issues Pull requests Projects Releases Activity

design update

Browse source
This commit is contained in:
Tobias 2025-08-02 09:40:34 +02:00
parent 6640e1bacd
commit 27755af2e0
7 changed files with 1216 additions and 358 deletions
Download patch file Download diff file Expand all files Collapse all files

12
backend/gradlew vendored
View file

@ -15,8 +15,6 @@
# See the License for the specific language governing permissions and
# limitations under the License.
#
# SPDX-License-Identifier: Apache-2.0
#
##############################################################################
#
@ -57,7 +55,7 @@
# Darwin, MinGW, and NonStop.
#
# (3) This script is generated from the Groovy template
# https://github.com/gradle/gradle/blob/HEAD/platforms/jvm/plugins-application/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
# https://github.com/gradle/gradle/blob/HEAD/subprojects/plugins/src/main/resources/org/gradle/api/internal/plugins/unixStartScript.txt
# within the Gradle project.
#
# You can find Gradle at https://github.com/gradle/gradle/.
@ -86,7 +84,7 @@ done
# shellcheck disable=SC2034
APP_BASE_NAME=${0##*/}
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036)
APP_HOME=$( cd -P "${APP_HOME:-./}" > /dev/null && printf '%s\n' "$PWD" ) || exit
APP_HOME=$( cd "${APP_HOME:-./}" > /dev/null && pwd -P ) || exit
# Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD=maximum
@ -114,7 +112,7 @@ case "$( uname )" in #(
NONSTOP* ) nonstop=true ;;
esac
CLASSPATH="\\\"\\\""
CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM.
@ -205,7 +203,7 @@ fi
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Collect all arguments for the java command:
# * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
# * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
# and any embedded shellness will be escaped.
# * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
# treated as '${Hostname}' itself on the command line.
@ -213,7 +211,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
set -- \
"-Dorg.gradle.appname=$APP_BASE_NAME" \
-classpath "$CLASSPATH" \
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
org.gradle.wrapper.GradleWrapperMain \
"$@"
# Stop when "xargs" is not available.

6
backend/gradlew.bat vendored
View file

@ -13,8 +13,6 @@
@rem See the License for the specific language governing permissions and
@rem limitations under the License.
@rem
@rem SPDX-License-Identifier: Apache-2.0
@rem
@if "%DEBUG%"=="" @echo off
@rem ##########################################################################
@ -70,11 +68,11 @@ goto fail
:execute
@rem Setup the command line
set CLASSPATH=
set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
:end
@rem End local scope for the variables with windows NT shell

1180
frontend/src/index.css
View file

File diff suppressed because it is too large Load diff

161
frontend/src/screens/CreateStation.jsx
View file

@ -1,15 +1,51 @@
import React, { useState } from "react";
import { createStation } from "../utils/StationsCreate";
// I UNDERSTAND THIS!! --Noah
import { useNavigate } from "react-router-dom";
function CreateStation() {
const navigate = useNavigate();
const [name, setName] = useState("");
const [description, setDescription] = useState("");
const [joinCode, setJoinCode] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState("");
const [isCopied, setIsCopied] = useState(false);
const handleCreateStation = () => {
setJoinCode(createStation(name, description));
const handleCreateStation = async () => {
if (!name.trim() || !description.trim()) {
setError("Please fill in all fields");
return;
}
setIsLoading(true);
setError("");
try {
const code = await createStation(name, description);
setJoinCode(code);
} catch (error) {
setError(error.message || "Failed to create station");
} finally {
setIsLoading(false);
}
};
const handleGoToStation = () => {
// Navigate to the station or home page
navigate("/");
};
const handleCopyCode = async () => {
try {
await navigator.clipboard.writeText(joinCode);
setIsCopied(true);
// Reset the animation after 2 seconds
setTimeout(() => {
setIsCopied(false);
}, 2000);
} catch (err) {
console.error('Failed to copy: ', err);
}
};
return (
@ -37,25 +73,112 @@ function CreateStation() {
<div className="create-station-content">
<header className="create-station-header">
<h1>Create a Station on Serena</h1>
<p className="create-station-subtitle">Start your own collaborative music experience</p>
</header>
<main className="create-station-content">
<textarea onChange={(e) => setName(e.target.value)} />
<textarea onChange={(e) => setDescription(e.target.value)} />
{!joinCode ? (
<form className="create-station-form" onSubmit={(e) => e.preventDefault()}>
<div className="form-group">
<label htmlFor="station-name">Station Name</label>
<input
id="station-name"
type="text"
placeholder="Enter your station name..."
value={name}
onChange={(e) => setName(e.target.value)}
disabled={isLoading}
/>
</div>
<button
className="create-station-final-btn"
onClick={handleCreateStation}
disabled={!name || !description}
>
Create Radio Station
</button>
<div className="form-group">
<label htmlFor="station-description">Description</label>
<textarea
id="station-description"
placeholder="Describe your station's vibe..."
value={description}
onChange={(e) => setDescription(e.target.value)}
disabled={isLoading}
rows={4}
/>
</div>
<p>your joinCode: {joinCode}</p>
</main>
</div>
</div>
</div>
{error && (
<div className="error-message">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
</svg>
{error}
</div>
)}
<button
type="button"
className="create-station-final-btn"
onClick={handleCreateStation}
disabled={!name.trim() || !description.trim() || isLoading}
>
{isLoading ? (
<>
<div className="loading-spinner"></div>
Creating Station...
</>
) : (
<>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
</svg>
Create Radio Station
</>
)}
</button>
</form>
) : (
<div className="success-state">
<div className="success-icon">
<svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
</div>
<h2>Station Created Successfully!</h2>
<p>Your station is ready to go. Share this join code with your friends:</p>
<div className="join-code-display">
<span className="join-code">{joinCode}</span>
<button
className={`copy-btn ${isCopied ? 'copied' : ''}`}
onClick={handleCopyCode}
>
{isCopied ? (
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
) : (
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
</svg>
)}
</button>
</div>
{isCopied && (
<div className="copy-feedback">
<span className="copy-success-message">
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
</svg>
Copied to clipboard!
</span>
</div>
)}
<button className="go-to-station-btn" onClick={handleGoToStation}>
Go to Home
</button>
</div>
)}
</div>
</div>
</div>
</div>
);
}

24
frontend/src/screens/Home.jsx
View file

@ -14,25 +14,29 @@ function Home() {
return (
<div className="home-container">
<div className="content">
<h1 className="title">Radio Station Hub</h1>
<p className="subtitle">
Create or join a radio station to share music with friends
</p>
<div className="home-content">
<div className="home-header">
<h1 className="home-title">Serena Station Hub</h1>
<p className="home-subtitle">
Create or join a radio station to share music with friends
</p>
</div>
<div className="button-container">
<div className="home-actions">
<button
className="action-button primary"
className="home-btn home-btn-primary"
onClick={handleCreateStation}
>
Create Radio Station
<span className="btn-icon">🎵</span>
Create Station
</button>
<button
className="action-button secondary"
className="home-btn home-btn-secondary"
onClick={handleJoinStation}
>
Join Radio Station
<span className="btn-icon">🎧</span>
Join Station
</button>
</div>
</div>

82
frontend/src/screens/JoinStation.jsx
View file

@ -5,17 +5,23 @@ import { getStations } from "../utils/GetStations";
function JoinStation() {
const navigate = useNavigate();
const [stations, setStations] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const handleJoinStation = (stationID) => {
// console.log("Joining station with ID:" + stationID);
navigate(`/station/${stationID}`);
};
useEffect(() => {
async function fetchStations() {
const result = await getStations();
setStations(result);
setIsLoading(true);
try {
const result = await getStations();
setStations(result);
} catch (error) {
console.error("Failed to fetch stations:", error);
} finally {
setIsLoading(false);
}
}
fetchStations();
}, []);
@ -40,28 +46,66 @@ function JoinStation() {
</div>
</div>
{/* Right Section - Join Station Form */}
{/* Right Section - Join Station Content */}
<div className="join-station-right-section">
<div className="join-station-content">
<header className="join-station-header">
<h1>Join a Station on Serena</h1>
<p className="join-station-subtitle">Connect to an existing collaborative music experience</p>
</header>
<main className="join-station-content">
{stations.map((station, index) => {
return (
<div key={index}>
<p>Station Name: {station.name}</p>
<p>Station Description: {station.description}</p>
<button onClick={() => handleJoinStation(station.id)}>
join this station
</button>
<div className="join-station-body">
{isLoading ? (
<div className="loading-state">
<div className="loading-spinner"></div>
<p>Loading available stations...</p>
</div>
) : stations.length === 0 ? (
<div className="empty-state">
<div className="empty-icon">
<svg width="60" height="60" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 3v10.55c-.59-.34-1.27-.55-2-.55-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4V7h4V3h-6z"/>
</svg>
</div>
<h3>No stations available</h3>
<p>There are currently no active stations to join. Create one to get started!</p>
<button
className="create-station-btn"
onClick={() => navigate('/create-station')}
>
Create Station
</button>
</div>
) : (
<div className="stations-grid">
<h2>Available Stations</h2>
<div className="stations-list">
{stations.map((station, index) => (
<div key={index} className="station-card">
<div className="station-info">
<h3>{station.name}</h3>
<p className="station-description">{station.description}</p>
<div className="station-meta">
<span className="station-id">ID: {station.id}</span>
</div>
</div>
<button
className="join-station-btn"
onClick={() => handleJoinStation(station.id)}
>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5v14l11-7z"/>
</svg>
Join Station
</button>
</div>
))}
</div>
</div>
)}
</div>
);
})}
</main>
</div>
</div>
</div>
</div>
</div>
</div>
);

109
frontend/src/screens/StationPage.jsx
View file

@ -1,35 +1,130 @@
import React, { useState } from "react";
import { useParams } from "react-router-dom";
import React, { useState, useEffect } from "react";
import AddSongModal from "./AddSongModal";
import LoginButton from "../components/LoginButton";
import { addClientToStation } from "../utils/AddClientToStation";
function StationPage() {
const { stationID } = useParams();
const [clientToken, setClientToken] = useState("");
const { id: stationId } = useParams();
const [setClientToken] = useState("");
const [isModalOpen, setIsModalOpen] = useState(false);
const [accessDenied, setAccessDenied] = useState(true);
const [currentSong] = useState({ progress: 0, duration: 1 });
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState("");
const [userName, setUserName] = useState("");
const [joinCode, setJoinCode] = useState("");
const auth = async () => {
if (!userName.trim() || !joinCode.trim()) {
setError("Please fill in all fields");
return;
}
setIsLoading(true);
setError("");
try {
const token = await addClientToStation(userName, joinCode);
setClientToken(token);
setAccessDenied(false);
} catch (error) {
console.error("Auth failed:", error);
setError(error.message || "Failed to join station");
setAccessDenied(true);
} finally {
setIsLoading(false);
}
};
if (accessDenied) {
return (
<div>
<textarea onChange={(e) => setUserName(e.target.value)} />
<textarea onChange={(e) => setJoinCode(e.target.value)} />
<button onClick={auth}>Access this RadioTower</button>
<div className="join-station-container">
<div className="join-station-main">
{/* Left Section - Vinyl Animation */}
<div className="join-station-left-section">
<div className="join-station-vinyl-container">
<div className="join-station-vinyl-record">
<div className="vinyl-center"></div>
<div className="vinyl-grooves"></div>
</div>
{/* Animated Music Notes */}
<div className="join-station-music-notes">
<div className="music-note note-1">♪</div>
<div className="music-note note-2">♫</div>
<div className="music-note note-3">♪</div>
</div>
</div>
</div>
{/* Right Section - Authentication Form */}
<div className="join-station-right-section">
<div className="join-station-content">
<header className="join-station-header">
<h1>Join Station {stationId}</h1>
<p className="join-station-subtitle">Enter your details to access this collaborative music experience</p>
</header>
<form className="create-station-form" onSubmit={(e) => e.preventDefault()}>
<div className="form-group">
<label htmlFor="user-name">Your Name</label>
<input
id="user-name"
type="text"
placeholder="Enter your name..."
value={userName}
onChange={(e) => setUserName(e.target.value)}
disabled={isLoading}
/>
</div>
<div className="form-group">
<label htmlFor="join-code">Join Code</label>
<input
id="join-code"
type="text"
placeholder="Enter the station join code..."
value={joinCode}
onChange={(e) => setJoinCode(e.target.value)}
disabled={isLoading}
/>
</div>
{error && (
<div className="error-message">
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
</svg>
{error}
</div>
)}
<button
type="button"
className="create-station-final-btn"
onClick={auth}
disabled={!userName.trim() || !joinCode.trim() || isLoading}
>
{isLoading ? (
<>
<div className="loading-spinner"></div>
Joining Station...
</>
) : (
<>
<svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M8 5v14l11-7z"/>
</svg>
Join RadioTower
</>
)}
</button>
</form>
</div>
</div>
</div>
</div>
);
}