Skip to content

Instantly share code, notes, and snippets.

@argelius

argelius/index.html

Last active August 29, 2015 14:11
Show Gist options
  • Save argelius/6a36eeaee84019662aa4 to your computer and use it in GitHub Desktop.
Save argelius/6a36eeaee84019662aa4 to your computer and use it in GitHub Desktop.
Download ZIP
Onsen weather sample index.html
Raw
index.html
<html ng-app="app">
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/onsen-css-components.css" />
<link rel="stylesheet" type="text/css" href="css/onsenui.css" />
<title>Onsen Weather</title>
<style>
.ion-weather {
background-repeat: no-repeat;
height: 30px;
background-size: 40px 40px;
}
.popover__content {
padding: 0 10px 0 10px;
}
</style>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/onsenui.js"></script>
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers.js"></script>
<script type="text/javascript" src="js/services.js"></script>
</head>
<body ng-controller="WeatherController">
<ons-page>
<ons-toolbar>
<div class="center">Onsen Weather</div>
<div class="right">
<ons-toolbar-button ng-click="menu.show($event)">
<ons-icon icon="plus"></ons-icon>
</ons-toolbar-button>
</div>
</ons-toolbar>
<ons-carousel var="app.carousel" swipeable overscrollable auto-scroll fullscreen>
<ons-carousel-item ng-repeat="place in [localWeather].concat(places)">
<div ng-show="!!place">
<span style="text-align: center;">
<h2>{{ place.name }}, {{ place.sys.country }}</h2>
<h2>{{ place.main.temp | kelvinToCelsius | number:1 }}&deg;C</h2>
</span>
<ons-list>
<ons-list-item>
<ons-icon icon="ion-weather" size="30px" fixed-width="true"
style="background-image: url('http://openweathermap.org/img/w/{{ place.weather[0].icon }}.png');">
</ons-icon>
{{ place.weather[0].description }}
</ons-list-item>
<ons-list-item>
<ons-icon icon="ion-thermometer" size="30px" fixed-width="true"></ons-icon>
{{ place.main.temp_max | kelvinToCelsius | number:1 }}&deg;C /
{{ place.main.temp_min | kelvinToCelsius | number:1 }}&deg;C
</ons-list-item>
<ons-list-item>
<ons-icon icon="ion-waterdrop" size="30px" fixed-width="true"></ons-icon>
Humidity is {{ place.main.humidity }}%
</ons-list-item>
<ons-list-item>
Wind speed is {{ place.wind.speed }} m/s
</ons-list-item>
<ons-list-item ng-if="$index == 0">
This is your current position.
</ons-list-item>
</ons-list>
</div>
<div ng-show="!place">
<span style="text-align: center;">
<h2>Loading...</h2>
</span>
</div>
</ons-carousel-item>
</ons-carousel>
</ons-page>
<ons-template id="menu.html">
<ons-popover ng-controller="MenuController" direction="down" cancelable>
<h4>Add another city</h4>
<p>
<input type="search" ng-model="query" class="search-input">
<span ng-show="result">
{{ result.name }}, {{ result.sys.country }}
</span>
</p>
<p style="text-align: center;">
<ons-button var="app.searchButton" ng-click="search()">Add</ons-button>
</p>
<h4 ng-show="places.length > 0">Cities</h4>
<p ng-repeat="place in places">
<span
ng-click="app.carousel.setActiveCarouselItemIndex($index + 1)"
style="float: left;">{{ place.name }}, {{ place.sys.country }}</span>
<span ng-click="removePlace($index)" style="float: right;">&#215;</span>
</p>
</ons-list>
</ons-popover>
</ons-template>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment