Skip to content

Commit a901e9c

Browse files
author
Alvin Sng
committed
AltManager + WeatherTabs App Example
1 parent bffff73 commit a901e9c

File tree

17 files changed

+652
-0
lines changed

17 files changed

+652
-0
lines changed

‎examples/weathertabs/.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/js/bundle.js

‎examples/weathertabs/README.md‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
## AltManager example: Weather Tabs App
2+
3+
This is an example React/Flux/Alt app that shows the use of AltManager, a
4+
utility class for Alt.js. AltManager allows for multiple alt instances which is
5+
necessary to build apps that encapsulates a mini app inside of a large app. In
6+
this example we have a simple weather searcher. Each search you make will
7+
create a new tab which itself is a new Alt instance and has its own internal
8+
store & actions. Whatever you do in the alt instance is persisted even after
9+
you move to another tab. You can delete tabs which will delete that alt instance
10+
11+
## Install
12+
1) run `npm run clean`
13+
2) open the index.html file
14+
15+
## Docs
16+
See /utils/AltManager.js for details on how to use AltManager.js
17+
See /mixins/AltManagerMixin.js for details on mixin usage.

‎examples/weathertabs/css/app.css‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
body {
2+
font-family: 'Lato', sans-serif, "Arial";
3+
font-size: 16px;
4+
background: #eee;
5+
margin: 0;
6+
}
7+
8+
h1 {
9+
background: #333;
10+
margin: 0;
11+
padding: 20px 20px;
12+
color: #eee;
13+
border-bottom: solid 3px #aaa;
14+
}
15+
16+
.search-box {
17+
width: 600px;
18+
margin: 40px auto 60px auto;
19+
}
20+
21+
.search-location {
22+
padding: 6px;
23+
width: 380px;
24+
margin-right: 10px;
25+
font-size: 20px;
26+
border-radius: 3px;
27+
border: solid 1px #ccc;
28+
}
29+
30+
button {
31+
font-size: 20px;
32+
padding: 6px 14px;
33+
background: #333;
34+
color: #eee;
35+
border: solid 1px #999;
36+
border-radius: 3px;
37+
}
38+
39+
.content {
40+
padding: 0 20px;
41+
}
42+
43+
.pull-right {
44+
float:right;
45+
}
46+
47+
.weather-tab {
48+
padding: 20px;
49+
background: #ccc;
50+
border-radius: 3px;
51+
}
52+
53+
.loading img {
54+
margin: 0 auto;
55+
display: block;
56+
padding: 50px 0;
57+
}
58+
59+
.nav {
60+
list-style: none;
61+
padding: 0;
62+
margin: 0 20px;
63+
}
64+
65+
.nav li {
66+
display: inline;
67+
margin: 0;
68+
font-size: 20px;
69+
padding: 10px 0;
70+
background: #333;
71+
position: relative;
72+
bottom: 10px;
73+
border-top-left-radius: 3px;
74+
border-top-right-radius: 3px;
75+
}
76+
77+
.nav li a {
78+
color: white;
79+
padding: 0 1em;
80+
text-decoration: none;
81+
}
82+
83+
.nav li.selected {
84+
background: #ccc;
85+
padding-top: 18px;
86+
}
87+
88+
.nav li.selected a {
89+
color: #000;
90+
}

‎examples/weathertabs/images/loading.gif‎

2.55 KB
Loading

‎examples/weathertabs/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AltManager - Weather Tabs App</title>
6+
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Lato" />
7+
<link rel="stylesheet" type="text/css" href="css/app.css" />
8+
</head>
9+
<body>
10+
<section id="weather-tabs"></section>
11+
<script src="js/bundle.js"></script>
12+
</body>
13+
</html>

‎examples/weathertabs/js/actions/AppActions.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
var alt = require('../alt')
2+
3+
module.exports = alt.createActions(class AppActions {
4+
constructor() {
5+
this.generateActions(
6+
'setManager',
7+
'addLocation',
8+
'setLocation',
9+
'deleteLocation'
10+
);
11+
}
12+
});

