Skip to content

Instantly share code, notes, and snippets.

@weoreference
Created December 5, 2016 18:46
Show Gist options
  • Save weoreference/85a4e20e51d98f8a889df90af0a80a42 to your computer and use it in GitHub Desktop.
Save weoreference/85a4e20e51d98f8a889df90af0a80a42 to your computer and use it in GitHub Desktop.
Embriovit Calculadora
<template>
<require from="currency"></require>
<style>
.shaded-grey {
background-color: #f4f4f4;
}
</style>
<div class="row">
<h1 class="col-sm-6 offset-sm-1">
Embriovit
<small class="text-muted"> CALCULADORA</small>
</h1>
</div>
<br>
<div class="row">
<div class="form-group col-sm-4 offset-sm-1">
<label for="costEmbriovit">Precio de Embriovit (con envio)</label>
<input
type="text"
class="form-control"
placeholder="Peso colombiano"
value.bind="costEmbriovit">
<small id="emailHelp" class="form-text text-muted">Peso colombiano</small>
</div>
<div class="form-group col-sm-3">
<label for="costEmbriovit">Cambio del Dollar</label>
<input
type="text"
class="form-control"
placeholder="Peso colombiano"
value.bind="exchangeCP">
<small id="emailHelp" class="form-text text-muted">Peso colombiano</small>
</div>
<div class="form-group col-sm-2">
<label for="costEmbriovit">Transferencia</label>
<input
type="text"
class="form-control"
placeholder="Dolar"
value.bind="costTransfer">
<small id="emailHelp" class="form-text text-muted">Dolar americano</small>
</div>
</div>
<br>
<div class="row shaded-grey">
<h3 class="col-sm-6 offset-sm-3 text-sm-center text-muted">
<small>el total es</small> <strong>${totalUSD | currency:true}</strong> <small>dolares</small>
</h3>
</div>
<br><br>
<div class="row">
<div class="col-sm-4 text-sm-center">
<h1>Jorge <small class="text-muted">aporta</small></h1>
<h2 class="display-3">${payJorge | currency:true}</h2>
</div>
<div class="col-sm-4 text-sm-center">
<h1>Claudia <small class="text-muted">aporta</small></h1>
<h2 class="display-3">${payClaudia | currency:true}</h2>
</div>
<div class="col-sm-4 text-sm-center">
<h1>Ayda <small class="text-muted">aporta</small></h1>
<h2 class="display-3">${payAyda | currency:true}</h2>
</div>
</div>
</template>
import {observable} from 'aurelia-framework'
export class App {
constructor() {
this.costEmbriovit
this.exchangeCP
this.costTransfer
}
get payJorge() {
return 400
}
get payJorgeFormat() {
return '$' + this.payJorge
}
get payClaudia() {
if(Boolean(this.totalUSD))
return this._calculatePayAgainstJorge()
else
return 0
}
get payClaudiaFormat() {
if(Boolean(this.payClaudia))
return '$' + this.payClaudia
else
return '_______'
}
get payAyda() {
if(Boolean(this.totalUSD)) {
console.log("AYDA")
return this._calculatePayAgainstJorge()
}
else
return 0
}
get payAydaFormat() {
if(Boolean(this.payAyda))
return '$' + this.payAyda
else
return '_______'
}
get totalUSD() {
if(Boolean(this.costEmbriovit) && Boolean(this.exchangeCP) && Boolean(this.costTransfer)) {
return (Number(this.costEmbriovit.replace(/,/g, '')) / Number(this.exchangeCP.replace(/,/g, ''))) + Number(this.costTransfer.replace(/,/g, ''))
}
else
return 0
}
_calculatePayAgainstJorge() {
return Number((this.totalUSD - this.payJorge)) / 2
}
}
export class CurrencyValueConverter{
toView(value, replacer) {
if (Boolean(value))
return value.toLocaleString('en-US', {style: 'currency', currency: 'USD'})
else
if (Boolean(replacer))
return '_________'
else
return ''
}
}
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
</head>
<!doctype html>
<html>
<head>
<title>Aurelia</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container" aurelia-app>
<script src="https://jdanyow.github.io/rjs-bundle/node_modules/requirejs/require.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/config.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/aurelia.js"></script>
<script src="https://jdanyow.github.io/rjs-bundle/bundles/babel.js"></script>
<script>
require(['aurelia-bootstrapper']);
</script>
</div>
</body>
</html>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment