elbil.html

<link rel="import" href="https://www.polymer-project.org/0.5/components/polymer/polymer.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icon/core-icon.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-icons/core-icons.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-field/core-field.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-input/core-input.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/core-menu/core-menu.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/font-roboto/roboto.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-input/paper-input-decorator.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-input/paper-input.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-dropdown/paper-dropdown.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-dropdown-menu/paper-dropdown-menu.html" />
<link rel="import" href="https://www.polymer-project.org/0.5/components/paper-shadow/paper-shadow.html" />
<link rel="import" href="scaffold-layout.html" />

<template>
	<style>
		* {
			color: #37474F;
		}
		.title {
			color: #ECEFF1;
		}
		core-field {
			position: relative;
		}
		.card {
			display: inline-block;
			background: white;
			box-sizing: border-box;
			width: 450px;
			min-width: 40%;
			max-width: 95%;
			margin: 16px;
			padding: 16px;
			border-radius: 3px;
		}
		label.after {
			position: absolute;
			color: #888;
			right: 0;
			top: 17px;
		}
		p.info {
			color: #888;
			font-size: 0.8em;
			font-style: italic;
		}
		.card :first-child,
		.card :first-child * {
			margin: 0;
		}
		.card paper-dropdown-menu {
			font-size: 0.8em;
		}
		.card :last-child {
			margin-bottom: 0;
		}
	</style>
	<scaffold-layout selected="elbil">
		<div class="title">Elbil vs bensin- / dieselbil</div>
		<template id="t" is="auto-binding">

			<h2>Allmänt</h2>

			<div layout horizontal center center-justified flex wrap>
				<paper-shadow auto-vertical class="card" z="2">
					<h3>Valuta</h3>

					<core-field>
						<label flex>Valuta</label>
						<paper-input flex value="{{ currency }}"></paper-input>
					</core-field>

					<core-field>
						<label flex>Enhet</label>
						<paper-input flex value="{{ moneyUnit }}"></paper-input>
					</core-field>
				</paper-shadow>
			</div>

			<div horizontal layout>
				<h2 flex>Elbil</h2>
				<paper-dropdown-menu label="Välj bil">
					<paper-dropdown class="dropdown" halign="right">
						<core-menu class="menu" on-core-select="{{ setEvCarValues }}">
							<template repeat="{{ evCar in evCars }}">
								<paper-item>{{ evCar.name }}</paper-item>
							</template>
						</core-menu>
					</paper-dropdown>
				</paper-dropdown-menu>
			</div>

			<div layout horizontal center center-justified flex wrap>

				<paper-shadow auto-vertical class="card" z="2">
					<h3>Räckvidd</h3>

					<core-field>
						<label flex>Räckvidd</label>
						<paper-input flex type="number" value="{{ evDistance }}"></paper-input>
						<label class="after">kilometer</label>
					</core-field>

					<p class="info">
						Kostnaden per mil blir {{ volt * ampere * chargingTime / 100 * kwhPrice / evDistance | toFixed(2) }}{{ moneyUnit }} {{ currency }}.
					</p>
				</paper-shadow>

				<paper-shadow auto-vertical class="card" z="2">

					<h3>Laddningstid</h3>

					<core-field>
						<label flex>Laddningstid</label>
						<paper-input flex type="number" value="{{ chargingTime }}"></paper-input>
						<label class="after">timmar</label>
					</core-field>

					<p class="info">Tid innan batteriet är fulladdat, förbrukning för en full laddning är max {{ volt * ampere * chargingTime / 1000 }} kWh.</p>
				</paper-shadow>

				<paper-shadow auto-vertical class="card" z="2">

					<div horizontal layout center center-justified>
						<h3 flex>Laddningskapacitet</h3>
						<paper-dropdown-menu label="Laddare">
							<paper-dropdown class="dropdown" halign="right">
								<core-menu class="menu" on-core-select="{{ setChargerValues }}">
									<template repeat="{{ charger in chargers }}">
										<paper-item>{{ charger.name }}</paper-item>
									</template>
								</core-menu>
							</paper-dropdown>
						</paper-dropdown-menu>
					</div>

					<core-field>
						<label flex>Spänning</label>
						<paper-input flex value="{{ volt }}"></paper-input>
						<label class="after">volt</label>
					</core-field>

					<core-field>
						<label flex>Strömstyrka</label>
						<paper-input flex type="number" value="{{ ampere }}"></paper-input>
						<label class="after">ampere</label>
					</core-field>

					<p class="info">Max belastning på säkringen är {{ volt * ampere }} watt (W) eller {{ volt * ampere / 1000 }} kilowatt (kW).<br/>Max förbrukning under en timme blir alltså {{ volt * ampere }} Wh eller {{ volt * ampere / 1000 }} kWh.</p>
				</paper-shadow>

				<paper-shadow auto-vertical class="card" z="2">

					<div horizontal layout center center-justified>
						<h3 flex>Elpris</h3>
						<paper-dropdown-menu label="Elpris">
							<paper-dropdown class="dropdown" halign="right">
								<core-menu class="menu" on-core-select="{{ setPowerPrice }}">
									<template repeat="{{ price in powerPrices }}">
										<paper-item>{{ price.name }}</paper-item>
									</template>
								</core-menu>
							</paper-dropdown>
						</paper-dropdown-menu>
					</div>

					<core-field>
						<label flex>Pris per kWh</label>
						<paper-input flex type="number" value="{{ kwhPrice }}"></paper-input>
						<label class="after">{{ moneyUnit }} {{ currency }}</label>
					</core-field>

					<p class="info">
						Kostnad för en full laddning är {{ volt * ampere * chargingTime / 1000 * kwhPrice | toFixed(2) }}{{ moneyUnit }} {{ currency }}.
					</p>
				</paper-shadow>
			</div>

			<div horizontal layout>
				<h2 flex>Bensin- / dieselbil</h2>
				<paper-dropdown-menu label="Välj bil">
					<paper-dropdown class="dropdown" halign="right">
						<core-menu class="menu" on-core-select="{{ setFuelBurn }}">
							<template repeat="{{ car in fuelCars }}">
								<paper-item>{{ car.name }}</paper-item>
							</template>
						</core-menu>
					</paper-dropdown>
				</paper-dropdown-menu>
			</div>

			<div layout horizontal center center-justified flex wrap>

				<paper-shadow auto-vertical class="card" z="2">

					<div horizontal layout center center-justified>
						<h3 flex>Kostnad / förbrukning</h3>
						<paper-dropdown-menu label="Bensinpris">
							<paper-dropdown class="dropdown" halign="right">
								<core-menu class="menu" on-core-select="{{ setFuelPrice }}">
									<template repeat="{{ price in fuelPrices }}">
										<paper-item>{{ price.name }}</paper-item>
									</template>
								</core-menu>
							</paper-dropdown>
						</paper-dropdown-menu>
					</div>

					<core-field>
						<label flex>Bensinkostnad per liter</label>
						<paper-input flex type="number" value="{{ literFuelCharge }}"></paper-input>
						<label class="after">{{ moneyUnit }} {{ currency }}</label>
					</core-field>
					<core-field>
						<label flex>Förbrukning per mil</label>
						<paper-input flex type="number" value="{{ fuelBurn }}"></paper-input>
						<label class="after">liter</label>
					</core-field>

					<p class="info">
						Kostnaden per mil blir {{ literFuelCharge * fuelBurn | toFixed(2) }}{{ moneyUnit }} {{ currency }}.
					</p>
				</paper-shadow>
			</div>

			<h2>Resultat</h2>

			<div layout horizontal center center-justified flex wrap>
				<paper-shadow auto-vertical class="card" z="2">

					<h3>El kostar {{ (volt * ampere * chargingTime * kwhPrice / evDistance) / (literFuelCharge * fuelBurn) | toFixed(2) }}% av vad bensin/diesel kostar!<br/>För samma pris som du kan åka {{ 100 / ((volt * ampere * chargingTime * kwhPrice / evDistance) / (literFuelCharge * fuelBurn)) | toFixed(2) }} gånger längre på el!</h3>
				</paper-shadow>
			</div>
		</template>
	</scaffold-layout>
