eletrotupi / tcc/ commit / b9a7fe0

frontend: add dummy sleep records index & new

Pedro Lucas Porcellis porcellis@eletrotupi.com · 5 months ago b9a7fe04d47cf7db972638189dc2708c245cc7e1 Browse files
Parents 16e98ad
Changed files
2
Additions
+169
Deletions
0
frontend/app/sleep/index.tsx added+30
/dev/null → frontend/app/sleep/index.tsx
1 + 
import {
2 + 
  View,
3 + 
  Text,
4 + 
  StyleSheet,
5 + 
  ScrollView
6 + 
} from 'react-native';
7 +
8 + 
import { Card } from '@/components/ui/Cards';
9 + 
import { Spacing, Typography, Colors } from '@/constants/theme';
10 +
11 + 
export default function SleepHub() {
12 +
13 + 
  return (
14 + 
    <View>
15 + 
      <ScrollView
16 + 
        scrollEventThrottle={16}>
17 + 
        <View style={styles.container}>
18 + 
        </View>
19 + 
      </ScrollView>
20 + 
    </View>
21 + 
  );
22 + 
}
23 +
24 + 
const styles = StyleSheet.create({
25 + 
  container: {
26 + 
    gap: 24,
27 + 
    paddingHorizontal: Spacing.containerPadding,
28 + 
    paddingVertical: Spacing.sectionGap,
29 + 
  }
30 + 
})
frontend/app/sleep/new.tsx added+139
/dev/null → frontend/app/sleep/new.tsx
1 + 
import {
2 + 
  View,
3 + 
  Text,
4 + 
  StyleSheet,
5 + 
  ScrollView
6 + 
} from 'react-native';
7 + 
import { useEffect, useState } from 'react';
8 +
9 + 
import { Card } from '@/components/ui/Cards';
10 + 
import { Input, TextArea } from '@/components/ui/Input';
11 + 
import { Button } from '@/components/ui/Button';
12 + 
import { Spacing, Typography, Colors, BorderRadius } from '@/constants/theme';
13 + 
import { Ionicons } from '@expo/vector-icons';
14 + 
import DatePickerField from '@/components/ui/DatePickerField';
15 + 
import { ScaleSlider } from '@/components/ui/ScaleSlider';
16 +
17 + 
export default function NewSleepRecord() {
18 + 
  const [day, setDay] = useState(new Date())
19 + 
  const [annotation, setAnnotation] = useState();
20 + 
  const [duration, setDuration] = useState(7.5);
21 +
22 + 
  const formatValue = (value: number): string => {
23 + 
    return String(value).replaceAll('.', ',');
24 + 
  };
25 +
26 + 
  const save = async () => {
27 + 
    const data = {
28 + 
      day,
29 + 
      annotation,
30 + 
      duration
31 + 
    };
32 +
33 + 
    console.log("Sleep record:", data)
34 + 
    //await createSleepRecord.mutateAsync(data)
35 + 
    //router.replace("/")
36 + 
  };
37 +
38 + 
  return (
39 + 
    <View>
40 + 
      <ScrollView scrollEventThrottle={16}>
41 + 
        <View style={styles.container}>
42 + 
          <View style={styles.header}>
43 + 
            <View style={styles.innerHeaderWrapper}>
44 + 
              <View style={[styles.headerIcon, { backgroundColor: '#EFF6FF' }]}>
45 + 
                <Ionicons name="moon-outline" size={20} color="#2563EB" />
46 + 
              </View>
47 +
48 + 
              <View style={styles.headerTitleSubtitle}>
49 + 
                <Text style={styles.headerTitle}>Bom descanso</Text>
50 + 
                <Text style={styles.headerSubtitle}>Registre sua noite de sono</Text>
51 + 
              </View>
52 + 
            </View>
53 +
54 + 
            <Text style={styles.description}>
55 + 
              Acompanhar seu sono ajuda a entender como seu corpo se recupera
56 + 
              e melhora sua performance diária.
57 + 
            </Text>
58 + 
          </View>
59 +
60 + 
          <Card style={styles.mainCard}>
61 + 
            <DatePickerField
62 + 
              label="Data do Registro"
63 + 
              initialDate={day}
64 + 
              maximumDate={new Date()}
65 + 
              onChange={setDay}
66 + 
            />
67 +
68 + 
            <View style={{ marginVertical: 15 }}>
69 + 
              <ScaleSlider
70 + 
                label="Duração"
71 + 
                value={duration}
72 + 
                onValueChange={setDuration}
73 + 
                onValueFormat={formatValue}
74 + 
                step={0.5}
75 + 
                min={0.0}
76 + 
                max={15.0}
77 + 
                minLabel="0h"
78 + 
                maxLabel="15h" />
79 + 
            </View>
80 +
81 + 
            <TextArea
82 + 
              label="Notas sobre a qualidade"
83 + 
              type="text"
84 + 
              variant="darkGhost"
85 + 
              onChangeText={(val) => setAnnotation(val)}
86 + 
              value={annotation}
87 + 
              minRows={5}
88 + 
              maxRows={10}
89 + 
              placeholder="Como você se sentiu ao acordar? Teve sonhos marcantes?"
90 + 
              style={styles.notes}
91 + 
            />
92 + 
          </Card>
93 +
94 + 
          <Button title="Salvar Registro" onPress={save} />
95 + 
        </View>
96 + 
      </ScrollView>
97 + 
    </View>
98 + 
  );
99 + 
}
100 +
101 + 
const styles = StyleSheet.create({
102 + 
  container: {
103 + 
    gap: 24,
104 + 
    paddingHorizontal: Spacing.containerPadding,
105 + 
    paddingVertical: Spacing.sectionGap,
106 + 
  },
107 + 
  mainCard: {
108 + 
    padding: Spacing.cardGap
109 + 
  },
110 + 
  // Header
111 + 
  header: {
112 + 
  },
113 + 
  headerIcon: {
114 + 
    paddingVertical: 15,
115 + 
    paddingHorizontal: 14,
116 + 
    width: 48,
117 + 
    borderRadius: BorderRadius.md,
118 + 
  },
119 + 
  innerHeaderWrapper: {
120 + 
    flex: 1,
121 + 
    flexDirection: 'row',
122 + 
    alignItems: 'center'
123 + 
  },
124 + 
  headerTitleSubtitle: {
125 + 
    marginLeft: 10
126 + 
  },
127 + 
  headerTitle: {
128 + 
    ...Typography.headlineMd
129 + 
  },
130 + 
  headerSubtitle: {
131 + 
    ...Typography.bodyMd,
132 + 
    color: Colors.light.textSecondary
133 + 
  },
134 + 
  description: {
135 + 
    ...Typography.bodyMd,
136 + 
    color: Colors.light.textSecondary,
137 + 
    marginTop: 20
138 + 
  }
139 + 
})