Pakogi · niclin · Sep 5, 2019 · Sep 5, 2019 · Sep 6, 2019 · Sep 6, 2019
diff --git a/.gitignore b/.gitignore
@@ -19,3 +19,6 @@ yarn-error.log*
 *.njsproj
 *.sln
 *.sw?
+
+/src/config/development.env.js
+/src/config/production.env.js
diff --git a/package.json b/package.json
@@ -11,7 +11,10 @@
   "dependencies": {
     "core-js": "^2.6.5",
     "element-ui": "^2.11.1",
-    "vue": "^2.6.10"
+    "firebase": "^6.5.0",
+    "store": "^2.0.12",
+    "vue": "^2.6.10",
+    "vuex": "^3.1.1"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^3.11.0",

diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
     <title>rent-cost</title>
   </head>

diff --git a/src/components/Comment.vue b/src/components/Comment.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="comments">
+    <el-main>
+      <div v-for="rent in RentData">
+        <p>{{rent.link}}</p>
+        <p>{{rent.price}} 元 / 月，{{rent.space_size}} 坪</p>
+        <p>心得： {{rent.comment}}</p>
+      </div>
+    </el-main>
+  </div>
+</template>
+
+<script>
+export default {
+  data: () => ({
+    rents: {}
+  }),
+  computed: {
+    RentData () {
+      return this.$store.state.Rent.data
+    }
+  }
+}
+</script>
diff --git a/src/components/CostCalculator.vue b/src/components/CostCalculator.vue
@@ -1,11 +1,6 @@
 <template>
   <div class="cost-calculator">
-    <el-header>
-      <h1>租屋虧多少</h1>
-    </el-header>
-
     <el-main>
-      <p>當前網站 {{currentUrl}}</p>
       <p>坪數{{spaceSize}}</p>
 
       <div class="rent-price-wrapper">
@@ -22,11 +17,24 @@
 
       <div>每坪數約 {{ calculateAverageCostBySize }} 元</div>
       <div>總計裸屋成本約：{{ calculateTotalCost }} </div>
+
+      <el-input
+        type="textarea"
+        :autosize="{ minRows: 2, maxRows: 4}"
+        placeholder="請輸入內容"
+        v-model="comment">
+      </el-input>
+
+      <el-row>
+        <el-button type="primary" round v-on:click="rentComment">存檔</el-button>
+      </el-row>
     </el-main>
   </div>
 </template>
 
 <script>
+import { insertRentData } from "../utils/RentModel"
+
 const additionGroupOptions = ["沒有洗衣機", "沒有床墊", "沒有網路", "沒有飲水機", "沒有代收垃圾"]
 
 export default {
@@ -42,7 +50,8 @@ export default {
     },
     currentUrl: null,
     rentPrice: 0,
-    spaceSize: 0
+    spaceSize: 0,
+    comment: ""
   }),
   mounted() {
     this.fetchRentPrice()
@@ -81,7 +90,6 @@ export default {
         let integerPrice = parseInt(priceText.replace(",", ""))
         let integerSpaceSize = spaceSizeText.match(/\d+/)[0]
 
-
         setRentPrice(integerPrice)
         setSpaceSize(integerSpaceSize)
       });
@@ -92,6 +100,13 @@ export default {
 
         setCurrentUrl(tabs[0].url)
       });
+    },
+    rentComment() {
+      const { currentUrl, rentPrice, spaceSize, comment } = this
+
+      insertRentData(currentUrl, rentPrice, spaceSize, comment)
+
+      alert("OK")
     }
   }
 }

diff --git a/src/config/config.env.js b/src/config/config.env.js
@@ -0,0 +1,11 @@
+import DevelopmentConfig from "./development.env";
+import ProductionConfig from "./production.env";
+
+const envConfigs = {
+  development: DevelopmentConfig,
+  production: ProductionConfig
+};
+
+const Config = process.env.NODE_ENV === "production" ? envConfigs.production : envConfigs.development;
+
+export default Config;
diff --git a/src/config/development.env.js.example b/src/config/development.env.js.example
@@ -0,0 +1,11 @@
+const DevelopmentConfig = {
+  apiKey: "xxx",
+  authDomain: "xxxx",
+  databaseURL: "xxx",
+  projectId: "rent-cost-xxxx",
+  storageBucket: "xxx",
+  messagingSenderId: "xxx",
+  appId: "xxx"
+};
+
+export default DevelopmentConfig;
diff --git a/src/config/production.env.js.example b/src/config/production.env.js.example
@@ -0,0 +1,11 @@
+const ProductionConfig = {
+  apiKey: "xxx",
+  authDomain: "xxxx",
+  databaseURL: "xxx",
+  projectId: "rent-cost-xxxx",
+  storageBucket: "xxx",
+  messagingSenderId: "xxx",
+  appId: "xxx"
+};
+
+export default ProductionConfig;
diff --git a/src/popup/App/App.vue b/src/popup/App/App.vue
@@ -1,13 +1,18 @@
 <template>
   <div class="main-app">
     <el-container>