‎examples/weathertabs/js/actions/WeatherActions.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
var $ = require('jquery');
2+
3+
class WeatherActions {
4+
constructor() {
5+
this.generateActions(
6+
'setLoading',
7+
'setWeather',
8+
'showRaw'
9+
);
10+
}
11+
12+
loadWeather(location) {
13+
this.dispatch(location);
14+
$.ajax('http://api.openweathermap.org/data/2.5/weather', {
15+
crossDomain: true,
16+
data: { q: location },
17+
success: (data) => {
18+
// we put in a fake delay here to show the loading icon
19+
setTimeout(() => {
20+
if (data.weather) {
21+
this.actions.setWeather(data);
22+
}
23+
this.actions.setLoading(false);
24+
}, 500);
25+
},
26+
error: () => {
27+
this.actions.setLoading(false);
28+
}
29+
});
30+
}
31+
}
32+
33+
module.exports = WeatherActions;

‎examples/weathertabs/js/alt.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
var Alt = require('../../../');
2+
module.exports = new Alt();

‎examples/weathertabs/js/app.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
var React = require('react');
2+
var App = require('./components/App.jsx');
3+
4+
React.render(
5+
React.createElement(App),
6+
document.getElementById('weather-tabs')
7+
);

‎examples/weathertabs/js/components/App.jsx‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
var React = require('react');
2+
var ReactStateMagicMixin = require('../../../../mixins/ReactStateMagicMixin');
3+
var Alt = require('../../../../');
4+
var AltManager = require('../../../../utils/AltManager');
5+
var AppActions = require('../actions/AppActions');
6+
var AppStore = require('../stores/AppStore');
7+
var WeatherTab = require('./WeatherTab.jsx');
8+
9+
var manager = new AltManager(Alt);
10+
AppActions.setManager(manager);
11+
12+
module.exports = React.createClass({
13+
14+
displayName: 'App',
15+
mixins: [ReactStateMagicMixin],
16+
statics: { registerStore: AppStore },
17+
18+
render: function() {
19+
var locationLinks = [];
20+
var weatherApp = null;
21+
22+
if (this.state.location) {
23+
weatherApp = (
24+
<WeatherTab
25+
alt={manager.getOrCreate(this.state.location)}
26+
location={this.state.location} />
27+
);
28+
}
29+
30+
for (var location in manager.all()) {
31+
locationLinks.push(
32+
<li
33+
key={location}
34+
className={location === this.state.location ? 'selected' : null}>
35+
<a href="javascript:void(0);" onClick={this._onClickLocation.bind(this, location)}>
36+
{location}
37+
</a>
38+
</li>
39+
);
40+
}
41+
42+
return (
43+
<div>
44+
<h1>AltManager - Weather Tabs App</h1>
45+
<div className="content">
46+
<p>
47+
This is an example React/Flux/Alt app that shows the use of AltManager, a
48+
utility class for Alt.js. AltManager allows for multiple alt instances which is
49+
necessary to build apps that encapsulates a mini app inside of a large app. In
50+
this example we have a simple weather searcher. Each search you make will
51+
create a new tab which itself is a new Alt instance and has its own internal
52+
store & actions. Whatever you do in the alt instance is persisted even after
53+
you move to another tab. You can delete tabs which will delete that alt instance
54+
</p>
55+
<form className="search-box" onSubmit={this._onClickSubmit}>
56+
<input
57+
type="text"
58+
className="search-location"
59+
placeholder="Location eg. New York City, NY"/>
60+
<button>Search Weather</button>
61+
</form>
62+
<ul className="nav">{locationLinks}</ul>
63+
{weatherApp}
64+
</div>
65+
</div>
66+
);
67+
},
68+
69+
componentDidMount: function() {
70+
// we load San Francisco, CA on page load as an example
71+
AppActions.addLocation('San Francisco, CA');
72+
},
73+
74+
_onClickSubmit: function(e) {
75+
e.preventDefault();
76+
AppActions.addLocation(e.target.children[0].value.trim());
77+
},
78+
79+
_onClickLocation: function(location) {
80+
AppActions.setLocation(location);
81+
}
82+
});

0 commit comments

Comments
 (0)