Added full app to personal portfolio
This commit is contained in:
JaysonCleve
commit
a0ca117ac8
14 changed files with 10972 additions and 0 deletions
43
.gitignore
vendored
Normal file
43
.gitignore
vendored
Normal file
|
|
@ -0,0 +1,43 @@
|
||||||
|
# dependencies
|
||||||
|
node_modules/
|
||||||
|
|
||||||
|
# Expo
|
||||||
|
.expo/
|
||||||
|
.expo-shared/
|
||||||
|
dist/
|
||||||
|
web-build/
|
||||||
|
|
||||||
|
# React Native / native builds
|
||||||
|
android/
|
||||||
|
ios/
|
||||||
|
*.keystore
|
||||||
|
*.jks
|
||||||
|
*.p8
|
||||||
|
*.p12
|
||||||
|
*.mobileprovision
|
||||||
|
|
||||||
|
# local environment
|
||||||
|
.env
|
||||||
|
.env.*
|
||||||
|
!.env.example
|
||||||
|
|
||||||
|
# logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
expo-debug.log*
|
||||||
|
|
||||||
|
# macOS / editor files
|
||||||
|
.DS_Store
|
||||||
|
.idea/
|
||||||
|
.vscode/
|
||||||
|
|
||||||
|
# test / coverage
|
||||||
|
coverage/
|
||||||
|
|
||||||
|
# temporary files
|
||||||
|
tmp/
|
||||||
|
temp/
|
||||||
|
*.tmp
|
||||||
44
App.js
Normal file
44
App.js
Normal file
|
|
@ -0,0 +1,44 @@
|
||||||
|
import React from 'react';
|
||||||
|
import { StatusBar } from 'react-native';
|
||||||
|
import { NavigationContainer } from '@react-navigation/native';
|
||||||
|
import { createNativeStackNavigator } from '@react-navigation/native-stack';
|
||||||
|
import { GestureHandlerRootView } from 'react-native-gesture-handler';
|
||||||
|
|
||||||
|
import HomeScreen from './src/screens/HomeScreen';
|
||||||
|
import ConcertDetailScreen from './src/screens/ConcertDetailScreen';
|
||||||
|
import EditConcertScreen from './src/screens/EditConcertScreen';
|
||||||
|
import StatsScreen from './src/screens/StatsScreen';
|
||||||
|
import FullscreenImageScreen from './src/screens/FullscreenImageScreen';
|
||||||
|
|
||||||
|
const Stack = createNativeStackNavigator();
|
||||||
|
|
||||||
|
export default function App() {
|
||||||
|
return (
|
||||||
|
<GestureHandlerRootView style={{ flex: 1 }}>
|
||||||
|
<StatusBar barStyle="light-content" backgroundColor="#000000" />
|
||||||
|
<NavigationContainer>
|
||||||
|
<Stack.Navigator
|
||||||
|
screenOptions={{
|
||||||
|
headerShown: false,
|
||||||
|
animation: 'ios_from_right',
|
||||||
|
contentStyle: { backgroundColor: '#000000' },
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Stack.Screen name="Home" component={HomeScreen} />
|
||||||
|
<Stack.Screen name="ConcertDetail" component={ConcertDetailScreen} />
|
||||||
|
<Stack.Screen
|
||||||
|
name="EditConcert"
|
||||||
|
component={EditConcertScreen}
|
||||||
|
options={{ animation: 'slide_from_bottom' }}
|
||||||
|
/>
|
||||||
|
<Stack.Screen name="Stats" component={StatsScreen} />
|
||||||
|
<Stack.Screen
|
||||||
|
name="FullscreenImage"
|
||||||
|
component={FullscreenImageScreen}
|
||||||
|
options={{ animation: 'fade' }}
|
||||||
|
/>
|
||||||
|
</Stack.Navigator>
|
||||||
|
</NavigationContainer>
|
||||||
|
</GestureHandlerRootView>
|
||||||
|
);
|
||||||
|
}
|
||||||
81
README.md
Normal file
81
README.md
Normal file
|
|
@ -0,0 +1,81 @@
|
||||||
|
# SETLIST
|
||||||
|
|
||||||
|
SETLIST ist eine mobile Konzerttagebuch-App mit React Native und Expo. Die App ist auf eine einfache, visuell starke Offline-Nutzung ausgelegt: Konzerte erfassen, Erinnerungen festhalten, Bilder speichern und persönliche Statistiken ansehen.
|
||||||
|
|
||||||
|
## Projektstatus
|
||||||
|
|
||||||
|
Dieses Repository wird aktuell als öffentliches Portfolio-Projekt gepflegt. Der Fokus liegt auf Produktidee, UI/UX und mobiler App-Architektur.
|
||||||
|
|
||||||
|
## Features
|
||||||
|
|
||||||
|
- Konzert-Einträge mit Titel, Artist, Venue, Datum und Genre
|
||||||
|
- Bewertungssystem und persönliche Notizen pro Konzert
|
||||||
|
- Setlist-Tracker für Songs des Abends
|
||||||
|
- Bilder und Ticket-Fotos pro Eintrag
|
||||||
|
- Suche, Sortierung und Genre-Filter
|
||||||
|
- Statistikansicht mit persönlichen Konzertdaten
|
||||||
|
- Vollständig offline mit lokaler Speicherung via AsyncStorage
|
||||||
|
|
||||||
|
## Tech Stack
|
||||||
|
|
||||||
|
- React Native
|
||||||
|
- Expo
|
||||||
|
- React Navigation
|
||||||
|
- AsyncStorage
|
||||||
|
- Expo Image Picker
|
||||||
|
- Reanimated / Gesture Handler
|
||||||
|
|
||||||
|
## Lokale Entwicklung
|
||||||
|
|
||||||
|
### Voraussetzungen
|
||||||
|
|
||||||
|
- Node.js 18+
|
||||||
|
- npm
|
||||||
|
- Expo Go auf einem iOS- oder Android-Gerät oder ein lokaler Simulator
|
||||||
|
|
||||||
|
### Starten
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
npx expo start
|
||||||
|
```
|
||||||
|
|
||||||
|
Danach kannst du die App per Expo Go oder im Emulator starten.
|
||||||
|
|
||||||
|
## Projektstruktur
|
||||||
|
|
||||||
|
```text
|
||||||
|
setlist/
|
||||||
|
├── App.js
|
||||||
|
├── app.json
|
||||||
|
├── src/
|
||||||
|
│ ├── constants/
|
||||||
|
│ │ └── genres.js
|
||||||
|
│ ├── screens/
|
||||||
|
│ │ ├── ConcertDetailScreen.js
|
||||||
|
│ │ ├── EditConcertScreen.js
|
||||||
|
│ │ ├── FullscreenImageScreen.js
|
||||||
|
│ │ ├── HomeScreen.js
|
||||||
|
│ │ └── StatsScreen.js
|
||||||
|
│ └── utils/
|
||||||
|
│ └── storage.js
|
||||||
|
├── package.json
|
||||||
|
└── README.md
|
||||||
|
```
|
||||||
|
|
||||||
|
## Hinweise zum öffentlichen Repo
|
||||||
|
|
||||||
|
- Keine API-Keys, Secrets oder produktiven Zugangsdaten sind Teil dieses Repositories.
|
||||||
|
- Die App ist bewusst offline-first aufgebaut und benötigt kein Backend.
|
||||||
|
- Das Repo dient aktuell primär zur Präsentation im Portfolio und kann sich funktional noch weiterentwickeln.
|
||||||
|
|
||||||
|
## Roadmap
|
||||||
|
|
||||||
|
- Export oder Backup-Funktion
|
||||||
|
- Erweiterte Statistikansichten
|
||||||
|
- Verbesserte Medienverwaltung
|
||||||
|
- Optionaler Import externer Konzertdaten
|
||||||
|
|
||||||
|
## License
|
||||||
|
|
||||||
|
Aktuell ist keine Open-Source-Lizenz hinterlegt. Alle Rechte bleiben beim Autor, solange keine separate Lizenzdatei ergänzt wird.
|
||||||
45
app.json
Normal file
45
app.json
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
{
|
||||||
|
"expo": {
|
||||||
|
"name": "SETLIST",
|
||||||
|
"slug": "setlist",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"orientation": "portrait",
|
||||||
|
"icon": "./assets/icon.png",
|
||||||
|
"userInterfaceStyle": "dark",
|
||||||
|
"splash": {
|
||||||
|
"image": "./assets/splash.png",
|
||||||
|
"resizeMode": "contain",
|
||||||
|
"backgroundColor": "#080808"
|
||||||
|
},
|
||||||
|
"assetBundlePatterns": ["**/*"],
|
||||||
|
"ios": {
|
||||||
|
"supportsTablet": false,
|
||||||
|
"bundleIdentifier": "com.yourname.setlist",
|
||||||
|
"buildNumber": "1",
|
||||||
|
"infoPlist": {
|
||||||
|
"NSPhotoLibraryUsageDescription": "SETLIST braucht Zugriff auf deine Fotos, um Konzerttickets und Galeriebilder zu speichern.",
|
||||||
|
"NSCameraUsageDescription": "SETLIST braucht Zugriff auf deine Kamera, um Fotos direkt aufzunehmen."
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"android": {
|
||||||
|
"adaptiveIcon": {
|
||||||
|
"foregroundImage": "./assets/adaptive-icon.png",
|
||||||
|
"backgroundColor": "#080808"
|
||||||
|
},
|
||||||
|
"package": "com.yourname.setlist",
|
||||||
|
"versionCode": 1,
|
||||||
|
"permissions": [
|
||||||
|
"android.permission.READ_EXTERNAL_STORAGE",
|
||||||
|
"android.permission.WRITE_EXTERNAL_STORAGE"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"plugins": [
|
||||||
|
[
|
||||||
|
"expo-image-picker",
|
||||||
|
{
|
||||||
|
"photosPermission": "SETLIST braucht Zugriff auf deine Fotos, um Konzerttickets und Bilder zu speichern."
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
7
babel.config.js
Normal file
7
babel.config.js
Normal file
|
|
@ -0,0 +1,7 @@
|
||||||
|
module.exports = function (api) {
|
||||||
|
api.cache(true);
|
||||||
|
return {
|
||||||
|
presets: ['babel-preset-expo'],
|
||||||
|
plugins: ['react-native-reanimated/plugin'],
|
||||||
|
};
|
||||||
|
};
|
||||||
8505
package-lock.json
generated
Normal file
8505
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load diff
35
package.json
Normal file
35
package.json
Normal file
|
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"name": "setlist",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"main": "node_modules/expo/AppEntry.js",
|
||||||
|
"scripts": {
|
||||||
|
"start": "expo start",
|
||||||
|
"android": "expo start --android",
|
||||||
|
"ios": "expo start --ios",
|
||||||
|
"web": "expo start --web"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@expo/vector-icons": "^14.0.2",
|
||||||
|
"@react-native-async-storage/async-storage": "2.1.2",
|
||||||
|
"@react-native-community/datetimepicker": "^8.3.0",
|
||||||
|
"@react-navigation/native": "^6.1.10",
|
||||||
|
"@react-navigation/native-stack": "^6.9.18",
|
||||||
|
"expo": "^53.0.0",
|
||||||
|
"expo-asset": "~11.1.7",
|
||||||
|
"expo-blur": "~14.1.5",
|
||||||
|
"expo-font": "~13.3.2",
|
||||||
|
"expo-image-picker": "~16.1.4",
|
||||||
|
"expo-linear-gradient": "~14.1.5",
|
||||||
|
"expo-status-bar": "~2.2.3",
|
||||||
|
"react": "19.0.0",
|
||||||
|
"react-native": "0.79.5",
|
||||||
|
"react-native-gesture-handler": "~2.24.0",
|
||||||
|
"react-native-reanimated": "~3.17.4",
|
||||||
|
"react-native-safe-area-context": "5.4.0",
|
||||||
|
"react-native-screens": "~4.11.1"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.20.0"
|
||||||
|
},
|
||||||
|
"private": true
|
||||||
|
}
|
||||||
179
src/constants/genres.js
Normal file
179
src/constants/genres.js
Normal file
|
|
@ -0,0 +1,179 @@
|
||||||
|
export const GENRES = {
|
||||||
|
rock: {
|
||||||
|
label: 'Rock',
|
||||||
|
icon: '🎸',
|
||||||
|
colors: {
|
||||||
|
primary: '#E63946',
|
||||||
|
secondary: '#1D1D1D',
|
||||||
|
accent: '#FF6B6B',
|
||||||
|
background: '#0D0D0D',
|
||||||
|
card: '#1A1A1A',
|
||||||
|
text: '#F1FAEE',
|
||||||
|
textMuted: '#8A8A8A',
|
||||||
|
gradient: ['#E63946', '#8B0000'],
|
||||||
|
ticketBg: '#1A0A0A',
|
||||||
|
},
|
||||||
|
font: 'bold',
|
||||||
|
patternType: 'noise',
|
||||||
|
},
|
||||||
|
pop: {
|
||||||
|
label: 'Pop',
|
||||||
|
icon: '🎤',
|
||||||
|
colors: {
|
||||||
|
primary: '#FF6FD8',
|
||||||
|
secondary: '#3813C2',
|
||||||
|
accent: '#FFD700',
|
||||||
|
background: '#0F0A1E',
|
||||||
|
card: '#1A1230',
|
||||||
|
text: '#FFFFFF',
|
||||||
|
textMuted: '#9B8EC4',
|
||||||
|
gradient: ['#FF6FD8', '#3813C2'],
|
||||||
|
ticketBg: '#160D2A',
|
||||||
|
},
|
||||||
|
font: 'regular',
|
||||||
|
patternType: 'dots',
|
||||||
|
},
|
||||||
|
hiphop: {
|
||||||
|
label: 'Hip-Hop',
|
||||||
|
icon: '🎧',
|
||||||
|
colors: {
|
||||||
|
primary: '#F7C59F',
|
||||||
|
secondary: '#222222',
|
||||||
|
accent: '#FFFFFF',
|
||||||
|
background: '#111111',
|
||||||
|
card: '#1C1C1C',
|
||||||
|
text: '#F7C59F',
|
||||||
|
textMuted: '#666666',
|
||||||
|
gradient: ['#F7C59F', '#D4956A'],
|
||||||
|
ticketBg: '#161616',
|
||||||
|
},
|
||||||
|
font: 'bold',
|
||||||
|
patternType: 'lines',
|
||||||
|
},
|
||||||
|
electronic: {
|
||||||
|
label: 'Electronic',
|
||||||
|
icon: '🎛️',
|
||||||
|
colors: {
|
||||||
|
primary: '#00F5FF',
|
||||||
|
secondary: '#0A0A0F',
|
||||||
|
accent: '#7B2FFF',
|
||||||
|
background: '#050508',
|
||||||
|
card: '#0D0D15',
|
||||||
|
text: '#E0FFFF',
|
||||||
|
textMuted: '#4A6B7A',
|
||||||
|
gradient: ['#00F5FF', '#7B2FFF'],
|
||||||
|
ticketBg: '#080810',
|
||||||
|
},
|
||||||
|
font: 'regular',
|
||||||
|
patternType: 'grid',
|
||||||
|
},
|
||||||
|
jazz: {
|
||||||
|
label: 'Jazz',
|
||||||
|
icon: '🎷',
|
||||||
|
colors: {
|
||||||
|
primary: '#C9A84C',
|
||||||
|
secondary: '#1A1208',
|
||||||
|
accent: '#E8C97A',
|
||||||
|
background: '#0E0B05',
|
||||||
|
card: '#1C1710',
|
||||||
|
text: '#F2E8D5',
|
||||||
|
textMuted: '#7A6A4A',
|
||||||
|
gradient: ['#C9A84C', '#7A5C1E'],
|
||||||
|
ticketBg: '#140F08',
|
||||||
|
},
|
||||||
|
font: 'regular',
|
||||||
|
patternType: 'circles',
|
||||||
|
},
|
||||||
|
metal: {
|
||||||
|
label: 'Metal',
|
||||||
|
icon: '🤘',
|
||||||
|
colors: {
|
||||||
|
primary: '#B0B0B0',
|
||||||
|
secondary: '#0A0A0A',
|
||||||
|
accent: '#FF4500',
|
||||||
|
background: '#050505',
|
||||||
|
card: '#111111',
|
||||||
|
text: '#CCCCCC',
|
||||||
|
textMuted: '#555555',
|
||||||
|
gradient: ['#888888', '#222222'],
|
||||||
|
ticketBg: '#0A0808',
|
||||||
|
},
|
||||||
|
font: 'bold',
|
||||||
|
patternType: 'noise',
|
||||||
|
},
|
||||||
|
classical: {
|
||||||
|
label: 'Klassik',
|
||||||
|
icon: '🎻',
|
||||||
|
colors: {
|
||||||
|
primary: '#D4AF37',
|
||||||
|
secondary: '#1A1410',
|
||||||
|
accent: '#F0E6C0',
|
||||||
|
background: '#0C0A08',
|
||||||
|
card: '#1A1610',
|
||||||
|
text: '#F5EDD5',
|
||||||
|
textMuted: '#8A7A5A',
|
||||||
|
gradient: ['#D4AF37', '#8B7320'],
|
||||||
|
ticketBg: '#120F08',
|
||||||
|
},
|
||||||
|
font: 'regular',
|
||||||
|
patternType: 'lines',
|
||||||
|
},
|
||||||
|
indie: {
|
||||||
|
label: 'Indie',
|
||||||
|
icon: '🌿',
|
||||||
|
colors: {
|
||||||
|
primary: '#7EC8A4',
|
||||||
|
secondary: '#1A2018',
|
||||||
|
accent: '#F4D06F',
|
||||||
|
background: '#0E1210',
|
||||||
|
card: '#171F15',
|
||||||
|
text: '#E8F5E0',
|
||||||
|
textMuted: '#5A7A5A',
|
||||||
|
gradient: ['#7EC8A4', '#3A7A58'],
|
||||||
|
ticketBg: '#0E1510',
|
||||||
|
},
|
||||||
|
font: 'regular',
|
||||||
|
patternType: 'dots',
|
||||||
|
},
|
||||||
|
punk: {
|
||||||
|
label: 'Punk',
|
||||||
|
icon: '⚡',
|
||||||
|
colors: {
|
||||||
|
primary: '#FFDD00',
|
||||||
|
secondary: '#111111',
|
||||||
|
accent: '#FF0055',
|
||||||
|
background: '#0A0A0A',
|
||||||
|
card: '#181818',
|
||||||
|
text: '#FFFFFF',
|
||||||
|
textMuted: '#666666',
|
||||||
|
gradient: ['#FFDD00', '#FF0055'],
|
||||||
|
ticketBg: '#121005',
|
||||||
|
},
|
||||||
|
font: 'bold',
|
||||||
|
patternType: 'grid',
|
||||||
|
},
|
||||||
|
rnb: {
|
||||||
|
label: 'R&B / Soul',
|
||||||
|
icon: '🎶',
|
||||||
|
colors: {
|
||||||
|
primary: '#C084FC',
|
||||||
|
secondary: '#1A0E2A',
|
||||||
|
accent: '#F97316',
|
||||||
|
background: '#0D0815',
|
||||||
|
card: '#180E28',
|
||||||
|
text: '#F3E8FF',
|
||||||
|
textMuted: '#7A5A9A',
|
||||||
|
gradient: ['#C084FC', '#7C3AED'],
|
||||||
|
ticketBg: '#130A1E',
|
||||||
|
},
|
||||||
|
font: 'regular',
|
||||||
|
patternType: 'circles',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export const GENRE_LIST = Object.entries(GENRES).map(([key, val]) => ({
|
||||||
|
key,
|
||||||
|
...val,
|
||||||
|
}));
|
||||||
|
|
||||||
|
export const getGenreTheme = (genreKey) => GENRES[genreKey] || GENRES.rock;
|
||||||
384
src/screens/ConcertDetailScreen.js
Normal file
384
src/screens/ConcertDetailScreen.js
Normal file
|
|
@ -0,0 +1,384 @@
|
||||||
|
import React, { useState, useCallback, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
ScrollView,
|
||||||
|
Image,
|
||||||
|
TouchableOpacity,
|
||||||
|
Animated,
|
||||||
|
Dimensions,
|
||||||
|
Alert,
|
||||||
|
Share,
|
||||||
|
FlatList,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useFocusEffect } from '@react-navigation/native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { BlurView } from 'expo-blur';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { getConcertById, deleteConcert } from '../utils/storage';
|
||||||
|
import { getGenreTheme } from '../constants/genres';
|
||||||
|
|
||||||
|
const { width, height } = Dimensions.get('window');
|
||||||
|
|
||||||
|
export default function ConcertDetailScreen({ navigation, route }) {
|
||||||
|
const { id } = route.params;
|
||||||
|
const [concert, setConcert] = useState(null);
|
||||||
|
const scrollY = useRef(new Animated.Value(0)).current;
|
||||||
|
|
||||||
|
useFocusEffect(
|
||||||
|
useCallback(() => {
|
||||||
|
loadConcert();
|
||||||
|
}, [id])
|
||||||
|
);
|
||||||
|
|
||||||
|
const loadConcert = async () => {
|
||||||
|
const data = await getConcertById(id);
|
||||||
|
setConcert(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!concert) return <View style={{ flex: 1, backgroundColor: '#080808' }} />;
|
||||||
|
|
||||||
|
const theme = getGenreTheme(concert.genre);
|
||||||
|
const c = theme.colors;
|
||||||
|
|
||||||
|
const formattedDate = concert.date
|
||||||
|
? new Date(concert.date).toLocaleDateString('de-DE', {
|
||||||
|
weekday: 'long',
|
||||||
|
day: '2-digit',
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
})
|
||||||
|
: null;
|
||||||
|
|
||||||
|
const headerScale = scrollY.interpolate({
|
||||||
|
inputRange: [-100, 0],
|
||||||
|
outputRange: [1.2, 1],
|
||||||
|
extrapolateRight: 'clamp',
|
||||||
|
});
|
||||||
|
|
||||||
|
const headerOpacity = scrollY.interpolate({
|
||||||
|
inputRange: [0, 200],
|
||||||
|
outputRange: [1, 0],
|
||||||
|
extrapolate: 'clamp',
|
||||||
|
});
|
||||||
|
|
||||||
|
const navOpacity = scrollY.interpolate({
|
||||||
|
inputRange: [150, 250],
|
||||||
|
outputRange: [0, 1],
|
||||||
|
extrapolate: 'clamp',
|
||||||
|
});
|
||||||
|
|
||||||
|
const handleDelete = () => {
|
||||||
|
Alert.alert(
|
||||||
|
'Konzert löschen',
|
||||||
|
'Möchtest du diesen Eintrag wirklich löschen?',
|
||||||
|
[
|
||||||
|
{ text: 'Abbrechen', style: 'cancel' },
|
||||||
|
{
|
||||||
|
text: 'Löschen',
|
||||||
|
style: 'destructive',
|
||||||
|
onPress: async () => {
|
||||||
|
await deleteConcert(id);
|
||||||
|
navigation.goBack();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
]
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleShare = async () => {
|
||||||
|
try {
|
||||||
|
await Share.share({
|
||||||
|
message: `🎵 ${concert.title || 'Konzert'}\n${concert.artist ? `👤 ${concert.artist}` : ''}\n${concert.venue ? `📍 ${concert.venue}` : ''}\n${formattedDate || ''}\n\nGeteilt via SETLIST App`,
|
||||||
|
});
|
||||||
|
} catch (e) {}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderStars = (rating) =>
|
||||||
|
[1, 2, 3, 4, 5].map((s) => (
|
||||||
|
<Text key={s} style={{ fontSize: 20, color: s <= rating ? c.primary : '#333' }}>
|
||||||
|
★
|
||||||
|
</Text>
|
||||||
|
));
|
||||||
|
|
||||||
|
const renderGalleryItem = ({ item }) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => navigation.navigate('FullscreenImage', { uri: item, images: concert.gallery })}
|
||||||
|
activeOpacity={0.9}
|
||||||
|
>
|
||||||
|
<Image source={{ uri: item }} style={[styles.galleryThumb, { borderColor: c.primary + '40' }]} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={[styles.container, { backgroundColor: c.background }]}>
|
||||||
|
{/* Floating Nav on scroll */}
|
||||||
|
<Animated.View style={[styles.floatingNav, { opacity: navOpacity }]}>
|
||||||
|
<BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
|
||||||
|
<Text style={[styles.floatingNavTitle, { color: c.text }]} numberOfLines={1}>
|
||||||
|
{concert.title}
|
||||||
|
</Text>
|
||||||
|
</Animated.View>
|
||||||
|
|
||||||
|
{/* Back / Actions */}
|
||||||
|
<View style={styles.navBar}>
|
||||||
|
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.navBtn} activeOpacity={0.7}>
|
||||||
|
<BlurView intensity={60} tint="dark" style={StyleSheet.absoluteFill} />
|
||||||
|
<Ionicons name="chevron-back" size={22} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<View style={styles.navRight}>
|
||||||
|
<TouchableOpacity onPress={handleShare} style={styles.navBtn} activeOpacity={0.7}>
|
||||||
|
<BlurView intensity={60} tint="dark" style={StyleSheet.absoluteFill} />
|
||||||
|
<Ionicons name="share-outline" size={20} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => navigation.navigate('EditConcert', { id: concert.id })}
|
||||||
|
style={styles.navBtn}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<BlurView intensity={60} tint="dark" style={StyleSheet.absoluteFill} />
|
||||||
|
<Ionicons name="pencil-outline" size={20} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<Animated.ScrollView
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
|
||||||
|
useNativeDriver: true,
|
||||||
|
})}
|
||||||
|
scrollEventThrottle={16}
|
||||||
|
>
|
||||||
|
{/* Hero Image */}
|
||||||
|
<Animated.View style={[styles.heroContainer, { transform: [{ scale: headerScale }] }]}>
|
||||||
|
{concert.ticketImage ? (
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() =>
|
||||||
|
navigation.navigate('FullscreenImage', {
|
||||||
|
uri: concert.ticketImage,
|
||||||
|
images: [concert.ticketImage],
|
||||||
|
})
|
||||||
|
}
|
||||||
|
activeOpacity={0.95}
|
||||||
|
>
|
||||||
|
<Image source={{ uri: concert.ticketImage }} style={styles.heroImage} resizeMode="cover" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
) : (
|
||||||
|
<LinearGradient
|
||||||
|
colors={c.gradient}
|
||||||
|
style={styles.heroPlaceholder}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 1, y: 1 }}
|
||||||
|
>
|
||||||
|
<Text style={styles.heroEmoji}>{theme.icon}</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
)}
|
||||||
|
<Animated.View style={[styles.heroOverlay, { opacity: headerOpacity }]}>
|
||||||
|
<LinearGradient
|
||||||
|
colors={['transparent', c.background]}
|
||||||
|
style={StyleSheet.absoluteFill}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 0, y: 1 }}
|
||||||
|
/>
|
||||||
|
</Animated.View>
|
||||||
|
</Animated.View>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<View style={[styles.content, { backgroundColor: c.background }]}>
|
||||||
|
{/* Genre + Date tag */}
|
||||||
|
<View style={styles.tagsRow}>
|
||||||
|
<View style={[styles.tag, { backgroundColor: c.primary + '30', borderColor: c.primary + '60' }]}>
|
||||||
|
<Text style={[styles.tagText, { color: c.primary }]}>
|
||||||
|
{theme.icon} {theme.label}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
{formattedDate && (
|
||||||
|
<View style={[styles.tag, { backgroundColor: '#FFFFFF10', borderColor: '#FFFFFF20' }]}>
|
||||||
|
<Ionicons name="calendar-outline" size={11} color={c.textMuted} />
|
||||||
|
<Text style={[styles.tagText, { color: c.textMuted }]}>{formattedDate}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Title */}
|
||||||
|
<Text style={[styles.title, { color: c.text }]}>{concert.title || 'Unbenannt'}</Text>
|
||||||
|
|
||||||
|
{/* Artist */}
|
||||||
|
{concert.artist && (
|
||||||
|
<Text style={[styles.artist, { color: c.primary }]}>{concert.artist}</Text>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Venue */}
|
||||||
|
{concert.venue && (
|
||||||
|
<View style={styles.venueRow}>
|
||||||
|
<Ionicons name="location" size={16} color={c.textMuted} />
|
||||||
|
<Text style={[styles.venue, { color: c.textMuted }]}>{concert.venue}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Rating */}
|
||||||
|
{concert.rating > 0 && (
|
||||||
|
<View style={styles.ratingRow}>
|
||||||
|
{renderStars(concert.rating)}
|
||||||
|
<Text style={[styles.ratingLabel, { color: c.textMuted }]}>
|
||||||
|
{['', 'Enttäuschend', 'Okay', 'Gut', 'Sehr gut', 'Unvergesslich'][concert.rating]}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Divider */}
|
||||||
|
<LinearGradient
|
||||||
|
colors={[c.primary + '60', 'transparent']}
|
||||||
|
style={styles.divider}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 1, y: 0 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Notes */}
|
||||||
|
{concert.notes && concert.notes.trim() !== '' && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={[styles.sectionTitle, { color: c.textMuted }]}>Erinnerungen</Text>
|
||||||
|
<Text style={[styles.notes, { color: c.text }]}>{concert.notes}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Setlist */}
|
||||||
|
{concert.setlist && concert.setlist.length > 0 && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={[styles.sectionTitle, { color: c.textMuted }]}>Setlist</Text>
|
||||||
|
{concert.setlist.map((song, i) => (
|
||||||
|
<View key={i} style={styles.setlistItem}>
|
||||||
|
<Text style={[styles.setlistNum, { color: c.primary }]}>{String(i + 1).padStart(2, '0')}</Text>
|
||||||
|
<Text style={[styles.setlistSong, { color: c.text }]}>{song}</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Gallery */}
|
||||||
|
{concert.gallery && concert.gallery.length > 0 && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<View style={styles.sectionHeader}>
|
||||||
|
<Text style={[styles.sectionTitle, { color: c.textMuted }]}>Galerie</Text>
|
||||||
|
<Text style={[styles.sectionCount, { color: c.primary }]}>
|
||||||
|
{concert.gallery.length} Fotos
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
<FlatList
|
||||||
|
data={concert.gallery}
|
||||||
|
keyExtractor={(item, i) => i.toString()}
|
||||||
|
renderItem={renderGalleryItem}
|
||||||
|
horizontal
|
||||||
|
showsHorizontalScrollIndicator={false}
|
||||||
|
contentContainerStyle={styles.galleryList}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Delete */}
|
||||||
|
<TouchableOpacity onPress={handleDelete} style={styles.deleteBtn} activeOpacity={0.7}>
|
||||||
|
<Ionicons name="trash-outline" size={16} color="#FF4444" />
|
||||||
|
<Text style={styles.deleteBtnText}>Eintrag löschen</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<View style={{ height: 60 }} />
|
||||||
|
</View>
|
||||||
|
</Animated.ScrollView>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: { flex: 1 },
|
||||||
|
floatingNav: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: 90,
|
||||||
|
zIndex: 20,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
paddingBottom: 12,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
floatingNavTitle: { fontSize: 16, fontWeight: '700', letterSpacing: 0.5 },
|
||||||
|
navBar: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 52,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
zIndex: 30,
|
||||||
|
},
|
||||||
|
navBtn: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 20,
|
||||||
|
overflow: 'hidden',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||||
|
},
|
||||||
|
navRight: { flexDirection: 'row', gap: 10 },
|
||||||
|
heroContainer: { height: 380, overflow: 'hidden' },
|
||||||
|
heroImage: { width: '100%', height: '100%' },
|
||||||
|
heroPlaceholder: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
heroEmoji: { fontSize: 100 },
|
||||||
|
heroOverlay: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 120 },
|
||||||
|
content: { flex: 1, paddingHorizontal: 20, paddingTop: 16 },
|
||||||
|
tagsRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, marginBottom: 12 },
|
||||||
|
tag: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 5,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderWidth: 1,
|
||||||
|
gap: 4,
|
||||||
|
},
|
||||||
|
tagText: { fontSize: 12, fontWeight: '600' },
|
||||||
|
title: { fontSize: 32, fontWeight: '900', letterSpacing: -0.5, marginBottom: 4, lineHeight: 38 },
|
||||||
|
artist: { fontSize: 18, fontWeight: '700', letterSpacing: 0.3, marginBottom: 8 },
|
||||||
|
venueRow: { flexDirection: 'row', alignItems: 'center', gap: 4, marginBottom: 16 },
|
||||||
|
venue: { fontSize: 14 },
|
||||||
|
ratingRow: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 16 },
|
||||||
|
ratingLabel: { fontSize: 13, marginLeft: 4 },
|
||||||
|
divider: { height: 1, marginBottom: 24 },
|
||||||
|
section: { marginBottom: 28 },
|
||||||
|
sectionHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 },
|
||||||
|
sectionTitle: { fontSize: 11, fontWeight: '700', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 12 },
|
||||||
|
sectionCount: { fontSize: 12, fontWeight: '600' },
|
||||||
|
notes: { fontSize: 16, lineHeight: 26, fontWeight: '400' },
|
||||||
|
setlistItem: { flexDirection: 'row', alignItems: 'center', gap: 12, marginBottom: 10 },
|
||||||
|
setlistNum: { fontSize: 12, fontWeight: '800', width: 24 },
|
||||||
|
setlistSong: { fontSize: 16, flex: 1 },
|
||||||
|
galleryList: { gap: 10 },
|
||||||
|
galleryThumb: {
|
||||||
|
width: 140,
|
||||||
|
height: 140,
|
||||||
|
borderRadius: 12,
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
deleteBtn: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: 8,
|
||||||
|
paddingVertical: 14,
|
||||||
|
borderRadius: 12,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#FF444430',
|
||||||
|
backgroundColor: '#FF44440A',
|
||||||
|
marginTop: 8,
|
||||||
|
},
|
||||||
|
deleteBtnText: { color: '#FF4444', fontSize: 14, fontWeight: '600' },
|
||||||
|
});
|
||||||
610
src/screens/EditConcertScreen.js
Normal file
610
src/screens/EditConcertScreen.js
Normal file
|
|
@ -0,0 +1,610 @@
|
||||||
|
import React, { useState, useEffect, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
ScrollView,
|
||||||
|
TouchableOpacity,
|
||||||
|
TextInput,
|
||||||
|
Image,
|
||||||
|
Animated,
|
||||||
|
Dimensions,
|
||||||
|
Alert,
|
||||||
|
KeyboardAvoidingView,
|
||||||
|
Platform,
|
||||||
|
FlatList,
|
||||||
|
} from 'react-native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import * as ImagePicker from 'expo-image-picker';
|
||||||
|
import DateTimePicker from '@react-native-community/datetimepicker';
|
||||||
|
import { saveConcert, getConcertById, createConcertId } from '../utils/storage';
|
||||||
|
import { getGenreTheme, GENRE_LIST } from '../constants/genres';
|
||||||
|
|
||||||
|
const { width } = Dimensions.get('window');
|
||||||
|
|
||||||
|
export default function EditConcertScreen({ navigation, route }) {
|
||||||
|
const { id } = route.params;
|
||||||
|
const isEdit = !!id;
|
||||||
|
|
||||||
|
const [title, setTitle] = useState('');
|
||||||
|
const [artist, setArtist] = useState('');
|
||||||
|
const [venue, setVenue] = useState('');
|
||||||
|
const [date, setDate] = useState(new Date());
|
||||||
|
const [showDatePicker, setShowDatePicker] = useState(false);
|
||||||
|
const [genre, setGenre] = useState('rock');
|
||||||
|
const [notes, setNotes] = useState('');
|
||||||
|
const [ticketImage, setTicketImage] = useState(null);
|
||||||
|
const [gallery, setGallery] = useState([]);
|
||||||
|
const [rating, setRating] = useState(0);
|
||||||
|
const [setlistInput, setSetlistInput] = useState('');
|
||||||
|
const [setlist, setSetlist] = useState([]);
|
||||||
|
const [saving, setSaving] = useState(false);
|
||||||
|
const [activeSection, setActiveSection] = useState(null);
|
||||||
|
|
||||||
|
const theme = getGenreTheme(genre);
|
||||||
|
const c = theme.colors;
|
||||||
|
|
||||||
|
const accentAnim = useRef(new Animated.Value(0)).current;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (isEdit) loadConcert();
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
Animated.timing(accentAnim, {
|
||||||
|
toValue: 1,
|
||||||
|
duration: 300,
|
||||||
|
useNativeDriver: false,
|
||||||
|
}).start(() => accentAnim.setValue(0));
|
||||||
|
}, [genre]);
|
||||||
|
|
||||||
|
const loadConcert = async () => {
|
||||||
|
const concert = await getConcertById(id);
|
||||||
|
if (concert) {
|
||||||
|
setTitle(concert.title || '');
|
||||||
|
setArtist(concert.artist || '');
|
||||||
|
setVenue(concert.venue || '');
|
||||||
|
setDate(concert.date ? new Date(concert.date) : new Date());
|
||||||
|
setGenre(concert.genre || 'rock');
|
||||||
|
setNotes(concert.notes || '');
|
||||||
|
setTicketImage(concert.ticketImage || null);
|
||||||
|
setGallery(concert.gallery || []);
|
||||||
|
setRating(concert.rating || 0);
|
||||||
|
setSetlist(concert.setlist || []);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const pickTicketImage = async () => {
|
||||||
|
const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||||
|
if (!perm.granted) {
|
||||||
|
Alert.alert('Kein Zugriff', 'Bitte erlaube den Zugriff auf deine Fotos.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const result = await ImagePicker.launchImageLibraryAsync({
|
||||||
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||||
|
quality: 0.8,
|
||||||
|
aspect: [4, 3],
|
||||||
|
});
|
||||||
|
if (!result.canceled && result.assets[0]) {
|
||||||
|
setTicketImage(result.assets[0].uri);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const pickGalleryImages = async () => {
|
||||||
|
const perm = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||||
|
if (!perm.granted) return;
|
||||||
|
const result = await ImagePicker.launchImageLibraryAsync({
|
||||||
|
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||||
|
allowsMultipleSelection: true,
|
||||||
|
quality: 0.7,
|
||||||
|
});
|
||||||
|
if (!result.canceled) {
|
||||||
|
const uris = result.assets.map((a) => a.uri);
|
||||||
|
setGallery((prev) => [...prev, ...uris]);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeGalleryImage = (index) => {
|
||||||
|
setGallery((prev) => prev.filter((_, i) => i !== index));
|
||||||
|
};
|
||||||
|
|
||||||
|
const addSetlistSong = () => {
|
||||||
|
const song = setlistInput.trim();
|
||||||
|
if (!song) return;
|
||||||
|
setSetlist((prev) => [...prev, song]);
|
||||||
|
setSetlistInput('');
|
||||||
|
};
|
||||||
|
|
||||||
|
const removeSetlistSong = (i) => {
|
||||||
|
setSetlist((prev) => prev.filter((_, idx) => idx !== i));
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (!title.trim()) {
|
||||||
|
Alert.alert('Titel fehlt', 'Bitte gib einen Titel für das Konzert ein.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setSaving(true);
|
||||||
|
const concert = {
|
||||||
|
id: id || createConcertId(),
|
||||||
|
title: title.trim(),
|
||||||
|
artist: artist.trim(),
|
||||||
|
venue: venue.trim(),
|
||||||
|
date: date.toISOString(),
|
||||||
|
genre,
|
||||||
|
notes: notes.trim(),
|
||||||
|
ticketImage,
|
||||||
|
gallery,
|
||||||
|
rating,
|
||||||
|
setlist,
|
||||||
|
updatedAt: new Date().toISOString(),
|
||||||
|
createdAt: isEdit ? undefined : new Date().toISOString(),
|
||||||
|
};
|
||||||
|
const success = await saveConcert(concert);
|
||||||
|
setSaving(false);
|
||||||
|
if (success) {
|
||||||
|
navigation.goBack();
|
||||||
|
} else {
|
||||||
|
Alert.alert('Fehler', 'Das Speichern ist fehlgeschlagen. Bitte versuche es erneut.');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const SectionHeader = ({ icon, title: sTitle, section }) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.sectionHeader}
|
||||||
|
onPress={() => setActiveSection(activeSection === section ? null : section)}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<View style={styles.sectionHeaderLeft}>
|
||||||
|
<View style={[styles.sectionIcon, { backgroundColor: c.primary + '20' }]}>
|
||||||
|
<Ionicons name={icon} size={16} color={c.primary} />
|
||||||
|
</View>
|
||||||
|
<Text style={[styles.sectionHeaderText, { color: c.text }]}>{sTitle}</Text>
|
||||||
|
</View>
|
||||||
|
<Ionicons
|
||||||
|
name={activeSection === section ? 'chevron-up' : 'chevron-down'}
|
||||||
|
size={16}
|
||||||
|
color={c.textMuted}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<KeyboardAvoidingView
|
||||||
|
style={[styles.container, { backgroundColor: c.background }]}
|
||||||
|
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
|
||||||
|
>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.headerBtn} activeOpacity={0.7}>
|
||||||
|
<Ionicons name="close" size={22} color={c.text} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={[styles.headerTitle, { color: c.text }]}>
|
||||||
|
{isEdit ? 'Bearbeiten' : 'Neues Konzert'}
|
||||||
|
</Text>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={handleSave}
|
||||||
|
style={[styles.saveBtn, { backgroundColor: c.primary }]}
|
||||||
|
activeOpacity={0.8}
|
||||||
|
disabled={saving}
|
||||||
|
>
|
||||||
|
<Text style={styles.saveBtnText}>{saving ? '...' : 'Speichern'}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Top color accent bar */}
|
||||||
|
<LinearGradient
|
||||||
|
colors={c.gradient}
|
||||||
|
style={styles.accentBar}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 1, y: 0 }}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<ScrollView
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
contentContainerStyle={styles.scroll}
|
||||||
|
keyboardShouldPersistTaps="handled"
|
||||||
|
>
|
||||||
|
{/* === GENRE PICKER === */}
|
||||||
|
<View style={styles.block}>
|
||||||
|
<Text style={[styles.label, { color: c.textMuted }]}>Genre</Text>
|
||||||
|
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.genreRow}>
|
||||||
|
{GENRE_LIST.map((g) => {
|
||||||
|
const active = genre === g.key;
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={g.key}
|
||||||
|
onPress={() => setGenre(g.key)}
|
||||||
|
style={[
|
||||||
|
styles.genreOption,
|
||||||
|
active && {
|
||||||
|
backgroundColor: g.colors.primary,
|
||||||
|
borderColor: g.colors.primary,
|
||||||
|
},
|
||||||
|
!active && { borderColor: '#333', backgroundColor: '#1A1A1A' },
|
||||||
|
]}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<Text style={styles.genreOptionEmoji}>{g.icon}</Text>
|
||||||
|
<Text style={[styles.genreOptionText, active && { color: '#000' }]}>{g.label}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* === TICKET IMAGE === */}
|
||||||
|
<View style={styles.block}>
|
||||||
|
<Text style={[styles.label, { color: c.textMuted }]}>Ticket / Flyer</Text>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={pickTicketImage}
|
||||||
|
style={[styles.ticketUpload, { borderColor: c.primary + '50', backgroundColor: c.card }]}
|
||||||
|
activeOpacity={0.8}
|
||||||
|
>
|
||||||
|
{ticketImage ? (
|
||||||
|
<View>
|
||||||
|
<Image source={{ uri: ticketImage }} style={styles.ticketPreview} resizeMode="cover" />
|
||||||
|
<LinearGradient
|
||||||
|
colors={['transparent', c.background]}
|
||||||
|
style={styles.ticketOverlay}
|
||||||
|
start={{ x: 0, y: 0.5 }}
|
||||||
|
end={{ x: 0, y: 1 }}
|
||||||
|
/>
|
||||||
|
<View style={styles.ticketChangeOverlay}>
|
||||||
|
<Ionicons name="camera" size={18} color="#FFF" />
|
||||||
|
<Text style={styles.ticketChangeText}>Ändern</Text>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
) : (
|
||||||
|
<View style={styles.ticketPlaceholder}>
|
||||||
|
<LinearGradient colors={c.gradient} style={styles.ticketPlaceholderIcon}>
|
||||||
|
<Ionicons name="ticket-outline" size={28} color="#FFF" />
|
||||||
|
</LinearGradient>
|
||||||
|
<Text style={[styles.ticketPlaceholderText, { color: c.text }]}>
|
||||||
|
Ticket oder Flyer hochladen
|
||||||
|
</Text>
|
||||||
|
<Text style={[styles.ticketPlaceholderSub, { color: c.textMuted }]}>
|
||||||
|
Tippe um ein Bild auszuwählen
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* === BASIC INFO === */}
|
||||||
|
<View style={styles.block}>
|
||||||
|
<Text style={[styles.label, { color: c.textMuted }]}>Konzertdetails</Text>
|
||||||
|
<View style={[styles.inputGroup, { backgroundColor: c.card, borderColor: c.primary + '30' }]}>
|
||||||
|
<InputRow
|
||||||
|
icon="musical-notes-outline"
|
||||||
|
placeholder="Titel (z.B. Summer Tour 2024)"
|
||||||
|
value={title}
|
||||||
|
onChangeText={setTitle}
|
||||||
|
color={c}
|
||||||
|
/>
|
||||||
|
<Divider color={c.primary + '20'} />
|
||||||
|
<InputRow
|
||||||
|
icon="person-outline"
|
||||||
|
placeholder="Künstler / Band"
|
||||||
|
value={artist}
|
||||||
|
onChangeText={setArtist}
|
||||||
|
color={c}
|
||||||
|
/>
|
||||||
|
<Divider color={c.primary + '20'} />
|
||||||
|
<InputRow
|
||||||
|
icon="location-outline"
|
||||||
|
placeholder="Venue / Ort"
|
||||||
|
value={venue}
|
||||||
|
onChangeText={setVenue}
|
||||||
|
color={c}
|
||||||
|
/>
|
||||||
|
<Divider color={c.primary + '20'} />
|
||||||
|
{/* Date */}
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => setShowDatePicker(true)}
|
||||||
|
style={styles.dateRow}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<Ionicons name="calendar-outline" size={18} color={c.primary} style={{ marginRight: 10 }} />
|
||||||
|
<Text style={[styles.dateText, { color: date ? c.text : c.textMuted }]}>
|
||||||
|
{date
|
||||||
|
? date.toLocaleDateString('de-DE', { day: '2-digit', month: 'long', year: 'numeric' })
|
||||||
|
: 'Datum wählen'}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
{showDatePicker && (
|
||||||
|
<DateTimePicker
|
||||||
|
value={date}
|
||||||
|
mode="date"
|
||||||
|
display="spinner"
|
||||||
|
onChange={(_, d) => {
|
||||||
|
setShowDatePicker(false);
|
||||||
|
if (d) setDate(d);
|
||||||
|
}}
|
||||||
|
maximumDate={new Date()}
|
||||||
|
themeVariant="dark"
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* === RATING === */}
|
||||||
|
<View style={styles.block}>
|
||||||
|
<Text style={[styles.label, { color: c.textMuted }]}>Bewertung</Text>
|
||||||
|
<View style={[styles.ratingContainer, { backgroundColor: c.card, borderColor: c.primary + '30' }]}>
|
||||||
|
<View style={styles.starsRow}>
|
||||||
|
{[1, 2, 3, 4, 5].map((s) => (
|
||||||
|
<TouchableOpacity key={s} onPress={() => setRating(s === rating ? 0 : s)} activeOpacity={0.7}>
|
||||||
|
<Text style={[styles.star, { color: s <= rating ? c.primary : '#333', fontSize: 36 }]}>★</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
{rating > 0 && (
|
||||||
|
<Text style={[styles.ratingLabel, { color: c.primary }]}>
|
||||||
|
{['', 'Enttäuschend', 'Okay', 'Gut', 'Sehr gut', 'Unvergesslich'][rating]}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* === NOTES === */}
|
||||||
|
<View style={styles.block}>
|
||||||
|
<Text style={[styles.label, { color: c.textMuted }]}>Erinnerungen & Notizen</Text>
|
||||||
|
<TextInput
|
||||||
|
style={[styles.notesInput, { backgroundColor: c.card, color: c.text, borderColor: c.primary + '30' }]}
|
||||||
|
placeholder="Was hat dich bewegt? Besondere Momente, Atmosphäre, Highlights..."
|
||||||
|
placeholderTextColor={c.textMuted}
|
||||||
|
value={notes}
|
||||||
|
onChangeText={setNotes}
|
||||||
|
multiline
|
||||||
|
textAlignVertical="top"
|
||||||
|
returnKeyType="default"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* === SETLIST === */}
|
||||||
|
<View style={styles.block}>
|
||||||
|
<SectionHeader icon="list-outline" title="Setlist" section="setlist" />
|
||||||
|
{(activeSection === 'setlist' || setlist.length > 0) && (
|
||||||
|
<View style={[styles.setlistContainer, { backgroundColor: c.card, borderColor: c.primary + '30' }]}>
|
||||||
|
{setlist.map((song, i) => (
|
||||||
|
<View key={i} style={[styles.setlistRow, { borderBottomColor: c.primary + '15' }]}>
|
||||||
|
<Text style={[styles.setlistNum, { color: c.primary }]}>{String(i + 1).padStart(2, '0')}</Text>
|
||||||
|
<Text style={[styles.setlistSong, { color: c.text }]}>{song}</Text>
|
||||||
|
<TouchableOpacity onPress={() => removeSetlistSong(i)}>
|
||||||
|
<Ionicons name="close-circle" size={16} color={c.textMuted} />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
<View style={styles.setlistInputRow}>
|
||||||
|
<TextInput
|
||||||
|
style={[styles.setlistInput, { color: c.text }]}
|
||||||
|
placeholder="Song hinzufügen..."
|
||||||
|
placeholderTextColor={c.textMuted}
|
||||||
|
value={setlistInput}
|
||||||
|
onChangeText={setSetlistInput}
|
||||||
|
onSubmitEditing={addSetlistSong}
|
||||||
|
returnKeyType="done"
|
||||||
|
/>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={addSetlistSong}
|
||||||
|
style={[styles.setlistAddBtn, { backgroundColor: c.primary }]}
|
||||||
|
>
|
||||||
|
<Ionicons name="add" size={18} color="#000" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* === GALLERY === */}
|
||||||
|
<View style={styles.block}>
|
||||||
|
<SectionHeader icon="images-outline" title={`Galerie (${gallery.length})`} section="gallery" />
|
||||||
|
{(activeSection === 'gallery' || gallery.length > 0) && (
|
||||||
|
<View>
|
||||||
|
<ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles.galleryScroll}>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={pickGalleryImages}
|
||||||
|
style={[styles.galleryAdd, { borderColor: c.primary + '60', backgroundColor: c.card }]}
|
||||||
|
>
|
||||||
|
<Ionicons name="add" size={28} color={c.primary} />
|
||||||
|
<Text style={[styles.galleryAddText, { color: c.primary }]}>Fotos</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
{gallery.map((uri, i) => (
|
||||||
|
<View key={i} style={styles.galleryThumbWrap}>
|
||||||
|
<Image source={{ uri }} style={styles.galleryThumb} />
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => removeGalleryImage(i)}
|
||||||
|
style={styles.galleryRemove}
|
||||||
|
>
|
||||||
|
<Ionicons name="close-circle" size={20} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<View style={{ height: 60 }} />
|
||||||
|
</ScrollView>
|
||||||
|
</KeyboardAvoidingView>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function InputRow({ icon, placeholder, value, onChangeText, color, multiline }) {
|
||||||
|
return (
|
||||||
|
<View style={styles.inputRow}>
|
||||||
|
<Ionicons name={icon} size={18} color={color.primary} style={{ marginRight: 10 }} />
|
||||||
|
<TextInput
|
||||||
|
style={[styles.input, { color: color.text }]}
|
||||||
|
placeholder={placeholder}
|
||||||
|
placeholderTextColor={color.textMuted}
|
||||||
|
value={value}
|
||||||
|
onChangeText={onChangeText}
|
||||||
|
multiline={multiline}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function Divider({ color }) {
|
||||||
|
return <View style={[styles.divider, { backgroundColor: color }]} />;
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: { flex: 1 },
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingTop: 56,
|
||||||
|
paddingBottom: 12,
|
||||||
|
},
|
||||||
|
headerBtn: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
headerTitle: { fontSize: 17, fontWeight: '700' },
|
||||||
|
saveBtn: {
|
||||||
|
paddingHorizontal: 18,
|
||||||
|
paddingVertical: 8,
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
saveBtnText: { color: '#000', fontWeight: '800', fontSize: 14 },
|
||||||
|
accentBar: { height: 2, marginBottom: 4 },
|
||||||
|
scroll: { padding: 16 },
|
||||||
|
block: { marginBottom: 24 },
|
||||||
|
label: { fontSize: 11, fontWeight: '700', letterSpacing: 2, textTransform: 'uppercase', marginBottom: 10 },
|
||||||
|
genreRow: { gap: 8, paddingRight: 8 },
|
||||||
|
genreOption: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 8,
|
||||||
|
borderRadius: 12,
|
||||||
|
borderWidth: 1.5,
|
||||||
|
gap: 6,
|
||||||
|
},
|
||||||
|
genreOptionEmoji: { fontSize: 16 },
|
||||||
|
genreOptionText: { color: '#AAA', fontSize: 13, fontWeight: '600' },
|
||||||
|
ticketUpload: {
|
||||||
|
borderWidth: 1.5,
|
||||||
|
borderStyle: 'dashed',
|
||||||
|
borderRadius: 16,
|
||||||
|
overflow: 'hidden',
|
||||||
|
minHeight: 180,
|
||||||
|
},
|
||||||
|
ticketPreview: { width: '100%', height: 220 },
|
||||||
|
ticketOverlay: { position: 'absolute', bottom: 0, left: 0, right: 0, height: 80 },
|
||||||
|
ticketChangeOverlay: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 12,
|
||||||
|
right: 12,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 4,
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 6,
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
ticketChangeText: { color: '#FFF', fontSize: 13, fontWeight: '600' },
|
||||||
|
ticketPlaceholder: { padding: 32, alignItems: 'center' },
|
||||||
|
ticketPlaceholderIcon: {
|
||||||
|
width: 60,
|
||||||
|
height: 60,
|
||||||
|
borderRadius: 16,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
ticketPlaceholderText: { fontSize: 16, fontWeight: '700', marginBottom: 4 },
|
||||||
|
ticketPlaceholderSub: { fontSize: 13 },
|
||||||
|
inputGroup: {
|
||||||
|
borderRadius: 16,
|
||||||
|
borderWidth: 1,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
inputRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 14 },
|
||||||
|
input: { flex: 1, fontSize: 15 },
|
||||||
|
divider: { height: 1, marginHorizontal: 16 },
|
||||||
|
dateRow: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 14 },
|
||||||
|
dateText: { fontSize: 15 },
|
||||||
|
ratingContainer: {
|
||||||
|
borderRadius: 16,
|
||||||
|
borderWidth: 1,
|
||||||
|
padding: 20,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
starsRow: { flexDirection: 'row', gap: 8, marginBottom: 8 },
|
||||||
|
star: {},
|
||||||
|
ratingLabel: { fontSize: 14, fontWeight: '700', letterSpacing: 1 },
|
||||||
|
notesInput: {
|
||||||
|
borderWidth: 1,
|
||||||
|
borderRadius: 16,
|
||||||
|
padding: 16,
|
||||||
|
fontSize: 15,
|
||||||
|
lineHeight: 24,
|
||||||
|
minHeight: 130,
|
||||||
|
},
|
||||||
|
sectionHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
sectionHeaderLeft: { flexDirection: 'row', alignItems: 'center', gap: 10 },
|
||||||
|
sectionIcon: { width: 30, height: 30, borderRadius: 8, alignItems: 'center', justifyContent: 'center' },
|
||||||
|
sectionHeaderText: { fontSize: 15, fontWeight: '700' },
|
||||||
|
setlistContainer: { borderRadius: 16, borderWidth: 1, overflow: 'hidden' },
|
||||||
|
setlistRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingVertical: 12,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
gap: 12,
|
||||||
|
},
|
||||||
|
setlistNum: { fontSize: 12, fontWeight: '800', width: 24 },
|
||||||
|
setlistSong: { flex: 1, fontSize: 15 },
|
||||||
|
setlistInputRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 10,
|
||||||
|
gap: 8,
|
||||||
|
},
|
||||||
|
setlistInput: { flex: 1, fontSize: 15 },
|
||||||
|
setlistAddBtn: {
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
borderRadius: 10,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
galleryScroll: { gap: 10, paddingRight: 8 },
|
||||||
|
galleryAdd: {
|
||||||
|
width: 100,
|
||||||
|
height: 100,
|
||||||
|
borderRadius: 12,
|
||||||
|
borderWidth: 1.5,
|
||||||
|
borderStyle: 'dashed',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
galleryAddText: { fontSize: 11, fontWeight: '700', marginTop: 2 },
|
||||||
|
galleryThumbWrap: { position: 'relative' },
|
||||||
|
galleryThumb: { width: 100, height: 100, borderRadius: 12 },
|
||||||
|
galleryRemove: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: -6,
|
||||||
|
right: -6,
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.7)',
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
});
|
||||||
121
src/screens/FullscreenImageScreen.js
Normal file
121
src/screens/FullscreenImageScreen.js
Normal file
|
|
@ -0,0 +1,121 @@
|
||||||
|
import React, { useState, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Image,
|
||||||
|
StyleSheet,
|
||||||
|
TouchableOpacity,
|
||||||
|
Dimensions,
|
||||||
|
FlatList,
|
||||||
|
StatusBar,
|
||||||
|
Text,
|
||||||
|
} from 'react-native';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { BlurView } from 'expo-blur';
|
||||||
|
|
||||||
|
const { width, height } = Dimensions.get('window');
|
||||||
|
|
||||||
|
export default function FullscreenImageScreen({ navigation, route }) {
|
||||||
|
const { uri, images = [] } = route.params;
|
||||||
|
const initialIndex = images.indexOf(uri);
|
||||||
|
const [currentIndex, setCurrentIndex] = useState(initialIndex >= 0 ? initialIndex : 0);
|
||||||
|
const flatListRef = useRef(null);
|
||||||
|
|
||||||
|
const displayImages = images.length > 0 ? images : [uri];
|
||||||
|
|
||||||
|
const renderItem = ({ item }) => (
|
||||||
|
<View style={styles.imageContainer}>
|
||||||
|
<Image source={{ uri: item }} style={styles.fullImage} resizeMode="contain" />
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<StatusBar hidden />
|
||||||
|
|
||||||
|
<FlatList
|
||||||
|
ref={flatListRef}
|
||||||
|
data={displayImages}
|
||||||
|
keyExtractor={(item, i) => i.toString()}
|
||||||
|
renderItem={renderItem}
|
||||||
|
horizontal
|
||||||
|
pagingEnabled
|
||||||
|
showsHorizontalScrollIndicator={false}
|
||||||
|
initialScrollIndex={currentIndex}
|
||||||
|
getItemLayout={(_, index) => ({ length: width, offset: width * index, index })}
|
||||||
|
onMomentumScrollEnd={(e) => {
|
||||||
|
const index = Math.round(e.nativeEvent.contentOffset.x / width);
|
||||||
|
setCurrentIndex(index);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Close */}
|
||||||
|
<TouchableOpacity style={styles.closeBtn} onPress={() => navigation.goBack()} activeOpacity={0.8}>
|
||||||
|
<BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
|
||||||
|
<Ionicons name="close" size={22} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
{/* Counter */}
|
||||||
|
{displayImages.length > 1 && (
|
||||||
|
<View style={styles.counter}>
|
||||||
|
<BlurView intensity={60} tint="dark" style={StyleSheet.absoluteFill} />
|
||||||
|
<Text style={styles.counterText}>
|
||||||
|
{currentIndex + 1} / {displayImages.length}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Dots */}
|
||||||
|
{displayImages.length > 1 && (
|
||||||
|
<View style={styles.dots}>
|
||||||
|
{displayImages.map((_, i) => (
|
||||||
|
<View
|
||||||
|
key={i}
|
||||||
|
style={[styles.dot, i === currentIndex ? styles.dotActive : styles.dotInactive]}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: { flex: 1, backgroundColor: '#000' },
|
||||||
|
imageContainer: { width, height, alignItems: 'center', justifyContent: 'center' },
|
||||||
|
fullImage: { width, height },
|
||||||
|
closeBtn: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 52,
|
||||||
|
right: 20,
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 20,
|
||||||
|
overflow: 'hidden',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.4)',
|
||||||
|
},
|
||||||
|
counter: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 56,
|
||||||
|
left: '50%',
|
||||||
|
transform: [{ translateX: -30 }],
|
||||||
|
overflow: 'hidden',
|
||||||
|
borderRadius: 12,
|
||||||
|
paddingHorizontal: 14,
|
||||||
|
paddingVertical: 6,
|
||||||
|
},
|
||||||
|
counterText: { color: '#FFF', fontSize: 14, fontWeight: '600' },
|
||||||
|
dots: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 40,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
gap: 6,
|
||||||
|
},
|
||||||
|
dot: { width: 6, height: 6, borderRadius: 3 },
|
||||||
|
dotActive: { backgroundColor: '#FFF', width: 18 },
|
||||||
|
dotInactive: { backgroundColor: 'rgba(255,255,255,0.3)' },
|
||||||
|
});
|
||||||
563
src/screens/HomeScreen.js
Normal file
563
src/screens/HomeScreen.js
Normal file
|
|
@ -0,0 +1,563 @@
|
||||||
|
import React, { useState, useCallback, useRef } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
FlatList,
|
||||||
|
TouchableOpacity,
|
||||||
|
Animated,
|
||||||
|
Dimensions,
|
||||||
|
Image,
|
||||||
|
StatusBar,
|
||||||
|
TextInput,
|
||||||
|
ScrollView,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useFocusEffect } from '@react-navigation/native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { BlurView } from 'expo-blur';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { getConcerts } from '../utils/storage';
|
||||||
|
import { getGenreTheme, GENRE_LIST } from '../constants/genres';
|
||||||
|
|
||||||
|
const { width, height } = Dimensions.get('window');
|
||||||
|
const CARD_WIDTH = width - 32;
|
||||||
|
|
||||||
|
const SORT_OPTIONS = ['Neueste', 'Älteste', 'A–Z'];
|
||||||
|
|
||||||
|
export default function HomeScreen({ navigation }) {
|
||||||
|
const [concerts, setConcerts] = useState([]);
|
||||||
|
const [filtered, setFiltered] = useState([]);
|
||||||
|
const [search, setSearch] = useState('');
|
||||||
|
const [activeGenre, setActiveGenre] = useState(null);
|
||||||
|
const [activeSort, setActiveSort] = useState('Neueste');
|
||||||
|
const [showSearch, setShowSearch] = useState(false);
|
||||||
|
const scrollY = useRef(new Animated.Value(0)).current;
|
||||||
|
const searchAnim = useRef(new Animated.Value(0)).current;
|
||||||
|
|
||||||
|
useFocusEffect(
|
||||||
|
useCallback(() => {
|
||||||
|
loadConcerts();
|
||||||
|
}, [])
|
||||||
|
);
|
||||||
|
|
||||||
|
const loadConcerts = async () => {
|
||||||
|
const data = await getConcerts();
|
||||||
|
setConcerts(data);
|
||||||
|
applyFilters(data, search, activeGenre, activeSort);
|
||||||
|
};
|
||||||
|
|
||||||
|
const applyFilters = (data, searchText, genre, sort) => {
|
||||||
|
let result = [...data];
|
||||||
|
if (genre) result = result.filter((c) => c.genre === genre);
|
||||||
|
if (searchText.trim())
|
||||||
|
result = result.filter(
|
||||||
|
(c) =>
|
||||||
|
c.title?.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||||
|
c.artist?.toLowerCase().includes(searchText.toLowerCase()) ||
|
||||||
|
c.venue?.toLowerCase().includes(searchText.toLowerCase())
|
||||||
|
);
|
||||||
|
if (sort === 'Neueste') result.sort((a, b) => new Date(b.date) - new Date(a.date));
|
||||||
|
else if (sort === 'Älteste') result.sort((a, b) => new Date(a.date) - new Date(b.date));
|
||||||
|
else if (sort === 'A–Z') result.sort((a, b) => (a.title || '').localeCompare(b.title || ''));
|
||||||
|
setFiltered(result);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSearch = (text) => {
|
||||||
|
setSearch(text);
|
||||||
|
applyFilters(concerts, text, activeGenre, activeSort);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleGenreFilter = (key) => {
|
||||||
|
const next = activeGenre === key ? null : key;
|
||||||
|
setActiveGenre(next);
|
||||||
|
applyFilters(concerts, search, next, activeSort);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleSort = (sort) => {
|
||||||
|
setActiveSort(sort);
|
||||||
|
applyFilters(concerts, search, activeGenre, sort);
|
||||||
|
};
|
||||||
|
|
||||||
|
const toggleSearch = () => {
|
||||||
|
setShowSearch(!showSearch);
|
||||||
|
Animated.spring(searchAnim, {
|
||||||
|
toValue: showSearch ? 0 : 1,
|
||||||
|
useNativeDriver: true,
|
||||||
|
tension: 100,
|
||||||
|
friction: 10,
|
||||||
|
}).start();
|
||||||
|
if (showSearch) {
|
||||||
|
setSearch('');
|
||||||
|
applyFilters(concerts, '', activeGenre, activeSort);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const headerOpacity = scrollY.interpolate({
|
||||||
|
inputRange: [0, 80],
|
||||||
|
outputRange: [0, 1],
|
||||||
|
extrapolate: 'clamp',
|
||||||
|
});
|
||||||
|
|
||||||
|
const renderConcertCard = ({ item, index }) => {
|
||||||
|
const theme = getGenreTheme(item.genre);
|
||||||
|
const c = theme.colors;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<ConcertCard
|
||||||
|
concert={item}
|
||||||
|
theme={theme}
|
||||||
|
index={index}
|
||||||
|
onPress={() => navigation.navigate('ConcertDetail', { id: item.id })}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderEmpty = () => (
|
||||||
|
<View style={styles.emptyContainer}>
|
||||||
|
<Text style={styles.emptyEmoji}>🎵</Text>
|
||||||
|
<Text style={styles.emptyTitle}>Noch keine Konzerte</Text>
|
||||||
|
<Text style={styles.emptySubtitle}>
|
||||||
|
Tippe auf + um dein erstes{'\n'}Konzerterlebnis festzuhalten
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderHeader = () => (
|
||||||
|
<View>
|
||||||
|
{/* Genre Filter */}
|
||||||
|
<ScrollView
|
||||||
|
horizontal
|
||||||
|
showsHorizontalScrollIndicator={false}
|
||||||
|
contentContainerStyle={styles.genreScroll}
|
||||||
|
style={styles.genreScrollOuter}
|
||||||
|
>
|
||||||
|
{GENRE_LIST.map((g) => {
|
||||||
|
const active = activeGenre === g.key;
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={g.key}
|
||||||
|
onPress={() => handleGenreFilter(g.key)}
|
||||||
|
style={[
|
||||||
|
styles.genreChip,
|
||||||
|
active && { backgroundColor: g.colors.primary, borderColor: g.colors.primary },
|
||||||
|
]}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<Text style={styles.genreChipEmoji}>{g.icon}</Text>
|
||||||
|
<Text style={[styles.genreChipText, active && { color: '#000' }]}>{g.label}</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</ScrollView>
|
||||||
|
|
||||||
|
{/* Sort Row */}
|
||||||
|
<View style={styles.sortRow}>
|
||||||
|
<Text style={styles.concertCount}>
|
||||||
|
{filtered.length} {filtered.length === 1 ? 'Konzert' : 'Konzerte'}
|
||||||
|
</Text>
|
||||||
|
<View style={styles.sortPills}>
|
||||||
|
{SORT_OPTIONS.map((s) => (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={s}
|
||||||
|
onPress={() => handleSort(s)}
|
||||||
|
style={[styles.sortPill, activeSort === s && styles.sortPillActive]}
|
||||||
|
>
|
||||||
|
<Text style={[styles.sortPillText, activeSort === s && styles.sortPillTextActive]}>
|
||||||
|
{s}
|
||||||
|
</Text>
|
||||||
|
</TouchableOpacity>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
<StatusBar barStyle="light-content" />
|
||||||
|
|
||||||
|
{/* Sticky blur header on scroll */}
|
||||||
|
<Animated.View style={[styles.stickyHeader, { opacity: headerOpacity }]}>
|
||||||
|
<BlurView intensity={80} tint="dark" style={StyleSheet.absoluteFill} />
|
||||||
|
</Animated.View>
|
||||||
|
|
||||||
|
{/* Top Bar */}
|
||||||
|
<View style={styles.topBar}>
|
||||||
|
<View>
|
||||||
|
<Text style={styles.appName}>SETLIST</Text>
|
||||||
|
<Text style={styles.appTagline}>Deine Konzertgeschichte</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.topActions}>
|
||||||
|
<TouchableOpacity onPress={toggleSearch} style={styles.iconBtn} activeOpacity={0.7}>
|
||||||
|
<Ionicons name={showSearch ? 'close' : 'search'} size={22} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={() => navigation.navigate('Stats')}
|
||||||
|
style={styles.iconBtn}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<Ionicons name="bar-chart-outline" size={22} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Search Bar */}
|
||||||
|
{showSearch && (
|
||||||
|
<Animated.View
|
||||||
|
style={[
|
||||||
|
styles.searchContainer,
|
||||||
|
{
|
||||||
|
opacity: searchAnim,
|
||||||
|
transform: [
|
||||||
|
{
|
||||||
|
translateY: searchAnim.interpolate({
|
||||||
|
inputRange: [0, 1],
|
||||||
|
outputRange: [-10, 0],
|
||||||
|
}),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<Ionicons name="search" size={16} color="#666" style={{ marginRight: 8 }} />
|
||||||
|
<TextInput
|
||||||
|
style={styles.searchInput}
|
||||||
|
placeholder="Künstler, Venue, Titel..."
|
||||||
|
placeholderTextColor="#555"
|
||||||
|
value={search}
|
||||||
|
onChangeText={handleSearch}
|
||||||
|
autoFocus
|
||||||
|
returnKeyType="search"
|
||||||
|
/>
|
||||||
|
{search.length > 0 && (
|
||||||
|
<TouchableOpacity onPress={() => handleSearch('')}>
|
||||||
|
<Ionicons name="close-circle" size={16} color="#555" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
)}
|
||||||
|
</Animated.View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Animated.FlatList
|
||||||
|
data={filtered}
|
||||||
|
keyExtractor={(item) => item.id}
|
||||||
|
renderItem={renderConcertCard}
|
||||||
|
ListHeaderComponent={renderHeader}
|
||||||
|
ListEmptyComponent={renderEmpty}
|
||||||
|
contentContainerStyle={[styles.list, filtered.length === 0 && styles.listEmpty]}
|
||||||
|
showsVerticalScrollIndicator={false}
|
||||||
|
onScroll={Animated.event([{ nativeEvent: { contentOffset: { y: scrollY } } }], {
|
||||||
|
useNativeDriver: true,
|
||||||
|
})}
|
||||||
|
scrollEventThrottle={16}
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* FAB */}
|
||||||
|
<TouchableOpacity
|
||||||
|
style={styles.fab}
|
||||||
|
onPress={() => navigation.navigate('EditConcert', { id: null })}
|
||||||
|
activeOpacity={0.85}
|
||||||
|
>
|
||||||
|
<LinearGradient colors={['#FF6FD8', '#3813C2']} style={styles.fabGradient} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }}>
|
||||||
|
<Ionicons name="add" size={30} color="#FFF" />
|
||||||
|
</LinearGradient>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function ConcertCard({ concert, theme, index, onPress }) {
|
||||||
|
const c = theme.colors;
|
||||||
|
const scaleAnim = useRef(new Animated.Value(1)).current;
|
||||||
|
|
||||||
|
const onPressIn = () =>
|
||||||
|
Animated.spring(scaleAnim, { toValue: 0.97, useNativeDriver: true, tension: 200, friction: 10 }).start();
|
||||||
|
const onPressOut = () =>
|
||||||
|
Animated.spring(scaleAnim, { toValue: 1, useNativeDriver: true, tension: 200, friction: 10 }).start();
|
||||||
|
|
||||||
|
const formattedDate = concert.date
|
||||||
|
? new Date(concert.date).toLocaleDateString('de-DE', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: 'long',
|
||||||
|
year: 'numeric',
|
||||||
|
})
|
||||||
|
: '';
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Animated.View style={{ transform: [{ scale: scaleAnim }], marginBottom: 16 }}>
|
||||||
|
<TouchableOpacity
|
||||||
|
onPress={onPress}
|
||||||
|
onPressIn={onPressIn}
|
||||||
|
onPressOut={onPressOut}
|
||||||
|
activeOpacity={1}
|
||||||
|
>
|
||||||
|
<View style={[styles.card, { backgroundColor: c.card, borderColor: c.primary + '30' }]}>
|
||||||
|
{/* Ticket Image or Gradient Header */}
|
||||||
|
<View style={styles.cardImageContainer}>
|
||||||
|
{concert.ticketImage ? (
|
||||||
|
<Image
|
||||||
|
source={{ uri: concert.ticketImage }}
|
||||||
|
style={styles.cardImage}
|
||||||
|
resizeMode="cover"
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<LinearGradient
|
||||||
|
colors={c.gradient}
|
||||||
|
style={styles.cardImagePlaceholder}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 1, y: 1 }}
|
||||||
|
>
|
||||||
|
<Text style={styles.cardGenreEmoji}>{theme.icon}</Text>
|
||||||
|
</LinearGradient>
|
||||||
|
)}
|
||||||
|
<LinearGradient
|
||||||
|
colors={['transparent', c.card]}
|
||||||
|
style={styles.cardImageOverlay}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 0, y: 1 }}
|
||||||
|
/>
|
||||||
|
{/* Genre Badge */}
|
||||||
|
<View style={[styles.genreBadge, { backgroundColor: c.primary }]}>
|
||||||
|
<Text style={styles.genreBadgeText}>{theme.icon} {theme.label}</Text>
|
||||||
|
</View>
|
||||||
|
{/* Rating Stars */}
|
||||||
|
{concert.rating > 0 && (
|
||||||
|
<View style={styles.ratingBadge}>
|
||||||
|
{[1, 2, 3, 4, 5].map((s) => (
|
||||||
|
<Text key={s} style={{ fontSize: 10, color: s <= concert.rating ? c.primary : '#333' }}>
|
||||||
|
★
|
||||||
|
</Text>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Card Content */}
|
||||||
|
<View style={styles.cardContent}>
|
||||||
|
<Text style={[styles.cardTitle, { color: c.text }]} numberOfLines={1}>
|
||||||
|
{concert.title || 'Unbenannt'}
|
||||||
|
</Text>
|
||||||
|
{concert.artist && (
|
||||||
|
<Text style={[styles.cardArtist, { color: c.primary }]} numberOfLines={1}>
|
||||||
|
{concert.artist}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
<View style={styles.cardMeta}>
|
||||||
|
{concert.venue && (
|
||||||
|
<View style={styles.cardMetaItem}>
|
||||||
|
<Ionicons name="location-outline" size={12} color={c.textMuted} />
|
||||||
|
<Text style={[styles.cardMetaText, { color: c.textMuted }]} numberOfLines={1}>
|
||||||
|
{concert.venue}
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
{formattedDate && (
|
||||||
|
<View style={styles.cardMetaItem}>
|
||||||
|
<Ionicons name="calendar-outline" size={12} color={c.textMuted} />
|
||||||
|
<Text style={[styles.cardMetaText, { color: c.textMuted }]}>{formattedDate}</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
{/* Gallery preview dots */}
|
||||||
|
{concert.gallery && concert.gallery.length > 0 && (
|
||||||
|
<View style={styles.galleryPreviewRow}>
|
||||||
|
<Ionicons name="images-outline" size={12} color={c.textMuted} />
|
||||||
|
<Text style={[styles.cardMetaText, { color: c.textMuted, marginLeft: 4 }]}>
|
||||||
|
{concert.gallery.length} Fotos
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Bottom accent line */}
|
||||||
|
<LinearGradient
|
||||||
|
colors={c.gradient}
|
||||||
|
style={styles.cardAccentLine}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 1, y: 0 }}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</TouchableOpacity>
|
||||||
|
</Animated.View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: { flex: 1, backgroundColor: '#080808' },
|
||||||
|
stickyHeader: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: 100,
|
||||||
|
zIndex: 10,
|
||||||
|
},
|
||||||
|
topBar: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 20,
|
||||||
|
paddingTop: 60,
|
||||||
|
paddingBottom: 16,
|
||||||
|
},
|
||||||
|
appName: {
|
||||||
|
fontSize: 28,
|
||||||
|
fontWeight: '900',
|
||||||
|
color: '#FFFFFF',
|
||||||
|
letterSpacing: 6,
|
||||||
|
},
|
||||||
|
appTagline: {
|
||||||
|
fontSize: 11,
|
||||||
|
color: '#555',
|
||||||
|
letterSpacing: 2,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
marginTop: 2,
|
||||||
|
},
|
||||||
|
topActions: { flexDirection: 'row', gap: 8 },
|
||||||
|
iconBtn: {
|
||||||
|
width: 40,
|
||||||
|
height: 40,
|
||||||
|
borderRadius: 20,
|
||||||
|
backgroundColor: '#1A1A1A',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
searchContainer: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginHorizontal: 16,
|
||||||
|
marginBottom: 12,
|
||||||
|
backgroundColor: '#1A1A1A',
|
||||||
|
borderRadius: 12,
|
||||||
|
paddingHorizontal: 14,
|
||||||
|
paddingVertical: 10,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#333',
|
||||||
|
},
|
||||||
|
searchInput: {
|
||||||
|
flex: 1,
|
||||||
|
color: '#FFF',
|
||||||
|
fontSize: 15,
|
||||||
|
},
|
||||||
|
genreScrollOuter: { marginBottom: 4 },
|
||||||
|
genreScroll: { paddingHorizontal: 16, gap: 8, paddingBottom: 12 },
|
||||||
|
genreChip: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 7,
|
||||||
|
borderRadius: 20,
|
||||||
|
backgroundColor: '#1A1A1A',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: '#333',
|
||||||
|
gap: 5,
|
||||||
|
},
|
||||||
|
genreChipEmoji: { fontSize: 14 },
|
||||||
|
genreChipText: { color: '#AAA', fontSize: 13, fontWeight: '500' },
|
||||||
|
sortRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
concertCount: { color: '#555', fontSize: 13 },
|
||||||
|
sortPills: { flexDirection: 'row', gap: 6 },
|
||||||
|
sortPill: {
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 4,
|
||||||
|
borderRadius: 10,
|
||||||
|
backgroundColor: '#1A1A1A',
|
||||||
|
},
|
||||||
|
sortPillActive: { backgroundColor: '#333' },
|
||||||
|
sortPillText: { color: '#555', fontSize: 12 },
|
||||||
|
sortPillTextActive: { color: '#FFF' },
|
||||||
|
list: { paddingHorizontal: 16, paddingBottom: 120 },
|
||||||
|
listEmpty: { flex: 1 },
|
||||||
|
emptyContainer: {
|
||||||
|
flex: 1,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
paddingTop: 80,
|
||||||
|
},
|
||||||
|
emptyEmoji: { fontSize: 60, marginBottom: 16 },
|
||||||
|
emptyTitle: {
|
||||||
|
color: '#FFF',
|
||||||
|
fontSize: 22,
|
||||||
|
fontWeight: '700',
|
||||||
|
letterSpacing: 1,
|
||||||
|
marginBottom: 8,
|
||||||
|
},
|
||||||
|
emptySubtitle: { color: '#555', fontSize: 15, textAlign: 'center', lineHeight: 22 },
|
||||||
|
// Card
|
||||||
|
card: {
|
||||||
|
borderRadius: 20,
|
||||||
|
overflow: 'hidden',
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
cardImageContainer: { height: 200, position: 'relative' },
|
||||||
|
cardImage: { width: '100%', height: '100%' },
|
||||||
|
cardImagePlaceholder: {
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
cardGenreEmoji: { fontSize: 64 },
|
||||||
|
cardImageOverlay: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 0,
|
||||||
|
left: 0,
|
||||||
|
right: 0,
|
||||||
|
height: 100,
|
||||||
|
},
|
||||||
|
genreBadge: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 12,
|
||||||
|
left: 12,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
paddingVertical: 4,
|
||||||
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
genreBadgeText: { fontSize: 12, fontWeight: '700', color: '#000' },
|
||||||
|
ratingBadge: {
|
||||||
|
position: 'absolute',
|
||||||
|
top: 12,
|
||||||
|
right: 12,
|
||||||
|
flexDirection: 'row',
|
||||||
|
backgroundColor: 'rgba(0,0,0,0.6)',
|
||||||
|
paddingHorizontal: 8,
|
||||||
|
paddingVertical: 4,
|
||||||
|
borderRadius: 10,
|
||||||
|
gap: 1,
|
||||||
|
},
|
||||||
|
cardContent: { padding: 16 },
|
||||||
|
cardTitle: { fontSize: 20, fontWeight: '800', letterSpacing: 0.5, marginBottom: 2 },
|
||||||
|
cardArtist: { fontSize: 14, fontWeight: '600', letterSpacing: 0.3, marginBottom: 10 },
|
||||||
|
cardMeta: { gap: 4 },
|
||||||
|
cardMetaItem: { flexDirection: 'row', alignItems: 'center', gap: 4 },
|
||||||
|
cardMetaText: { fontSize: 12 },
|
||||||
|
galleryPreviewRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginTop: 8,
|
||||||
|
},
|
||||||
|
cardAccentLine: { height: 3 },
|
||||||
|
fab: {
|
||||||
|
position: 'absolute',
|
||||||
|
bottom: 36,
|
||||||
|
right: 24,
|
||||||
|
borderRadius: 32,
|
||||||
|
shadowColor: '#FF6FD8',
|
||||||
|
shadowOffset: { width: 0, height: 8 },
|
||||||
|
shadowOpacity: 0.5,
|
||||||
|
shadowRadius: 16,
|
||||||
|
elevation: 12,
|
||||||
|
},
|
||||||
|
fabGradient: {
|
||||||
|
width: 64,
|
||||||
|
height: 64,
|
||||||
|
borderRadius: 32,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
});
|
||||||
279
src/screens/StatsScreen.js
Normal file
279
src/screens/StatsScreen.js
Normal file
|
|
@ -0,0 +1,279 @@
|
||||||
|
import React, { useState, useCallback } from 'react';
|
||||||
|
import {
|
||||||
|
View,
|
||||||
|
Text,
|
||||||
|
StyleSheet,
|
||||||
|
ScrollView,
|
||||||
|
TouchableOpacity,
|
||||||
|
Dimensions,
|
||||||
|
} from 'react-native';
|
||||||
|
import { useFocusEffect } from '@react-navigation/native';
|
||||||
|
import { LinearGradient } from 'expo-linear-gradient';
|
||||||
|
import { Ionicons } from '@expo/vector-icons';
|
||||||
|
import { getStats, getConcerts } from '../utils/storage';
|
||||||
|
import { getGenreTheme, GENRES } from '../constants/genres';
|
||||||
|
|
||||||
|
const { width } = Dimensions.get('window');
|
||||||
|
|
||||||
|
export default function StatsScreen({ navigation }) {
|
||||||
|
const [stats, setStats] = useState(null);
|
||||||
|
const [concerts, setConcerts] = useState([]);
|
||||||
|
|
||||||
|
useFocusEffect(
|
||||||
|
useCallback(() => {
|
||||||
|
loadStats();
|
||||||
|
}, [])
|
||||||
|
);
|
||||||
|
|
||||||
|
const loadStats = async () => {
|
||||||
|
const s = await getStats();
|
||||||
|
const c = await getConcerts();
|
||||||
|
setStats(s);
|
||||||
|
setConcerts(c);
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!stats) return <View style={{ flex: 1, backgroundColor: '#080808' }} />;
|
||||||
|
|
||||||
|
const topGenres = Object.entries(stats.genreCounts)
|
||||||
|
.sort((a, b) => b[1] - a[1])
|
||||||
|
.slice(0, 5);
|
||||||
|
|
||||||
|
const maxGenreCount = topGenres.length > 0 ? topGenres[0][1] : 1;
|
||||||
|
|
||||||
|
const topGenreTheme = stats.topGenre ? getGenreTheme(stats.topGenre) : null;
|
||||||
|
|
||||||
|
const recentConcerts = [...concerts]
|
||||||
|
.sort((a, b) => new Date(b.date) - new Date(a.date))
|
||||||
|
.slice(0, 3);
|
||||||
|
|
||||||
|
const avgRating =
|
||||||
|
concerts.filter((c) => c.rating > 0).length > 0
|
||||||
|
? concerts.filter((c) => c.rating > 0).reduce((sum, c) => sum + c.rating, 0) /
|
||||||
|
concerts.filter((c) => c.rating > 0).length
|
||||||
|
: 0;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<View style={styles.container}>
|
||||||
|
{/* Header */}
|
||||||
|
<View style={styles.header}>
|
||||||
|
<TouchableOpacity onPress={() => navigation.goBack()} style={styles.backBtn} activeOpacity={0.7}>
|
||||||
|
<Ionicons name="chevron-back" size={22} color="#FFF" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
<Text style={styles.headerTitle}>Deine Statistiken</Text>
|
||||||
|
<View style={{ width: 40 }} />
|
||||||
|
</View>
|
||||||
|
|
||||||
|
<ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={styles.scroll}>
|
||||||
|
{/* Hero stat */}
|
||||||
|
<LinearGradient
|
||||||
|
colors={topGenreTheme ? topGenreTheme.colors.gradient : ['#FF6FD8', '#3813C2']}
|
||||||
|
style={styles.heroCard}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 1, y: 1 }}
|
||||||
|
>
|
||||||
|
<Text style={styles.heroNumber}>{stats.totalConcerts}</Text>
|
||||||
|
<Text style={styles.heroLabel}>Konzerte erlebt</Text>
|
||||||
|
{stats.firstYear && stats.latestYear && stats.firstYear !== stats.latestYear && (
|
||||||
|
<Text style={styles.heroSub}>
|
||||||
|
{stats.firstYear} — {stats.latestYear}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</LinearGradient>
|
||||||
|
|
||||||
|
{/* Stats Row */}
|
||||||
|
<View style={styles.statsRow}>
|
||||||
|
<StatCard
|
||||||
|
icon="star"
|
||||||
|
value={avgRating > 0 ? avgRating.toFixed(1) : '—'}
|
||||||
|
label="Ø Bewertung"
|
||||||
|
color="#FFD700"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
icon="musical-notes"
|
||||||
|
value={concerts.reduce((s, c) => s + (c.setlist?.length || 0), 0)}
|
||||||
|
label="Songs erfasst"
|
||||||
|
color="#7EC8A4"
|
||||||
|
/>
|
||||||
|
<StatCard
|
||||||
|
icon="images"
|
||||||
|
value={concerts.reduce((s, c) => s + (c.gallery?.length || 0), 0)}
|
||||||
|
label="Fotos"
|
||||||
|
color="#FF6FD8"
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
|
||||||
|
{/* Genres */}
|
||||||
|
{topGenres.length > 0 && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Top Genres</Text>
|
||||||
|
{topGenres.map(([key, count]) => {
|
||||||
|
const t = getGenreTheme(key);
|
||||||
|
const barWidth = (count / maxGenreCount) * (width - 80);
|
||||||
|
return (
|
||||||
|
<View key={key} style={styles.genreBar}>
|
||||||
|
<View style={styles.genreBarLabel}>
|
||||||
|
<Text style={styles.genreBarEmoji}>{t.icon}</Text>
|
||||||
|
<Text style={styles.genreBarName}>{t.label}</Text>
|
||||||
|
<Text style={[styles.genreBarCount, { color: t.colors.primary }]}>{count}x</Text>
|
||||||
|
</View>
|
||||||
|
<View style={styles.genreBarTrack}>
|
||||||
|
<LinearGradient
|
||||||
|
colors={t.colors.gradient}
|
||||||
|
style={[styles.genreBarFill, { width: barWidth }]}
|
||||||
|
start={{ x: 0, y: 0 }}
|
||||||
|
end={{ x: 1, y: 0 }}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Years */}
|
||||||
|
{Object.keys(stats.yearCounts).length > 1 && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Nach Jahr</Text>
|
||||||
|
<View style={styles.yearGrid}>
|
||||||
|
{Object.entries(stats.yearCounts)
|
||||||
|
.sort((a, b) => b[0] - a[0])
|
||||||
|
.map(([year, count]) => (
|
||||||
|
<View key={year} style={styles.yearCard}>
|
||||||
|
<Text style={styles.yearNum}>{year}</Text>
|
||||||
|
<Text style={styles.yearCount}>{count}</Text>
|
||||||
|
<Text style={styles.yearLabel}>{count === 1 ? 'Konzert' : 'Konzerte'}</Text>
|
||||||
|
</View>
|
||||||
|
))}
|
||||||
|
</View>
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{/* Recent */}
|
||||||
|
{recentConcerts.length > 0 && (
|
||||||
|
<View style={styles.section}>
|
||||||
|
<Text style={styles.sectionTitle}>Zuletzt besucht</Text>
|
||||||
|
{recentConcerts.map((concert) => {
|
||||||
|
const t = getGenreTheme(concert.genre);
|
||||||
|
return (
|
||||||
|
<TouchableOpacity
|
||||||
|
key={concert.id}
|
||||||
|
style={[styles.recentRow, { borderLeftColor: t.colors.primary }]}
|
||||||
|
onPress={() => navigation.navigate('ConcertDetail', { id: concert.id })}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<Text style={styles.recentEmoji}>{t.icon}</Text>
|
||||||
|
<View style={{ flex: 1 }}>
|
||||||
|
<Text style={styles.recentTitle} numberOfLines={1}>
|
||||||
|
{concert.title || 'Unbenannt'}
|
||||||
|
</Text>
|
||||||
|
{concert.date && (
|
||||||
|
<Text style={styles.recentDate}>
|
||||||
|
{new Date(concert.date).toLocaleDateString('de-DE', {
|
||||||
|
day: '2-digit',
|
||||||
|
month: 'short',
|
||||||
|
year: 'numeric',
|
||||||
|
})}
|
||||||
|
</Text>
|
||||||
|
)}
|
||||||
|
</View>
|
||||||
|
<Ionicons name="chevron-forward" size={16} color="#444" />
|
||||||
|
</TouchableOpacity>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
</View>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<View style={{ height: 40 }} />
|
||||||
|
</ScrollView>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function StatCard({ icon, value, label, color }) {
|
||||||
|
return (
|
||||||
|
<View style={styles.statCard}>
|
||||||
|
<Ionicons name={icon} size={20} color={color} style={{ marginBottom: 6 }} />
|
||||||
|
<Text style={styles.statValue}>{value}</Text>
|
||||||
|
<Text style={styles.statLabel}>{label}</Text>
|
||||||
|
</View>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const styles = StyleSheet.create({
|
||||||
|
container: { flex: 1, backgroundColor: '#080808' },
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingTop: 56,
|
||||||
|
paddingBottom: 16,
|
||||||
|
},
|
||||||
|
backBtn: { width: 40, height: 40, alignItems: 'center', justifyContent: 'center' },
|
||||||
|
headerTitle: { color: '#FFF', fontSize: 17, fontWeight: '700' },
|
||||||
|
scroll: { padding: 16 },
|
||||||
|
heroCard: {
|
||||||
|
borderRadius: 20,
|
||||||
|
padding: 32,
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: 16,
|
||||||
|
},
|
||||||
|
heroNumber: { fontSize: 72, fontWeight: '900', color: '#FFF', lineHeight: 80 },
|
||||||
|
heroLabel: { fontSize: 16, color: 'rgba(255,255,255,0.8)', fontWeight: '600', marginTop: 4 },
|
||||||
|
heroSub: { fontSize: 13, color: 'rgba(255,255,255,0.6)', marginTop: 4 },
|
||||||
|
statsRow: { flexDirection: 'row', gap: 10, marginBottom: 24 },
|
||||||
|
statCard: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: '#1A1A1A',
|
||||||
|
borderRadius: 16,
|
||||||
|
padding: 16,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
statValue: { color: '#FFF', fontSize: 22, fontWeight: '800', marginBottom: 2 },
|
||||||
|
statLabel: { color: '#555', fontSize: 11, textAlign: 'center' },
|
||||||
|
section: { marginBottom: 28 },
|
||||||
|
sectionTitle: {
|
||||||
|
color: '#555',
|
||||||
|
fontSize: 11,
|
||||||
|
fontWeight: '700',
|
||||||
|
letterSpacing: 2,
|
||||||
|
textTransform: 'uppercase',
|
||||||
|
marginBottom: 14,
|
||||||
|
},
|
||||||
|
genreBar: { marginBottom: 14 },
|
||||||
|
genreBarLabel: { flexDirection: 'row', alignItems: 'center', marginBottom: 6, gap: 8 },
|
||||||
|
genreBarEmoji: { fontSize: 16 },
|
||||||
|
genreBarName: { color: '#CCC', fontSize: 14, flex: 1 },
|
||||||
|
genreBarCount: { fontSize: 13, fontWeight: '700' },
|
||||||
|
genreBarTrack: {
|
||||||
|
height: 6,
|
||||||
|
backgroundColor: '#1A1A1A',
|
||||||
|
borderRadius: 3,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
genreBarFill: { height: '100%', borderRadius: 3 },
|
||||||
|
yearGrid: { flexDirection: 'row', flexWrap: 'wrap', gap: 10 },
|
||||||
|
yearCard: {
|
||||||
|
backgroundColor: '#1A1A1A',
|
||||||
|
borderRadius: 14,
|
||||||
|
padding: 16,
|
||||||
|
alignItems: 'center',
|
||||||
|
minWidth: 90,
|
||||||
|
},
|
||||||
|
yearNum: { color: '#888', fontSize: 13, fontWeight: '600' },
|
||||||
|
yearCount: { color: '#FFF', fontSize: 28, fontWeight: '900' },
|
||||||
|
yearLabel: { color: '#555', fontSize: 11, marginTop: 2 },
|
||||||
|
recentRow: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
gap: 12,
|
||||||
|
backgroundColor: '#1A1A1A',
|
||||||
|
borderRadius: 12,
|
||||||
|
padding: 14,
|
||||||
|
marginBottom: 8,
|
||||||
|
borderLeftWidth: 3,
|
||||||
|
},
|
||||||
|
recentEmoji: { fontSize: 20 },
|
||||||
|
recentTitle: { color: '#FFF', fontSize: 15, fontWeight: '600' },
|
||||||
|
recentDate: { color: '#555', fontSize: 12, marginTop: 2 },
|
||||||
|
});
|
||||||
76
src/utils/storage.js
Normal file
76
src/utils/storage.js
Normal file
|
|
@ -0,0 +1,76 @@
|
||||||
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||||
|
|
||||||
|
const CONCERTS_KEY = '@setlist_concerts';
|
||||||
|
const STATS_KEY = '@setlist_stats';
|
||||||
|
|
||||||
|
export const saveConcert = async (concert) => {
|
||||||
|
try {
|
||||||
|
const existing = await getConcerts();
|
||||||
|
const updated = existing.filter((c) => c.id !== concert.id);
|
||||||
|
updated.unshift(concert); // newest first
|
||||||
|
await AsyncStorage.setItem(CONCERTS_KEY, JSON.stringify(updated));
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
console.error('saveConcert error:', e);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getConcerts = async () => {
|
||||||
|
try {
|
||||||
|
const raw = await AsyncStorage.getItem(CONCERTS_KEY);
|
||||||
|
return raw ? JSON.parse(raw) : [];
|
||||||
|
} catch (e) {
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getConcertById = async (id) => {
|
||||||
|
const concerts = await getConcerts();
|
||||||
|
return concerts.find((c) => c.id === id) || null;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const deleteConcert = async (id) => {
|
||||||
|
try {
|
||||||
|
const existing = await getConcerts();
|
||||||
|
const updated = existing.filter((c) => c.id !== id);
|
||||||
|
await AsyncStorage.setItem(CONCERTS_KEY, JSON.stringify(updated));
|
||||||
|
return true;
|
||||||
|
} catch (e) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export const getStats = async () => {
|
||||||
|
const concerts = await getConcerts();
|
||||||
|
const genreCounts = {};
|
||||||
|
const yearCounts = {};
|
||||||
|
let totalConcerts = concerts.length;
|
||||||
|
|
||||||
|
concerts.forEach((c) => {
|
||||||
|
// Genre stats
|
||||||
|
if (c.genre) {
|
||||||
|
genreCounts[c.genre] = (genreCounts[c.genre] || 0) + 1;
|
||||||
|
}
|
||||||
|
// Year stats
|
||||||
|
if (c.date) {
|
||||||
|
const year = new Date(c.date).getFullYear();
|
||||||
|
yearCounts[year] = (yearCounts[year] || 0) + 1;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const topGenre = Object.entries(genreCounts).sort((a, b) => b[1] - a[1])[0];
|
||||||
|
const years = Object.keys(yearCounts).sort();
|
||||||
|
|
||||||
|
return {
|
||||||
|
totalConcerts,
|
||||||
|
genreCounts,
|
||||||
|
yearCounts,
|
||||||
|
topGenre: topGenre ? topGenre[0] : null,
|
||||||
|
firstYear: years[0] || null,
|
||||||
|
latestYear: years[years.length - 1] || null,
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
export const createConcertId = () =>
|
||||||
|
`concert_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||||||
Loading…
Reference in a new issue