起因

大家都自己計算造表格，不如寫一個小計算機讓大家可以在上面試算與分享？

就這樣，應該馬上就做好了！

先來看一下勞基法好了！

BTW, 這只是其中的一條

等等等等，先跳過太複雜的變形工時
我們還是從簡單的問題開始好了

請問一位月薪 36,000 元的勞工

平日加班一小時的薪水應該是多少？

大約 300 元？

每個月工作天約二十天，每天正常工作時數是八小時
最低加班費的算法是乘以 1 ⅓

36000 / 20 / 8 * (4 / 3) = 300

錯

`36000 / 30 / 8 * (4 / 3) = 200`

勞動 2 字第 0960130677 號函：原約定月薪給付總額相當於 240 小時者（即「平日每小時工資額」係以月薪總額除以 30 再除以 8 核計者）

所以你假日也是有支薪的

很合理吧？

請問一位月薪 36,000 元的勞工

週六加班第一小時的最低法定薪資應該是多少？

假設該勞工平常日都工作八小時

新台幣 50 元整 💢

因為你假日有給薪喔～
所以週六來加班的話根據勞基法 24 條額外加給三分之一以上

注意這邊是最低法定薪資，但是雇主其實是可以給你更高

因為太扯了

所以我有打電話去台北市勞動局確認過
目前勞動檢查確實是這樣認定

好吧雖然很扯，但搞清楚規則之後
還是可以照計畫作出來

g0v 勞基法修法計算機

React.js vs Angular.js vs Vue.js

Vue.js comparision

其實

不管用框架或是純寫 JavaScript 都可以完成，我自己使用框架主要是要讓開發速度加快。熟悉了開發工具不論用哪套其實都可以達到目的

背景

這是我第一個 Vue.js 專案
以前寫過 Angular.js 跟 React.js 但是經驗都不算多
原本覺得這是週末小專案，想要很快速寫完
我想用 side project 熟悉一些新工具

花個幾分鐘看了一下 vue.js 的文件⋯

這是現代版本的 Angular.js 吧？

馬上看到的優點

跟 Angular 十分類似，寫過 Angular 的人入手很快
官方 cli 工具跟 webpack 無縫整合
撰寫 component 十分簡易，可包裝在一個 .vue 檔案
- Angular.js directive vs Vue.js Component

沒考慮多久就決定用 Vue.js 了

（順便玩玩新工具）

Template

$ npm install vue-cli
$ vue init webpack PROJECT_NAME

main.js

 import Vue from 'vue';
import App from './App';
 
new Vue({
  el: 'body',
  components: { App },
});

index.html

 <!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>workweek</title>
  </head>
  <body>
    <app></app>
    <!-- built files will be auto injected -->
  </body>
</html>

ES6 by babel.js!

ES6 module!
Object Literal Shorthand

 import Vue from 'vue';
import App from './App';
 
new Vue({
  el: 'body',
  components: { App },
});

 // ES5
new Vue({
  el: 'body',
  components: { App: App },
});

ES6

Arrow function
- items.filter(item => item.is(Text));
Classes
Destructuring assignment
- var [a, b] = [1, 2];
More

.Vue file

<template>
<script>

App.vue

Hello.vue

雖然 Vue.js 提供了很好拆分小元件的寫法

身為一個新手而這又是個小週末專案
就把所有東西都到一個叫做 Workweek 的 vue component 吧 :D

來看看專案裡面用到的 vue.js 功能

Script 內的常用屬性

components
props
data()
computed()
methods

 export default {
  components: {
    Component1,
    Component2
  },
  props: ['prop1', 'prop2'],
  methods: {
    method1 (reason) {
      // ...
    },
    method2 () {
      // ...
    }
  },
 
  data () {
    // {{data1}}
    return {
      data1: 'DATA1',
      data2: 'DATA2',
      data3: 'DATA3',
    };
  },
  computed: {
    // {{computed1}}
    computed1() {
      // ...
    },
    computed2() {
      // ...
    }
  }
};

data()

   data () {
    // ...
 
    return {
      reason: reason,
      daynames: solutions.DAY_NAMES,
      workhours: workhours,
      assumingWorkHours: 240,
      monthlyPay: monthlyPay,
      expandDetail: false,
      regularHoursPerDay: solutions.REGULAR_HOURS_PER_DAY
    };
  },

computed()

 export default {
  data() { /* ... */ },
  computed: {
    hourlyPay: function () {
      return parseFloat(this.monthlyPay / this.assumingWorkHours);
    },
    regularPay: function () {
      return this.hourlyPay * 8 * 7;
    }
  }
};

methods

 export default {
  methods: {
    toggleExpanding: function (evt) {
      this.expandDetail = !this.expandDetail;
    }
  }
};

Template 內常用語法

Two way binding

Template 內常用語法

v-model
v-for
v-show / v-if
v-bind:model (簡寫 :model)
v-on:click (簡寫 @click)
{{ variable }}
{{{ html }}}

很順利地寫完週末小專案了

但是技術債很快就來討債了：
是誰說要所有東西寫在一個元件裡面的？

很悲劇的 Workweek.vue

Refactoring

offday-condition diagram

offday-condition component

 <offday-condition
  v-bind:reason="reason"
  v-on:reason-changed="reasonChanged">
</offday-condition>

簡寫

 <offday-condition
  :reason="reason"
  @reason-changed="reasonChanged">
</offday-condition>

OffdayCondition.vue script

 export default {
  props: ['reason'],
  watch: {
    reason (val) {
      this.$dispatch('reason-changed', val);
    }
  }
};

Workweek.vue script

 reasonChanged (reason) {
  this.reason = reason;
}

