/
Cards.jsx
146 lines (138 loc) · 4.18 KB
/
Cards.jsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
import React, {Component} from "react"
import * as firebase from "firebase"
import colors from "colors"
var config = {
apiKey: "AIzaSyDJ31YrXt8JAPUZHYGNRS8WNjoHaz8ssuE",
authDomain: "home-b7104.firebaseapp.com",
databaseURL: "https://home-b7104.firebaseio.com",
projectId: "home-b7104",
storageBucket: "home-b7104.appspot.com",
messagingSenderId: "42864256502"
}
firebase.initializeApp(config)
class Cards extends Component {
render() {
return (
<div>
<div id="toolbar-spacer"/>
<div id="wrapper-div">
<Lights/>
</div>
</div>
)
}
}
class Card extends Component {
render() {
return(
<div className="card-container">
{this.props.children}
</div>
)
}
}
class Lights extends Component {
constructor(props) {
super(props)
}
render() {
return(
<Card>
<div className="link-wrapper">
{[
{room: 'Office'},
{room: 'Office Bathroom'},
{room: 'Neekon Bedroom'},
{room: 'Ryan Room'},
{room: 'Homework Room'},
{room: 'Living Room'},
{room: 'Gallery'},
{room: 'Guest Bathroom'},
{room: 'Dining Room'},
{room: 'Kitchen'},
{room: 'Master Bedroom'},
{room: 'Family Room'}
].map((item, i) => {
return (
<Room lumer={"s" + item.room.replace(" ", "")} key={i}>
{item.room}
</Room>
)
})}
</div>
<div id="card-title-footer" />
<div className="link-wrapper">
<Room lumer={"all"}>
All Lights
</Room>
</div>
</Card>
)
}
}
class Room extends Component {
constructor(props) {
super(props)
this.state = { isToggleOn: false }
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this)
}
componentDidMount() {
var room = this.props.lumer
var state
firebase.database()
.ref()
.child('/rooms/' + room)
.once('value')
.then( (snapshot) => {
state = snapshot.val()
this.setState({
isToggleOn: state
})
})
var oioi = firebase.database().ref().child('/rooms/' + room)
oioi.on("value", (snapshot) => {
console.log('no one cares' + snapshot.val())
state = snapshot.val()
this.setState({
isToggleOn: state
})
})
console.log(this.props.lumer + ': mounted!' )
}
handleClick() {
var room = this.props.lumer
var database = firebase.database().ref()
if(room == "all") {
database.child('/rooms/all').set(!this.state.isToggleOn)
database.child('/rooms/sDiningRoom').set(!this.state.isToggleOn)
database.child('/rooms/sFamilyRoom').set(!this.state.isToggleOn)
database.child('/rooms/sGallery').set(!this.state.isToggleOn)
database.child('/rooms/sGuestBathroom').set(!this.state.isToggleOn)
database.child('/rooms/sHomeworkRoom').set(!this.state.isToggleOn)
database.child('/rooms/sKitchen').set(!this.state.isToggleOn)
database.child('/rooms/sLivingRoom').set(!this.state.isToggleOn)
database.child('/rooms/sMasterBedroom').set(!this.state.isToggleOn)
database.child('/rooms/sNeekonBedroom').set(!this.state.isToggleOn)
database.child('/rooms/sOffice').set(!this.state.isToggleOn)
database.child('/rooms/sOfficeBathroom').set(!this.state.isToggleOn)
database.child('/rooms/sRyanRoom').set(!this.state.isToggleOn)
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}))
}
this.setState( prevState => ({
isToggleOn: !prevState.isToggleOn
}) )
firebase.database().ref().child('/rooms/' + this.props.lumer).set(!this.state.isToggleOn)
console.log(this.props.lumer + ": " + !this.state.isToggleOn)
}
render() {
return (
<a onClick={this.handleClick} className={this.state.isToggleOn ? "toggle-text-off" : "toggle-text-on"}>
{this.state.isToggleOn ? this.props.children + ': OFF' : this.props.children + ': ON'}
</a>
)
}
}
export default Cards