<script>
/*global document, Polymer */
(function () {

	"use strict";

	Polymer.mixin(document.getElementById('t'), {
		chargers: [{
			name: 'Hemma',
			values: {
				volt: 230,
				ampere: 10
			}
		}, {
			name: 'Snabb',
			values: {
				volt: 500,
				ampere: 125
			}
		}],
		evCars: [{
			name: 'Mitsubishi Outlander PHEV 2014',
			values: {
				batteryKwh: 12,
				evDistance: 50
			}
		}],
		fuelCars: [{
			name: 'Mitsubishi Outlander 2014',
			fuelBurn: 0.69
		}],
		fuelPrices: [{
			name: 'Blyfri 95, Stockholm, Mars 2015',
			price: 13.34
		}],
		powerPrices: [{
			name: '2015 Mars (billigt)',
			price: 0.8
		}, {
			name: '2010 Feburari (dyrt)',
			price: 1.0228 + 0.28
		}],
		setChargerValues: function (event, detail, sender) {
			if (detail.isSelected) {
				var charger = detail.item.templateInstance.model.charger,
					oldWatt = this.ampere * this.volt,
					newWatt = charger.values.ampere * charger.values.volt,
					factorChange = newWatt / oldWatt;
				this.ampere = charger.values.ampere;
				this.volt = charger.values.volt;
				this.chargingTime = this.chargingTime / factorChange;
			}
		},
		setEvCarValues: function (event, detail, sender) {
			if (detail.isSelected) {
				var car = detail.item.templateInstance.model.evCar;
				this.evDistance = car.values.evDistance;
				this.chargingTime = (car.values.batteryKwh / (this.volt * this.ampere / 1000)).toFixed(2);
			}
		},
		setFuelBurn: function (event, detail, sender) {
			if (detail.isSelected) {
				var car = detail.item.templateInstance.model.car;
				this.fuelBurn = car.fuelBurn;
			}
		},
		setFuelPrice: function (event, detail, sender) {
			if (detail.isSelected) {
				var price = detail.item.templateInstance.model.price;
				this.literFuelCharge = price.price;
			}
		},
		setPowerPrice: function (event, detail, sender) {
			if (detail.isSelected) {
				var price = detail.item.templateInstance.model.price;
				this.kwhPrice = price.price;
			}
		},
		toFixed: function (val, fixval) {
			return val.toFixed(fixval);
		},
		currency: 'SEK',
		moneyUnit: 'kr',
		ampere: 10,
		volt: 230,
		kwhPrice: 0.80,
		chargingTime: 5,
		evDistance: 50,
		literFuelCharge: 13.5,
		fuelBurn: 0.7
	});
}());
</script>
</template>