<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/DeyloWoo/pen/apYVoO?depth=everything&order=popularity&page=23&q=ionic&show_forks=false" />
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>Vue.js</title>
<link rel='stylesheet prefetch' href='https://code.ionicframework.com/1.3.1/css/ionic.min.css'>
<style class="cp-pen-styles">body {
background-color: white;
padding: 0;
margin: 0;
text-align: center;
}
.bradley{
font-family:"Bradley Hand ITC", "Comic Sans MS", Arial, Helvetica, sans-serif
}
</style></head><body>
<div id="app" style="overflow: auto;" v-cloak>
<div class="bar bar-header" style="background-color: red;">
<h1 class="title">
<a style="text-decoration: none; color: white;" href="#">
{{title}}
</a>
</h1>
</div>
<div style="margin: auto; margin-top: 45px; max-width: 600px; border: 0 solid black; background-color: white; color: black">
<div v-if="isLocVisible" class="row responsive-sm" style="text-align: center; padding: 0; margin: auto;">
<div class="col responsive-sm">
<select class="button button-small button-dark" style="width:100%; color: white; background-color: red; max-width: 300px;" v-model="locationSelected">
<option v-for="loc in locations" v-bind:value="loc" style="color: white; background-color: red;" value="" v-cloak>{{loc.Name}}</option>
</select>
</div>
</div>
<div v-if="locationSelected.Name && locationSelected.Name !== 'Locations'" class="row responsive-sm" style="text-align: center; margin: auto;">
<div class="col">
<span v-if="locationSelected.Name !== 'St John\’s Health Center'" style="font-weight: 400; font-size: 10pt;" v-cloak>
{{locationSelected.Percent}}% rate capped at min {{'$' + locationSelected.MinMonthly.toFixed(2)}}
<span v-if="locationSelected.MaxMonthly > 0">
and max {{'$' + locationSelected.MaxMonthly.toFixed(2)}} monthly dues.
</span>
<span v-if="locationSelected.MaxMonthly <= 0">
and no max monthly dues.
</span>
</span>
<span v-if="locationSelected.Name == 'St John\’s Health Center'" style="font-weight: 400; font-size: 10pt;" v-cloak>
{{locationSelected.Percent}}multiplier capped at min {{'$' + locationSelected.MinMonthly.toFixed(2)}}
and max {{'$' + locationSelected.MaxMonthly.toFixed(2)}} hourly dues.
</span>
</div>
</div>
<div v-if="locationSelected.Name && locationSelected.Name !== 'Locations'" class="row responsive-sm" style="text-align: center; margin: auto; min-height: 65px;">
<div class="col">
<span v-if="locationSelected.Name !== 'St John\’s Health Center'" style="font-weight: bold; font-size: 12pt;">Enter your annual wages</span>
<span v-if="locationSelected.Name === 'St John\’s Health Center'" style="font-weight: bold; font-size: 12pt;">Enter your hourly wages</span>
<label class="item-input-wrapper" style="background-color: white; max-width: 250px; border: 1px solid #cbcbcb; margin: auto;">
<i class="icon ion-social-usd placeholder-icon"></i>
<input type="text" v-model="grossAnnualWages" @keyup="liveCalculate($event)" style="width: 100%;">
</label>
</div>
</div>
<div v-if="locationSelected.Name && locationSelected.Name !== 'Locations' && monthlyDues > 0" v-cloak class="row responsive-sm" style="text-align: center; padding: 0; margin: auto;">
<div class="col responsive-sm">
<div id="StJhn_M" v-if="locationSelected.Name === 'St John\’s Service \& Tech'" style="text-align:center;">
<div id="monthlycheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Monthlycheck.jpg" /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>St John's Service & Tech</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:25px;" v-cloak>{{monthlyDues}}</span>
</div>
<div id="StJhn_HC" v-if="locationSelected.Name === 'St John\’s Health Center'" style="text-align:center;">
<div id="monthlycheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Monthlycheck.jpg" /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>CNA/NNU Union</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:40px;" v-cloak>{{monthlyDues}}</span>
</div>
<div id="SEIU_M" v-if="locationSelected.Name === 'SEIU 1199NW \(Kadlec\)'" style="text-align:center;">
<div id="monthlycheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Monthlycheck.jpg" /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>SEIU 1199NW (Kadlec)</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:40px;" v-cloak>{{monthlyDues}}</span>
</div>
<div id="Swedish_M" v-if="locationSelected.Name === 'UAPD \(Swedish\)'" style="text-align:center;">
<div id="monthlycheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Monthlycheck.jpg" /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>UAPD</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:95px;" v-cloak>{{monthlyDues}}</span>
</div>
<div id="Prov_M" v-if="locationSelected.Name === 'Providence \(WA\)'" style="text-align:center;">
<div id="monthlycheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Monthlycheck.jpg" /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>Providence (WA)</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:60px;" v-cloak>{{monthlyDues}}</span>
</div>
<div id="Prov_M" v-if="locationSelected.Name === 'Providence Portland Medical Center'" style="text-align:center;">
<div id="monthlycheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Monthlycheck.jpg" /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>SEIU Local 49</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:60px;" v-cloak>{{monthlyDues}}</span>
</div>
</div>
</div>
<div v-if="locationSelected.Name && locationSelected.Name !== 'Locations' && monthlyDues > 0" class="row responsive-sm" style="text-align: center; padding: 0; margin: auto;">
<div class="col responsive-sm">
<span style="font-weight: bold; font-size: 14pt;">Or</span>
</div>
</div>
<div v-if="locationSelected.Name && locationSelected.Name !== 'Locations' && monthlyDues > 0" class="row responsive-sm" style="text-align: center; padding: 0; margin: auto;">
<div class="col responsive-sm">
<div id="StJhn_A" v-if="locationSelected.Name === 'St John\’s Service \& Tech'" style="text-align:center;">
<div id="annualcheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Annualcheck.jpg " /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>St John's Service & Tech</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:35px;" v-cloak>{{ annualDues.toFixed(2)}}</span>
</div>
<div id="StJhn_HC" v-if="locationSelected.Name === 'St John\’s Health Center'" style="text-align:center;">
<div id="annualcheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Annualcheck.jpg " /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>CNA/NNU Union</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:35px;" v-cloak>{{ annualDues.toFixed(2)}}</span>
</div>
<div id="SEIU_A" v-if="locationSelected.Name === 'SEIU 1199NW \(Kadlec\)'" style="text-align:center;">
<div id="annualcheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Annualcheck.jpg " /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>SEIU 1199NW (Kadlec)</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:40px;" v-cloak>{{ annualDues.toFixed(2)}}</span>
</div>
<div id="Swedish_A" v-if="locationSelected.Name === 'UAPD \(Swedish\)'" style="text-align:center;">
<div id="annualcheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Annualcheck.jpg " /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>UAPD</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:95px;" v-cloak>{{ annualDues.toFixed(2)}}</span>
</div>
<div id="Prov_A" v-if="locationSelected.Name === 'Providence \(WA\)'" style="text-align:center;">
<div id="annualcheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Annualcheck.jpg " /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>Providence (WA)</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:60px;" v-cloak>{{ annualDues.toFixed(2)}}</span>
</div>
<div v-if="locationSelected.Name === 'Providence Portland Medical Center'">
<div id="Prov_A" style="text-align:center;">
<div id="annualcheckimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/Annualcheck.jpg " /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>SEIU Local 49</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:60px;" v-cloak>{{ annualDues.toFixed(2)}}</span>
</div>
<div id="Prov_A2" style="text-align:center;">
<span>PLUS $75 Initiation Fee for Caregivers making less than $15/hour. For caregivers making more than $15/hour, the initiation fee is $100.</span>
</div>
</div>
</div>
</div>
<div v-if="locationSelected.Name && locationSelected.Name !== 'Locations' && monthlyDues > 0" class="row responsive-sm" style="text-align: center; padding: 0; margin: auto;">
<div class="col responsive-sm">
<div id="UAPD_3" v-if="locationSelected.Name === 'UAPD \(Swedish\)'" style="text-align:center;">
<div id="checkimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/3Yrcheck.jpg" /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>UAPD</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:95px;" v-cloak>{{ (annualDues * 3).toFixed(2)}}</span>
</div>
<div id="UAPD_10" v-if="locationSelected.Name === 'UAPD \(Swedish\)'" style="text-align:center;">
<div id="checkimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/10Yrcheck.jpg" /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>UAPD</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:95px;" v-cloak>{{ (annualDues * 10).toFixed(2)}}</span>
</div>
<div id="UAPD_20" v-if="locationSelected.Name === 'UAPD \(Swedish\)'" style="text-align:center;">
<div id="checkimage"><img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/20Yrcheck.jpg" /></div>
<span class="bradley" style="font-weight: bold; font-size: 10pt; position:relative; top:-90px;" v-cloak>UAPD</span>
<span style="font-weight: bold; font-size: 10pt; position:relative; top:-87px; left:95px;" v-cloak>{{ (annualDues * 20).toFixed(2)}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="row responsive-sm" style="text-align: center; margin: auto;">
<div class="col">
<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/313323/myHIway_logo.jpg">
</div>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://unpkg.com/vue/dist/vue.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js'></script><script src='https://unpkg.com/vue-router/dist/vue-router.js'></script>
<script >var app = new Vue({
el: "#app",
data: {
message: "Hello Vue!",
title: "Union Dues Calculator",
locations: [
{
Id: "842AC6E5-A740-4A53-835D-C62F3CA51179",
Name: "Locations",
Wages: "gross annual wages",
Percent: 0,
MinMonthly: 0,
MaxMonthly: 0
},
{
Id: "1257209A-8651-4BA5-ADB0-82BB95AB6053",
Name: "Providence Portland Medical Center",
Wages: "gross annual wages",
Percent: 1.7,
MinMonthly: 50.14 ,
MaxMonthly: 0
},
{
Id: "F8A0070D-4F36-40C6-A3DC-6769E91580F6",
Name: "St John’s Service & Tech",
Wages: "gross annual wages",
Percent: 2.00,
MinMonthly: 32.50,
MaxMonthly: 134.00
},
{
Id: "151BF700-041E-4E20-B32D-1F6A7813525E",
Name: "St John’s Health Center",
Wages: "hourly wages",
Percent: 1.015,
MinMonthly: 0,
MaxMonthly: 66.02
},
{
Id: "F9F8811B-BD41-40AA-8878-B717E09D4FE3",
Name: "SEIU 1199NW (Kadlec)",
Wages: "gross annual wages",
Percent: 1.80,
MinMonthly: 0.00,
MaxMonthly: 90.00
},
{
Id: "01BD2120-50DA-4544-8CED-11E80932EEC2",
Name: "UAPD (Swedish)",
Wages: "gross annual wages",
Percent: 0.95,
MinMonthly: 72.00,
MaxMonthly: 3385.00
},
{
Id: "DA8FA2FB-75EE-4555-8191-35C41FE79879",
Name: "Providence (WA)",
Wages: "gross annual wages",
Percent: 1.55,
MinMonthly: 16.00,
MaxMonthly: 75.00
}
],
isLocVisible: true,
locationSelected: {},
grossAnnualWages: null,
hourlyWages: null, //For St John's Health Center Calculation only
payPeriodDues: null, //For St John's Health Center Calculation only
monthlyDues: 0,
annualDues: 0
},
methods: {
liveCalculate: function(event) {
console.log("data.locationSelected", this.locationSelected.Name);
//calculate only for: St John’s Health Center"
if(this.locationSelected.Name === "St John\’s Health Center"){
this.hourlyWages = this.grossAnnualWages;
if(this.hourlyWages > 66.02)
this.hourlyWages = 66.02;
this.monthlyDues = (2 * (this.hourlyWages * this.locationSelected.Percent)).toFixed(2);
this.annualDues = (26 * (this.hourlyWages * this.locationSelected.Percent));
return;
}
//calculate for all
//check fo negative number
if (this.grossAnnualWages < 0) this.grossAnnualWages = this.grossAnnualWages * -1;
this.monthlyDues = 0;
this.monthlyDues = this.grossAnnualWages / 12 * (this.locationSelected.Percent / 100);
//check limits
if (this.locationSelected.MaxMonthly > 0 && this.monthlyDues > this.locationSelected.MaxMonthly)
this.monthlyDues = this.locationSelected.MaxMonthly;
if (this.monthlyDues < this.locationSelected.MinMonthly)
this.monthlyDues = this.locationSelected.MinMonthly;
this.monthlyDues = this.monthlyDues.toFixed(2); //two decimals
if (this.grossAnnualWages <= 0) this.monthlyDues = 0;
this.annualDues = this.grossAnnualWages * (this.locationSelected.Percent / 100);
if (this.grossAnnualWages <= 0) this.annualDues = 0;
//check limits
if (this.locationSelected.MaxMonthly > 0 && this.annualDues > this.locationSelected.MaxMonthly * 12)
this.annualDues = this.locationSelected.MaxMonthly * 12;
if (this.annualDues < this.locationSelected.MinMonthly * 12)
this.annualDues = this.locationSelected.MinMonthly * 12;
//this.annualDues = this.annualDues.toFixed(2); //two decimals
}
},
created: function() {
var locId = "";
//load based on URL param
if (window.location.search.indexOf("locId") > 0) {
locId = window.location.search.split("=")[1];
} else {
this.locationSelected = this.locations[0];
return;
}
//Check first
if (locId === undefined || locId === "") return;
for (var x = 0; x < this.locations.length; x++) {if (window.CP.shouldStopExecution(1)){break;}
if (this.locations[x].Id === locId) {
this.isLocVisible = false;
this.locationSelected = this.locations[x];
break;
}
}
window.CP.exitedLoop(1);
}
});
// Google Analytics
(function(i, s, o, g, r, a, m) {
i["GoogleAnalyticsObject"] = r;
(i[r] =
i[r] ||
function() {
(i[r].q = i[r].q || []).push(arguments);
}), (i[r].l = 1 * new Date());
(a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m);
})(
window,
document,
"script",
"https://www.google-analytics.com/analytics.js",
"ga"
);
ga("create", "UA-91940741-1", "auto");
ga("send", "pageview");
//# sourceURL=pen.js
</script>
</body></html>
