Browse Source

done stuff

master
rino 2 years ago
parent
commit
05e99fa0b5
6 changed files with 109 additions and 51 deletions
  1. +3
    -0
      public/index.html
  2. BIN
      public/media/image/posterHolger.PNG
  3. BIN
      public/media/video/holger.mp4
  4. +90
    -43
      src/App.js
  5. +10
    -2
      src/TimelineItem.js
  6. +6
    -6
      src/timelineItems.json

+ 3
- 0
public/index.html View File

@ -40,4 +40,7 @@
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
<footer>
Test
</footer>
</html>

BIN
public/media/image/posterHolger.PNG View File

Before After
Width: 605  |  Height: 1079  |  Size: 1.4 MiB

BIN
public/media/video/holger.mp4 View File


+ 90
- 43
src/App.js View File

@ -1,15 +1,16 @@
import React, { Component } from 'react';
// Material-UI
import { Grid, withStyles, BottomNavigation, BottomNavigationAction, Switch } from '@material-ui/core';
import IconButton from '@material-ui/core/IconButton';
import { Grid, withStyles, Switch, Tabs, Tab, IconButton } from '@material-ui/core';
//import IconButton from '@material-ui/core/IconButton';
import Alert from '@material-ui/lab/Alert';
//Icons
import FavoriteIcon from '@material-ui/icons/Favorite';
import InfoIcon from '@material-ui/icons/Info';
import NotificationsIcon from '@material-ui/icons/Notifications';
import InstagramIcon from '@material-ui/icons/Instagram';
import NotificationsOffIcon from '@material-ui/icons/NotificationsOff';
import OndemandVideoIcon from '@material-ui/icons/OndemandVideo';
import QueueMusicIcon from '@material-ui/icons/QueueMusic';
import { Button } from '@material-ui/core'
@ -69,13 +70,31 @@ const styles = theme => ({
borderTopRightRadius: "0px",
borderBottomRightRadius: "0px",
height: "100%"
},
heading: {
fontSize: "1.8rem",
color: "#6f0020"
},
greetingsContainer: {
marginLeft: "30px",
marginRight: "30px",
marginTop: "20px"
},
videoAnsprache: {
marginTop: "20px",
alignItems: "center"
},
alertBox: {
marginTop: "10px",
marginLeft: "20px",
marginRight: "20px"
}
})
const theme = createMuiTheme({
palette: {
primary: {
main: "#4A0013"
main: "#b51d48"
},
secondary: {
main: '#fff'
@ -97,7 +116,8 @@ class App extends Component {
publishedItemsCount: 0,
finalItemsCount: timelineContents.length,
debug: false,
dayOffset:6
dayOffset: 6,
alertVisible: true
}
componentDidMount() {
@ -108,7 +128,7 @@ class App extends Component {
//First initally counting the already published items to prevent a lot of notifications at the beginning
let initialCount = 0;
let currentTime = new Date().getTime() + (86400000*this.state.dayOffset)
let currentTime = new Date().getTime() + (86400000 * this.state.dayOffset)
timelineContents.forEach(timelineItem => {
if (timelineItem.publishAt < currentTime) {
initialCount++;
@ -118,7 +138,7 @@ class App extends Component {
setInterval(() => {
let currentTime = new Date().getTime() + (86400000*this.state.dayOffset)
let currentTime = new Date().getTime() + (86400000 * this.state.dayOffset)
let newCount = 0;
timelineContents.forEach(timelineItem => {
@ -143,9 +163,9 @@ class App extends Component {
showNotification() {
if (this.state.alertActivated && this.state.alertSupported) {
new Notification("Neues Event am Maientag",
new Notification("Neues Video vom Maientag",
{
body: "Endlich, der nächste Schritt am Maientag ist erreicht",
body: "Juhu, der Musikverein hat das nächste Video freigeschalten!",
icon: "https://img.icons8.com/emoji/452/smiling-face-with-hearts.png"
})
}
@ -168,10 +188,31 @@ class App extends Component {
}
createNewest = () => {
const { classes } = this.props;
return (
<Grid container justify="center">
<Grid item>
<p>Hier kommen einleitende Worte hin</p>
<Grid container justify="center" className={classes.greetingsContainer}>
<Grid item xs={12}>
<Typography variant="h3" className={classes.heading}>Herzlich Willkommen zum ersten virtuellen Maientag!</Typography>
</Grid>
<Grid item xs={12}>
<Typography variant="body1">Schön, dass Sie an diesem Tag auf unsere Website gekommen sind. Wir sparen uns hier viel
geschriebenen Text und geben das Wort direkt an unseren 1. Vorsitzenden Holger Macho und unsere Dirigentin Daniela Hofmann:</Typography>
</Grid>
<Grid item xs={12} md={6} className={classes.videoAnsprache}>
<video
width="50%"
controls
poster={process.env.PUBLIC_URL + "/media/image/posterHolger.png"}>
<source src={process.env.PUBLIC_URL + "/media/video/holger.mp4"} />
</video>
</Grid>
<Grid item xs={12} md={6} className={classes.videoAnsprache}>
<video
width="50%"
controls
poster={process.env.PUBLIC_URL + "/media/image/posterHolger.png"}>>
<source src={process.env.PUBLIC_URL + "/media/video/holger.mp4"} />
</video>
</Grid>
</Grid>
)
@ -189,9 +230,7 @@ class App extends Component {
createTimelineItems() {
let timelineItems = []
let currentTime = new Date().getTime() + (86400000*this.state.dayOffset)
console.log(currentTime)
let currentTime = new Date().getTime() + (86400000 * this.state.dayOffset)
timelineContents.forEach(timelineItem => {
if ((timelineItem.publishAt < currentTime) || this.state.debug) {
@ -205,8 +244,21 @@ class App extends Component {
createTimeline = () => {
const { classes } = this.props;
if (this.state.alertVisible) {
setTimeout(
() => {
console.log('Hello after 4 seconds');
this.setState({ alertVisible: false })
},
10 * 1000
);
}
return (
<div className={classes.timelineContent}>
{this.state.alertVisible ?
<Alert severity="info" className={classes.alertBox}>Du möchtest nichts verpassen? Mit der Glocke oben rechts im Eck Erinnerungen aktivieren.</Alert>
: <div></div>}
<Timeline align="alternate">
{this.createTimelineItems()}
</Timeline>
@ -247,21 +299,21 @@ class App extends Component {
{this.state.alertActivated ? <NotificationsIcon color="secondary" /> : <NotificationsOffIcon color="secondary" />}
</IconButton>
</header>
<BottomNavigation
<Tabs
value={this.state.selected}
indicatorColor="primary"
textColor="primary"
onChange={(event, newValue) => {
this.setState({ selected: newValue });
}}
showLabels
centered
>
<BottomNavigationAction label="Startseite" icon={<InfoIcon />} />
<BottomNavigationAction label="Timeline" icon={<FavoriteIcon />} />
<BottomNavigationAction label="Gallery" icon={<InstagramIcon />} />
</BottomNavigation>
<div>
<Tab label="Grußworte" icon={<QueueMusicIcon />} />
<Tab label="Videos" icon={<OndemandVideoIcon />} />
</Tabs>
{this.contentSwitch()}
{this.contentSwitch()}
</div>
</ThemeProvider>
<Grid container justify="space-around">
<Grid item>
@ -297,21 +349,16 @@ export default withStyles(styles)(App)
/*
<AppBar position="static" classes={classes.Appbar}>
<Grid container direction="row" justify="space-between" align-items="center">
<Grid item>
<img src={logo} width={100} alt="logo"></img>
</Grid>
<Grid item>
</Grid>
{this.state.alertSupported ?
<Grid item>
<IconButton onClick={this.switchAlert}>
{this.state.alertActivated ? <NotificationsIcon color="secondary" /> : <NotificationsOffIcon color="secondary" />}
</IconButton>
</Grid>: <div></div>}
</Grid>
</AppBar>
<BottomNavigation
value={this.state.selected}
onChange={(event, newValue) => {
this.setState({ selected: newValue });
}}
showLabels
>
<BottomNavigationAction label="Grußworte" icon={<QueueMusicIcon />} />
<BottomNavigationAction label="Videos" icon={<OndemandVideoIcon />} />
</BottomNavigation>
*/
*/

+ 10
- 2
src/TimelineItem.js View File

@ -55,6 +55,14 @@ export default function CustomTimelineItem(props) {
setOpen(false);
};
const insertLinebreaks = (text) => {
let result = []
text.split("+").forEach(element => {
result = [...result, element, (<wbr />)]
});
return result
}
return (
<TimelineItem>
@ -79,7 +87,7 @@ export default function CustomTimelineItem(props) {
</CardMedia>
<CardContent>
<Typography gutterBottom variant="h5" component="h2">
{props.data.title}
{insertLinebreaks(props.data.title)}
</Typography>
<Typography variant="body2" color="textSecondary" component="p">
{props.data.description}
@ -100,7 +108,7 @@ export default function CustomTimelineItem(props) {
aria-describedby="simple-modal-description"
>
<div style={modalStyle} className={classes.paper}>
<video width="100%%" controls autoPlay={true} >
<video width="100%" controls autoPlay={true} >
<source src={process.env.PUBLIC_URL + props.data.video} />
</video>
</div>

+ 6
- 6
src/timelineItems.json View File

@ -2,7 +2,7 @@
"timelineContents": [
{
"time": "05:00",
"title": "Wecken der Bürgermeisterin",
"title": "5 Uhr - Wecken der Bürger+meister+in",
"description": "Traditionsgemäß starten wir um 5 Uhr mit dem Wecken bei Bürgermeisterin Grötzinger. Viele Musiker haben sich oder ihr Instrument heute besonders mit einem Blumenkränzchen herausgeputzt.",
"titleImage": "/media/image/wecken.jpg",
"video": "/media/video/0500.mp4",
@ -11,7 +11,7 @@
},
{
"time": "05:00 - 9:00",
"title": "Wecken der Gemeinderäte",
"title": "5-9 Uhr - Wecken der Gemeinde+räte",
"description": "Als Anerkennung der guten Zusammenarbeit bekommt jeder Gemeinderat einen individuellen Weckruf. Ein Teil des Weges legen wir hierbei in Marschformation zurück.",
"titleImage": "/media/image/gemeinderat.jpg",
"video": "/media/video/0505.mp4",
@ -20,7 +20,7 @@
},
{
"time": "09:00",
"title": "Bändertanz und Festzug zum Rathaus",
"title": "9 Uhr - Bänder+tanz und Festzug zum Rathaus",
"description": "Um 9 Uhr führen die Grundschulkinder den traditionellen Bändertanz auf. Nach diesem Highlight führen wir den Festzug zum Rathaus an. Gefolgt von der Festgemeinde erreichen wir den Rathausplatz. Zur Abrundung der Rede der Bürgermeisterin spielen wir das altbekannte Lied „Geh aus mein Herz“ in neuer und alter Version, so dass jeder begeistert einstimmen kann.",
"titleImage": "/media/image/rathaus.jpg",
"video": "/media/video/0900.mp4",
@ -29,7 +29,7 @@
},
{
"time": "09:30",
"title": "Umzug zur Kirche",
"title": "9:30 Uhr - Umzug zur Kirche",
"description": "Um die Festbesucher musikalisch auf dem Weg zur Kirche zu begleiten, führt die Stadtkapelle den Umzug an. Vor der Kirche stehen wir Spalier, bis alle die Marienkirche erreicht haben. ",
"titleImage": "/media/image/kirche.jpg",
"video": "/media/video/0930.mp4",
@ -38,7 +38,7 @@
},
{
"time": "14:00",
"title": "Umzug mit der Grundschule",
"title": "14 Uhr - Umzug mit der Grund+schule",
"description": "Nach kurzer Mittagspause startet der zweite Teil des Maientags. Das Thema des Maientages lässt sich anhand der vielfältig gebastelten Kostüme der Grundschulkinder erahnen. Unser Weg führt uns je nach Wetter entweder zur Teckhalle oder zum Maienwasen. Dort angekommen veranstalten die Schulkinder ihr Schauspiel. ",
"titleImage": "/media/image/umzug.jpg",
"video": "/media/video/1400.mp4",
@ -47,7 +47,7 @@
},
{
"time": "15:30",
"title": "Ausklang am Festplatz",
"title": "15:30 Uhr - Ausklang am Fest+platz",
"description": "Die Stadtkapelle lässt den Maientag anschließend mit einem Platzkonzert ausklingen.",
"titleImage": "/media/image/ausklang.jpg",
"video": "/media/video/1530.mp4",

Loading…
Cancel
Save