Workweek.vue

 export default {
  computed: {
    currentSolution () {
      return solutions.current(this.workhours, this.hourlyPay, this.reason);
    },
    oneRestOneOffSolution () {
      return solutions.oneRestOneOff(this.workhours, this.hourlyPay, this.reason);
    },
    twoOffSolution () {
      return solutions.twoOff(this.workhours, this.hourlyPay, this.reason);
    }
  }
}

current-solution component

         <current-solution
          :solution="currentSolution"
          :regular-pay="regularPay"
          :overtime-pay-winner="mostOvertimePay.current"
          :expand="expandDetail">
        </current-solution>

結論

現行勞基法很奇怪，確實要修。
但是目前修法方向很奇怪
vue.js 是個好東西啊⋯⋯
- 語法簡單，很像 Angular
- 容易包裝元件
- 官方的 cli 工具直接整合了 webpack, babel.js
- 從我的經驗來看，開發小型專案很好用
還有時間的話可以講一下 static website deploy
- 電梯向下 👇

如果你的專案是純前端專案

deploy 到 github pages 是個不錯的選擇

package.json

 {
  "name": "workweek",
  "scripts": {
    "dev": "node build/dev-server.js",
    "build": "node build/build.js",
    "test": "echo \"No tests\"",
    "lint": "eslint --ext .js,.vue src",
    "deploy": "node build/deploy.js"
  }
}

.travis.yml

 language: node_js
node_js:
  - '4'
env:
  global:
  - GH_REF=github.com/g0v/workweek.git
  # GH_TOKEN
  - secure: "..."
 
cache: node_modules
 
script:
  - npm run build
 
after_success: npm run deploy

deploy.js

 require('shelljs/global');
 
rm('-rf', 'out');
exec('git clone "https://' + env.GH_TOKEN +
     '@' + env.GH_REF + '" --depth 1 -b gh-pages out');
pushd('out');
exec('git config user.name "Automatic Commit"');
exec('git config user.email "workweek@g0v.tw"');
exec('git rm -rf .');
cp('-r', '../dist/', '.');
exec('git add .');
exec('git commit -m "Automatic commit: ' + Date() + '"');
exec('git push "https://' + env.GH_TOKEN +
     '@' + env.GH_REF + '" gh-pages', {silent: true});
popd();
exit(0);

	import Vue from 'vue';
	import App from './App';

	new Vue({
	el: 'body',
	components: { App },
	});

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>workweek</title>
	</head>
	<body>
	<app></app>
	<!-- built files will be auto injected -->
	</body>
	</html>

	export default {
	components: {
	Component1,
	Component2
	},
	props: ['prop1', 'prop2'],
	methods: {
	method1 (reason) {
	// ...
	},
	method2 () {
	// ...
	}
	},

	data () {
	// {{data1}}
	return {
	data1: 'DATA1',
	data2: 'DATA2',
	data3: 'DATA3',
	};
	},
	computed: {
	// {{computed1}}
	computed1() {
	// ...
	},
	computed2() {
	// ...
	}
	}
	};

	export default {
	data() { /* ... */ },
	computed: {
	hourlyPay: function () {
	return parseFloat(this.monthlyPay / this.assumingWorkHours);
	},
	regularPay: function () {
	return this.hourlyPay * 8 * 7;
	}
	}
	};

	export default {
	methods: {
	toggleExpanding: function (evt) {
	this.expandDetail = !this.expandDetail;
	}
	}
	};

	<offday-condition
	v-bind:reason="reason"
	v-on:reason-changed="reasonChanged">
	</offday-condition>

	<offday-condition
	:reason="reason"
	@reason-changed="reasonChanged">
	</offday-condition>

	export default {
	props: ['reason'],
	watch: {
	reason (val) {
	this.$dispatch('reason-changed', val);
	}
	}
	};

	export default {
	computed: {
	currentSolution () {
	return solutions.current(this.workhours, this.hourlyPay, this.reason);
	},
	oneRestOneOffSolution () {
	return solutions.oneRestOneOff(this.workhours, this.hourlyPay, this.reason);
	},
	twoOffSolution () {
	return solutions.twoOff(this.workhours, this.hourlyPay, this.reason);
	}
	}
	}

	<current-solution
	:solution="currentSolution"
	:regular-pay="regularPay"
	:overtime-pay-winner="mostOvertimePay.current"
	:expand="expandDetail">
	</current-solution>

	{
	"name": "workweek",
	"scripts": {
	"dev": "node build/dev-server.js",
	"build": "node build/build.js",
	"test": "echo \"No tests\"",
	"lint": "eslint --ext .js,.vue src",
	"deploy": "node build/deploy.js"
	}
	}

	language: node_js
	node_js:
	- '4'
	env:
	global:
	- GH_REF=github.com/g0v/workweek.git
	# GH_TOKEN
	- secure: "..."

	cache: node_modules

	script:
	- npm run build

	after_success: npm run deploy

	require('shelljs/global');

	rm('-rf', 'out');
	exec('git clone "https://' + env.GH_TOKEN +
	'@' + env.GH_REF + '" --depth 1 -b gh-pages out');
	pushd('out');
	exec('git config user.name "Automatic Commit"');
	exec('git config user.email "workweek@g0v.tw"');
	exec('git rm -rf .');
	cp('-r', '../dist/', '.');
	exec('git add .');
	exec('git commit -m "Automatic commit: ' + Date() + '"');
	exec('git push "https://' + env.GH_TOKEN +
	'@' + env.GH_REF + '" gh-pages', {silent: true});
	popd();
	exit(0);

勞基法計算機

vue.js 初體驗