+    <el-main>
       <div v-if="isShowCalculator">
         <cost-calculator></cost-calculator>
+        <comment></comment>
       </div>
 
       <div v-else>
         <announcement></announcement>
       </div>
+
+
+      </el-main>
     </el-container>
   </div>
 </template>
@@ -16,16 +21,19 @@
 
 import CostCalculator from "../../components/CostCalculator"
 import Announcement from "../../components/Announcement"
+import Comment from "../../components/Comment"
 
 const rentHost = "rent.591.com.tw"
 
 export default {
   name: 'App',
-  components: { CostCalculator, Readme },
+  components: { CostCalculator, Announcement, Comment },
   data: () => ({
     isShowCalculator: false
   }),
   created () {
+    this.$store.dispatch('FETCH_RENTS')
+
     const setIsShowCalculator = (boolean) => { this.isShowCalculator = boolean }
 
     chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {

diff --git a/src/popup/index.html b/src/popup/index.html
@@ -15,4 +15,4 @@
     </noscript>
     <div id="app"></div>
   </body>
-</html>
+</html>
diff --git a/src/popup/index.js b/src/popup/index.js
@@ -1,12 +1,16 @@
 import Vue from "vue";
 import App from "./App/App.vue";
+import store from '../store'
 import ElementUI from 'element-ui'
 import 'element-ui/lib/theme-chalk/index.css'
 
+Vue.config.productionTip = false
+
 Vue.use(ElementUI)
 
 new Vue({
   el: "#app",
+  store,
   components: { App },
   render: h => h(App)
 });
diff --git a/src/store/index.js b/src/store/index.js
@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+import modules from './modules'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  modules,
+  // TODO process.env.NODE_ENV
+  strict: process.env.NODE_ENV !== 'production'
+})
diff --git a/src/store/modules/Rent.js b/src/store/modules/Rent.js
@@ -0,0 +1,29 @@
+import { getRents } from "../../utils/RentModel";
+
+const state = {
+  data: {}
+}
+
+const mutations = {
+  SAVE_RENT (state, rent) {
+    state.data = Object.assign({}, state.data, rent)
+  }
+}
+
+const actions = {
+  FETCH_RENTS ({ commit }) {
+    getRents().then(querySnapshot => {
+      let rents = querySnapshot.docs.map((rent) => {
+        return rent.data()
+      })
+
+      commit('SAVE_RENT', rents)
+    })
+  }
+}
+
+export default {
+  state,
+  mutations,
+  actions
+}
diff --git a/src/store/modules/index.js b/src/store/modules/index.js
@@ -0,0 +1,14 @@
+/**
+ * The file enables `@/store/index.js` to import all vuex modules
+ * in a one-shot manner. There should not be any reason to edit this file.
+ */
+
+const files = require.context('.', false, /\.js$/)
+const modules = {}
+
+files.keys().forEach(key => {
+  if (key === './index.js') return
+  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
+})
+
+export default modules
diff --git a/src/utils/RentModel.js b/src/utils/RentModel.js
@@ -0,0 +1,38 @@
+import Config from "../config/config.env";
+import * as firebase from "firebase";
+import "firebase/firestore";
+
+const {
+  apiKey,
+  appId,
+  authDomain,
+  projectId,
+  databaseURL,
+  storageBucket,
+  messagingSenderId,
+} = Config.firebase;
+
+firebase.initializeApp({
+  apiKey: apiKey,
+  authDomain: authDomain,
+  projectId: projectId,
+  databaseURL: databaseURL,
+  storageBucket: storageBucket,
+  messagingSenderId: messagingSenderId,
+  appId: appId
+});
+
+let db = firebase.firestore();
+
+export function insertRentData(link, price, space_size, comment) {
+  db.collection("rents").add({
+    link: link,
+    price: price,
+    space_size: space_size,
+    comment: comment
+  })
+}
+
+export function getRents() {
+  return db.collection("rents").get()
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,4 @@ @@
         </noscript>
         <div id="app"></div>
       </body>
-    </html>
+    </html>