hzchirs/fee_calculator.html

## fee_calculator.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
  <title>費用計算機</title>
</head>
<body>
  <div id="app">
    <div class="container">
      <h1>費用計算機</h1>
      <form>
        <div class="form-group">
          <label for="fee">總費用</label>
          <input type="number" class="form-control" id="fee" v-model.number="fee" placeholder="0">
        </div>

        <div class="form-group">
          <label for="start-date">開始日期</label>
          <input type="text" class="form-control" id="start-date" v-model="startDate" placeholder="2020-01-01">
        </div>

        <div class="form-group">
          <label for="end-date">結束日期</label>
          <input type="text" class="form-control" id="end-date" v-model="endDate" placeholder="2020-01-01">
        </div>

        <div class="form-group">
          <label for="total-tenants">總人數</label>
          <input type="number" class="form-control" id="total-tenants" v-model.number="totalTenantsCount" placeholder="0">
        </div>

        <div class="form-group">
          <label for="full-tenants">住滿人數</label>
          <input type="number" class="form-control" id="full-tenants" v-model.number="fullTenantsCount" placeholder="0">
        </div>

        <hr v-if="tmpTenantsCount > 0">
        <template v-for="n in tmpTenantsCount">
          <br>
          <div class="form-group">
            <label :for="`tmp-tenant-${n}`">未住滿人數 {{ n }}</label><br>
            <label :for="`tmp-tenant-name-${n}`">名稱</label>
            <input type="text" class="form-control" id="`tmp-tenant-name-${n}`" v-model="tmpTenants[n - 1].name" placeholder="小明">
            <label :for="`tmp-tenant-days-${n}`">天數</label>
            <input type="number" class="form-control" id="`tmp-tenant-days-${n}`" v-model.number="tmpTenants[n - 1].days" placeholder="0">
          </div>
        </template>

        <div v-if="scoreFee" class="card border-success mb-3" style="max-width: 18rem;">
          <div class="card-header">計算結果</div>
          <div class="card-body text-success">
            <h5 class="card-title">住滿的人：</h5>
            <p class="card-text">{{ scoreFee * periodDays }}</p>

            <h5 class="card-title">未住滿的人：</h5>
            <p class="card-text" v-for="tenant in tmpTenants">
              {{ tenant.name }}: {{ scoreFee * tenant.days }}
            </p>
          </div>
        </div>

      </form>
    </div>
  </div>
</body>

<script charset="utf-8">
  new Vue({
    el: '#app',
    data: {
      fee: null,
      startDate: null,
      endDate: null,
      totalTenantsCount: null,
      fullTenantsCount: null,
      tmpTenants: []
    },

    computed: {
      tmpTenantsCount() {
        if (this.totalTenantsCount && this.fullTenantsCount) {
          return this.totalTenantsCount - this.fullTenantsCount
        }

        return 0
      },

      periodDays() {
        const diff = new Date(this.endDate) - new Date(this.startDate)

        return Math.ceil(diff / (1000 * 60 * 60 * 24))
      },

      fullTenantsScore() {
        return this.fullTenantsCount * this.periodDays
      },

      tmpTenantsScore() {
        return this.tmpTenants.reduce((acc, curr) => {
          return acc + curr.days
        }, 0)
      },

      totalScore() {
        return this.fullTenantsScore + this.tmpTenantsScore
      },

      scoreFee() {
        if (this.fee && this.totalScore) {
          return this.fee / this.totalScore
        }

        return null
      }
    },

    watch: {
      tmpTenantsCount(newVal) {
        const arr = []

        for (let i = 1; i <= newVal; i += 1) {
          arr.push({ name: '', days: null })
        }

        this.tmpTenants = arr
      }
    }
  })
</script>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
	<title>費用計算機</title>
	</head>
	<body>
	<div id="app">
	<div class="container">
	<h1>費用計算機</h1>
	<form>
	<div class="form-group">
	<label for="fee">總費用</label>
	<input type="number" class="form-control" id="fee" v-model.number="fee" placeholder="0">
	</div>

	<div class="form-group">
	<label for="start-date">開始日期</label>
	<input type="text" class="form-control" id="start-date" v-model="startDate" placeholder="2020-01-01">
	</div>

	<div class="form-group">
	<label for="end-date">結束日期</label>
	<input type="text" class="form-control" id="end-date" v-model="endDate" placeholder="2020-01-01">
	</div>

	<div class="form-group">
	<label for="total-tenants">總人數</label>
	<input type="number" class="form-control" id="total-tenants" v-model.number="totalTenantsCount" placeholder="0">
	</div>

	<div class="form-group">
	<label for="full-tenants">住滿人數</label>
	<input type="number" class="form-control" id="full-tenants" v-model.number="fullTenantsCount" placeholder="0">
	</div>

	<hr v-if="tmpTenantsCount > 0">
	<template v-for="n in tmpTenantsCount">
	<br>
	<div class="form-group">
	<label :for="`tmp-tenant-${n}`">未住滿人數 {{ n }}</label><br>
	<label :for="`tmp-tenant-name-${n}`">名稱</label>
	<input type="text" class="form-control" id="`tmp-tenant-name-${n}`" v-model="tmpTenants[n - 1].name" placeholder="小明">
	<label :for="`tmp-tenant-days-${n}`">天數</label>
	<input type="number" class="form-control" id="`tmp-tenant-days-${n}`" v-model.number="tmpTenants[n - 1].days" placeholder="0">
	</div>
	</template>

	<div v-if="scoreFee" class="card border-success mb-3" style="max-width: 18rem;">
	<div class="card-header">計算結果</div>
	<div class="card-body text-success">
	<h5 class="card-title">住滿的人：</h5>
	<p class="card-text">{{ scoreFee * periodDays }}</p>

	<h5 class="card-title">未住滿的人：</h5>
	<p class="card-text" v-for="tenant in tmpTenants">
	{{ tenant.name }}: {{ scoreFee * tenant.days }}
	</p>
	</div>
	</div>

	</form>
	</div>
	</div>
	</body>

	<script charset="utf-8">
	new Vue({
	el: '#app',
	data: {
	fee: null,
	startDate: null,
	endDate: null,
	totalTenantsCount: null,
	fullTenantsCount: null,
	tmpTenants: []
	},

	computed: {
	tmpTenantsCount() {
	if (this.totalTenantsCount && this.fullTenantsCount) {
	return this.totalTenantsCount - this.fullTenantsCount
	}

	return 0
	},

	periodDays() {
	const diff = new Date(this.endDate) - new Date(this.startDate)

	return Math.ceil(diff / (1000 * 60 * 60 * 24))
	},

	fullTenantsScore() {
	return this.fullTenantsCount * this.periodDays
	},

	tmpTenantsScore() {
	return this.tmpTenants.reduce((acc, curr) => {
	return acc + curr.days
	}, 0)
	},

	totalScore() {
	return this.fullTenantsScore + this.tmpTenantsScore
	},

	scoreFee() {
	if (this.fee && this.totalScore) {
	return this.fee / this.totalScore
	}

	return null
	}
	},

	watch: {
	tmpTenantsCount(newVal) {
	const arr = []

	for (let i = 1; i <= newVal; i += 1) {
	arr.push({ name: '', days: null })
	}

	this.tmpTenants = arr
	}
	}
	})
	</script>
	</html>