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 # See the License for the specific language governing permissions and
# limitations under the License. # limitations under the License.
# #
# SPDX-License-Identifier: Apache-2.0
#
############################################################################## ##############################################################################
# #
@ -57,7 +55,7 @@
# Darwin, MinGW, and NonStop. # Darwin, MinGW, and NonStop.
# #
# (3) This script is generated from the Groovy template # (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. # within the Gradle project.
# #
# You can find Gradle at https://github.com/gradle/gradle/. # You can find Gradle at https://github.com/gradle/gradle/.
@ -86,7 +84,7 @@ done
# shellcheck disable=SC2034 # shellcheck disable=SC2034
APP_BASE_NAME=${0##*/} APP_BASE_NAME=${0##*/}
# Discard cd standard output in case $CDPATH is set (https://github.com/gradle/gradle/issues/25036) # 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. # Use the maximum available, or set MAX_FD != -1 to use that value.
MAX_FD=maximum MAX_FD=maximum
@ -114,7 +112,7 @@ case "$( uname )" in #(
NONSTOP* ) nonstop=true ;; NONSTOP* ) nonstop=true ;;
esac esac
CLASSPATH="\\\"\\\"" CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
# Determine the Java command to use to start the JVM. # Determine the Java command to use to start the JVM.
@ -205,7 +203,7 @@ fi
DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"' DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
# Collect all arguments for the java command: # 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. # 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 # * 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. # treated as '${Hostname}' itself on the command line.
@ -213,7 +211,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
set -- \ set -- \
"-Dorg.gradle.appname=$APP_BASE_NAME" \ "-Dorg.gradle.appname=$APP_BASE_NAME" \
-classpath "$CLASSPATH" \ -classpath "$CLASSPATH" \
-jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \ org.gradle.wrapper.GradleWrapperMain \
"$@" "$@"
# Stop when "xargs" is not available. # 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 See the License for the specific language governing permissions and
@rem limitations under the License. @rem limitations under the License.
@rem @rem
@rem SPDX-License-Identifier: Apache-2.0
@rem
@if "%DEBUG%"=="" @echo off @if "%DEBUG%"=="" @echo off
@rem ########################################################################## @rem ##########################################################################
@ -70,11 +68,11 @@ goto fail
:execute :execute
@rem Setup the command line @rem Setup the command line
set CLASSPATH= set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
@rem Execute Gradle @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 :end
@rem End local scope for the variables with windows NT shell @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 React, { useState } from "react";
import { createStation } from "../utils/StationsCreate"; import { createStation } from "../utils/StationsCreate";
import { useNavigate } from "react-router-dom";
// I UNDERSTAND THIS!! --Noah
function CreateStation() { function CreateStation() {
const navigate = useNavigate();
const [name, setName] = useState(""); const [name, setName] = useState("");
const [description, setDescription] = useState(""); const [description, setDescription] = useState("");
const [joinCode, setJoinCode] = useState(""); const [joinCode, setJoinCode] = useState("");
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState("");
const [isCopied, setIsCopied] = useState(false);
const handleCreateStation = () => { const handleCreateStation = async () => {
setJoinCode(createStation(name, description)); 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 ( return (
@ -37,25 +73,112 @@ function CreateStation() {
<div className="create-station-content"> <div className="create-station-content">
<header className="create-station-header"> <header className="create-station-header">
<h1>Create a Station on Serena</h1> <h1>Create a Station on Serena</h1>
<p className="create-station-subtitle">Start your own collaborative music experience</p>
</header> </header>
<main className="create-station-content"> {!joinCode ? (
<textarea onChange={(e) => setName(e.target.value)} /> <form className="create-station-form" onSubmit={(e) => e.preventDefault()}>
<textarea onChange={(e) => setDescription(e.target.value)} /> <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 <div className="form-group">
className="create-station-final-btn" <label htmlFor="station-description">Description</label>
onClick={handleCreateStation} <textarea
disabled={!name || !description} id="station-description"
> placeholder="Describe your station's vibe..."
Create Radio Station value={description}
</button> onChange={(e) => setDescription(e.target.value)}
disabled={isLoading}
rows={4}
/>
</div>
<p>your joinCode: {joinCode}</p> {error && (
</main> <div className="error-message">
</div> <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
</div> <path d="M12 2L13.09 8.26L22 9L13.09 9.74L12 16L10.91 9.74L2 9L10.91 8.26L12 2Z"/>
</div> </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> </div>
); );
} }

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

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

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

@ -5,17 +5,23 @@ import { getStations } from "../utils/GetStations";
function JoinStation() { function JoinStation() {
const navigate = useNavigate(); const navigate = useNavigate();
const [stations, setStations] = useState([]); const [stations, setStations] = useState([]);
const [isLoading, setIsLoading] = useState(true);
const handleJoinStation = (stationID) => { const handleJoinStation = (stationID) => {
// console.log("Joining station with ID:" + stationID);
navigate(`/station/${stationID}`); navigate(`/station/${stationID}`);
}; };
useEffect(() => { useEffect(() => {
async function fetchStations() { async function fetchStations() {
const result = await getStations(); setIsLoading(true);
setStations(result); try {
const result = await getStations();
setStations(result);
} catch (error) {
console.error("Failed to fetch stations:", error);
} finally {
setIsLoading(false);
}
} }
fetchStations(); fetchStations();
}, []); }, []);
@ -40,28 +46,66 @@ function JoinStation() {
</div> </div>
</div> </div>
{/* Right Section - Join Station Form */} {/* Right Section - Join Station Content */}
<div className="join-station-right-section"> <div className="join-station-right-section">
<div className="join-station-content"> <div className="join-station-content">
<header className="join-station-header"> <header className="join-station-header">
<h1>Join a Station on Serena</h1> <h1>Join a Station on Serena</h1>
<p className="join-station-subtitle">Connect to an existing collaborative music experience</p>
</header> </header>
<main className="join-station-content"> <div className="join-station-body">
{stations.map((station, index) => { {isLoading ? (
return ( <div className="loading-state">
<div key={index}> <div className="loading-spinner"></div>
<p>Station Name: {station.name}</p> <p>Loading available stations...</p>
<p>Station Description: {station.description}</p> </div>
<button onClick={() => handleJoinStation(station.id)}> ) : stations.length === 0 ? (
join this station <div className="empty-state">
</button> <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> </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 { useParams } from "react-router-dom";
import React, { useState, useEffect } from "react";
import AddSongModal from "./AddSongModal"; import AddSongModal from "./AddSongModal";
import LoginButton from "../components/LoginButton"; import LoginButton from "../components/LoginButton";
import { addClientToStation } from "../utils/AddClientToStation"; import { addClientToStation } from "../utils/AddClientToStation";
function StationPage() { function StationPage() {
const { stationID } = useParams(); const { id: stationId } = useParams();
const [clientToken, setClientToken] = useState(""); const [setClientToken] = useState("");
const [isModalOpen, setIsModalOpen] = useState(false); const [isModalOpen, setIsModalOpen] = useState(false);
const [accessDenied, setAccessDenied] = useState(true); 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 [userName, setUserName] = useState("");
const [joinCode, setJoinCode] = useState(""); const [joinCode, setJoinCode] = useState("");
const auth = async () => { const auth = async () => {
if (!userName.trim() || !joinCode.trim()) {
setError("Please fill in all fields");
return;
}
setIsLoading(true);
setError("");
try { try {
const token = await addClientToStation(userName, joinCode); const token = await addClientToStation(userName, joinCode);
setClientToken(token); setClientToken(token);
setAccessDenied(false); setAccessDenied(false);
} catch (error) { } catch (error) {
console.error("Auth failed:", error); console.error("Auth failed:", error);
setError(error.message || "Failed to join station");
setAccessDenied(true); setAccessDenied(true);
} finally {
setIsLoading(false);
} }
}; };
if (accessDenied) { if (accessDenied) {
return ( return (
<div> <div className="join-station-container">
<textarea onChange={(e) => setUserName(e.target.value)} /> <div className="join-station-main">
<textarea onChange={(e) => setJoinCode(e.target.value)} /> {/* Left Section - Vinyl Animation */}
<button onClick={auth}>Access this RadioTower</button> <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> </div>
); );
} }