swimtracker-app/components/LiveTrainingView.js

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Container, Text, Header, Content, Left, Body, Right, Button, Icon, Title, Card, CardItem, Fab} from 'native-base';
import { LinearGradient } from 'expo-linear-gradient';
import IconCard from './IconCard';
import Graph from './Graph';
import DeviceHttpDataSource from './DeviceHttpDataSource';
import { PeakDetectorSimple } from '../data_processing/PeakDetection';



export default class LiveTrainingView extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isReady: false,
            themeNumber: 0,
            numPeaks: 0,
            numLaps: 0,
            measurements: []
        };

        this.config = {
            deviceUrl: "http://smartswim",
            peakThreshold: 30,
            peaksPerLap: 30,
            updateInterval: 3000,
        };

        this.peakDetector = new PeakDetectorSimple(this.config.peakThreshold, peaks => {
            //console.log("peaks:", peaks.length);
            this.setState({
                numPeaks: peaks.length,
                numLaps: (peaks.length / this.config.peaksPerLap).toFixed(1)
            });
        });
    };

    handleStart = () => {
        fetch(this.config.deviceUrl + "/api/session/start").catch(err => console.log(err));
    }

    handleStop = () => {
        fetch(this.config.deviceUrl + "/api/session/stop").catch(err => console.log(err));
    }

    handleThemeChange = () => {
        this.setState((state, props) => { return { themeNumber: ((state.themeNumber + 1) % themeArray.length) } })
    }

    handleNewData = (fullData, newDataStart) => {
        const newData = fullData.slice(newDataStart);
        //console.log("New data", newData.length, "Full data", fullData.length, "new data start", newDataStart);
        //console.log("new data", newData);
        this.peakDetector.addVector(newData);
        this.setState({ measurements: fullData });
    }

    render() {
        return (
            <Content padder contentContainerStyle={{ justifyContent: 'space-around', flex: 1 }}>
                <IconCard label="BAHNEN" value="9" iconName="retweet" iconType="AntDesign" fontSize={110} />
                <IconCard label="ZÜGE" value="800" iconName="dashboard" iconType="AntDesign" />
                <IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
                {/*
                        <IconCard label="ZÜGE" value={this.state.numPeaks} iconName="dashboard" iconType="AntDesign" />
                        <IconCard label="BAHNEN" value={this.state.numLaps} iconName="retweet" iconType="AntDesign" />

                        <IconCard label="KRAFT" value="120" iconName="ruler" iconType="Entypo" />
                */}

            </Content>

        );
    }

}


const backgroundColors = {
    'hot': ['#830e5f', '#fd5139'],
    'darkBlue': ['#4265a3', '#cfada7'],
    'lightBlue': ['#50a4db', '#74bbe2'],
    'foggy': ['#bc8db8', '#5d5e90'],
};

const themeArray = [
    'hot', 'darkBlue', 'lightBlue', 'foggy'
];

const styles = StyleSheet.create({
    card: {
        flexDirection: 'row',
        backgroundColor: 'rgba(0, 0, 0, 0.2)',
        margin: 5,
        padding: 5,
        borderRadius: 3,
        justifyContent: 'space-between',
        /*
        shadowColor: "#000",
        shadowOffset: {
            width: 0,
            height: 1,
        },
        shadowOpacity: 0.18,
        shadowRadius: 1.00,
 
        elevation: 1,*/
    }
});