main page front end

FrontendFolder/switch-room/.browserslistrc

+> 1%
+last 2 versions
+not dead
+not ie 11

FrontendFolder/switch-room/.eslintrc.js

+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "plugin:prettier/recommended",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};

FrontendFolder/switch-room/babel.config.js

-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}

FrontendFolder/switch-room/package.json

@@ -8,36 +8,27 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
-    "core-js": "^3.8.3",
-    "vue": "^3.2.13"
+    "@fortawesome/fontawesome-svg-core": "^6.2.0",
+    "@fortawesome/free-brands-svg-icons": "^6.2.0",
+    "@fortawesome/free-regular-svg-icons": "^6.2.0",
+    "@fortawesome/free-solid-svg-icons": "^6.2.0",
+    "@fortawesome/vue-fontawesome": "^3.0.1",
+    "vue": "^3.2.13",
+    "vue-router": "^4.0.3"
   },
   "devDependencies": {
-    "@babel/core": "^7.12.16",
-    "@babel/eslint-parser": "^7.12.16",
-    "@vue/cli-plugin-babel": "~5.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
     "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-router": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
     "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
     "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3"
-  },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/vue3-essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "@babel/eslint-parser"
-    },
-    "rules": {}
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead",
-    "not ie 11"
-  ]
+    "eslint-config-prettier": "^8.3.0",
+    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "prettier": "^2.4.1",
+    "typescript": "~4.5.5"
+  }
 }

FrontendFolder/switch-room/src/App.vue

+<script setup lang="ts"></script>
 <template>
-  <img alt="Vue logo" src="./assets/logo.png">
-  <HelloWorld msg="Welcome to Your Vue.js App"/>
+  <router-view></router-view>
 </template>
 
-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
-<style>
-#app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
-}
-</style>
+<style></style>

FrontendFolder/switch-room/src/components/AppFooter.vue

+<template>
+  <footer class="footer-distributed">
+    <div class="footer-right">
+      <a href="#"><font-awesome-icon icon="fa-brands fa-facebook" /></a>
+      <a href="#"><font-awesome-icon icon="fa-brands fa-twitter" /></a>
+      <a href="#"><font-awesome-icon icon="fa-brands fa-linkedin" /></a>
+      <a href="#"><font-awesome-icon icon="fa-brands fa-github" /></a>
+    </div>
+
+    <div class="footer-left">
+      <p class="footer-links">
+        <a class="link-1" href="#">Home</a>
+
+        <a href="#">About</a>
+
+        <a href="#">Contact</a>
+      </p>
+
+      <p>TEAM ACE &copy; 2022</p>
+    </div>
+  </footer>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped>
+* {
+  font-family: Roboto;
+}
+
+.footer-distributed {
+  background-color: #292c2f;
+  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12);
+  box-sizing: border-box;
+  width: 100%;
+  text-align: left;
+  font: normal 16px sans-serif;
+  padding: 45px 50px;
+}
+
+.footer-distributed .footer-left p {
+  color: #8f9296;
+  font-size: 14px;
+  margin: 0;
+}
+/* Footer links */
+
+.footer-distributed p.footer-links {
+  font-size: 18px;
+  font-weight: bold;
+  color: #ffffff;
+  margin: 0 0 10px;
+  padding: 0;
+  transition: ease 0.25s;
+}
+
+.footer-distributed p.footer-links a {
+  display: inline-block;
+  line-height: 1.8;
+  text-decoration: none;
+  color: inherit;
+  transition: ease 0.25s;
+}
+
+.footer-distributed .footer-links a:before {
+  content: "·";
+  font-size: 20px;
+  left: 0;
+  color: #fff;
+  display: inline-block;
+  padding-right: 5px;
+}
+
+.footer-distributed .footer-links .link-1:before {
+  content: none;
+}
+
+.footer-distributed .footer-right {
+  float: right;
+  margin-top: 6px;
+  max-width: 180px;
+}
+
+.footer-distributed .footer-right a {
+  display: inline-block;
+  width: 35px;
+  height: 35px;
+  background-color: #33383b;
+  border-radius: 2px;
+  font-size: 20px;
+  color: #ffffff;
+  text-align: center;
+  line-height: 35px;
+  margin-left: 3px;
+  transition: all 0.25s;
+}
+
+.footer-distributed .footer-right a:hover {
+  transform: scale(1.1);
+  -webkit-transform: scale(1.1);
+}
+
+.footer-distributed p.footer-links a:hover {
+  text-decoration: underline;
+}
+
+/* Media Queries */
+
+@media (max-width: 600px) {
+  .footer-distributed .footer-left,
+  .footer-distributed .footer-right {
+    text-align: center;
+  }
+  .footer-distributed .footer-right {
+    float: none;
+    margin: 0 auto 20px;
+  }
+  .footer-distributed .footer-left p.footer-links {
+    line-height: 1.8;
+  }
+}
+</style>

FrontendFolder/switch-room/src/components/AppHeader.vue

+<template>
+  <header>
+    <div class="overlay">
+      <h1>Switch Room</h1>
+      <h3>Reasons for Choosing US</h3>
+      <p>
+        Wanna to pay for hotel for traveling? Switch Room provide the local
+        rooms for you. No need to pay rental. You can switch your living home
+        with other people who want to travel to your place.
+      </p>
+      <br />
+      <button>READ MORE</button>
+    </div>
+  </header>
+</template>
+
+<script lang="ts"></script>
+
+<style scoped>
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+body {
+  height: 900px;
+}
+header {
+  background: url("@/assets/mainPage/headerPhoto.jpeg");
+  text-align: center;
+  width: 100%;
+  height: auto;
+  background-size: cover;
+  background-attachment: fixed;
+  position: relative;
+  overflow: hidden;
+  border-radius: 0 0 85% 85% / 30%;
+}
+header .overlay {
+  width: 100%;
+  height: 100%;
+  padding: 50px;
+  color: #fff;
+  text-shadow: 1px 1px 1px #333;
+  background-image: linear-gradient(135deg, #b3d1ff 10%, #fd5e086b 100%);
+}
+
+h1 {
+  font-family: "Dancing Script", cursive;
+  font-size: 80px;
+  margin-bottom: 30px;
+}
+
+h3,
+p {
+  font-family: "Open Sans", sans-serif;
+  margin-bottom: 30px;
+}
+
+button {
+  border: none;
+  outline: none;
+  padding: 10px 20px;
+  border-radius: 50px;
+  color: #333;
+  background: #fff;
+  margin-bottom: 50px;
+  box-shadow: 0 3px 20px 0 #0000003b;
+}
+button:hover {
+  cursor: pointer;
+}
+</style>

FrontendFolder/switch-room/src/components/HelloWorld.vue

@@ -2,86 +2,107 @@
   <div class="hello">
     <h1>{{ msg }}</h1>
     <p>
-      For a guide and recipes on how to configure / customize this project,<br>
+      For a guide and recipes on how to configure / customize this project,<br />
       check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener"
+        >vue-cli documentation</a
+      >.
     </p>
     <h3>Installed CLI Plugins</h3>
     <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-router"
+          target="_blank"
+          rel="noopener"
+          >router</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint"
+          target="_blank"
+          rel="noopener"
+          >eslint</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript"
+          target="_blank"
+          rel="noopener"
+          >typescript</a
+        >
+      </li>
     </ul>
     <h3>Essential Links</h3>
     <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
+      <li>
+        <a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a>
+      </li>
+      <li>
+        <a href="https://forum.vuejs.org" target="_blank" rel="noopener"
+          >Forum</a
+        >
+      </li>
+      <li>
+        <a href="https://chat.vuejs.org" target="_blank" rel="noopener"
+          >Community Chat</a
+        >
+      </li>
+      <li>
+        <a href="https://twitter.com/vuejs" target="_blank" rel="noopener"
+          >Twitter</a
+        >
+      </li>
+      <li>
+        <a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a>
+      </li>
     </ul>
     <h3>Ecosystem</h3>
     <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
+      <li>
+        <a href="https://router.vuejs.org" target="_blank" rel="noopener"
+          >vue-router</a
+        >
+      </li>
+      <li>
+        <a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a>
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/vue-devtools#vue-devtools"
+          target="_blank"
+          rel="noopener"
+          >vue-devtools</a
+        >
+      </li>
+      <li>
+        <a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener"
+          >vue-loader</a
+        >
+      </li>
+      <li>
+        <a
+          href="https://github.com/vuejs/awesome-vue"
+          target="_blank"
+          rel="noopener"
+          >awesome-vue</a
+        >
+      </li>
     </ul>
-
-    <div>
-      <button v-on:click="getExample()"> Get Example</button>
-      <button v-on:click="getExampleWithID(exampleInputs)"> Get Example With ID</button>
-      <button v-on:click="getExampleUser()"> Get Example User</button>
-      <button v-on:click="saveExampleUser(exampleInputs)"> Save Example User</button>
-      <br>
-      <input v-model="exampleInputs">
-      <p>{{fullJsonData}}</p>
-    </div>
-
   </div>
 </template>
 
-<script>
-import ExampleService from "@/services/ExampleService";
-export default {
-  name: 'HelloWorld',
-  data () {
-    return{
-      exampleInputs:"",
-      fullJsonData:"",
-    }
-  },
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "HelloWorld",
   props: {
-    msg: String
+    msg: String,
   },
-  methods: {
-    getExample(){
-      ExampleService.getExapleFromServer()
-        .then((response)=>{
-          this.fullJsonData = response;
-        })
-    },
-    getExampleWithID(inputId){
-      ExampleService.getExampleWithIDFromServer(inputId)
-      .then((response)=>{
-          this.fullJsonData = response;
-        })
-    },
-    getExampleUser(){
-      ExampleService.getExampleUserFromServer()
-      .then((response)=>{
-        this.fullJsonData = response;
-      })
-    },
-    saveExampleUser(userData){
-      ExampleService.postExampleUserDataToServer(userData)
-      .then((response)=>{
-        this.fullJsonData = response;
-      })
-    }
-
-  }
-}
+});
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
@@ -101,5 +122,3 @@ a {
   color: #42b983;
 }
 </style>
-
-

FrontendFolder/switch-room/src/main.js

-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')

FrontendFolder/switch-room/src/main.ts

+import { createApp } from "vue";
+import App from "./App.vue";
+import router from "./router";
+/* import the fontawesome core */
+import { library } from "@fortawesome/fontawesome-svg-core";
+
+/* import font awesome icon component */
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+/* import specific icons */
+import { faUserSecret } from "@fortawesome/free-solid-svg-icons";
+
+import { fas } from "@fortawesome/free-solid-svg-icons";
+
+import { faFacebook } from "@fortawesome/free-brands-svg-icons";
+
+import { faTwitter } from "@fortawesome/free-brands-svg-icons";
+
+import { faLinkedin } from "@fortawesome/free-brands-svg-icons";
+
+import { faGithub } from "@fortawesome/free-brands-svg-icons";
+
+/* add icons to the library */
+library.add(faUserSecret);
+library.add(fas);
+library.add(faFacebook);
+library.add(faTwitter);
+library.add(faLinkedin);
+library.add(faGithub);
+
+createApp(App)
+  .component("font-awesome-icon", FontAwesomeIcon)
+  .use(router)
+  .mount("#app");

FrontendFolder/switch-room/src/router/index.ts

+import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
+import HomeView from "../views/HomeView.vue";
+
+const routes: Array<RouteRecordRaw> = [
+  {
+    path: "/",
+    name: "home",
+    component: HomeView,
+  },
+  {
+    path: "/about",
+    name: "about",
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () =>
+      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+  },
+];
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes,
+});
+
+export default router;

FrontendFolder/switch-room/src/services/Constants.js

-/**
- * This is a class that contains all constant values, it help to make change on address or ports or other things.
- */
-
-const SEVER_IP= location.hostname;
-const SERVER_PORT= 8081;
-const Server_URL= location.protocol +"//"+ SEVER_IP + ":" + SERVER_PORT + "/";
-
-export default{
-    SEVER_IP,
-    SERVER_PORT,
-    Server_URL,
-}
-
-
-/*
-Change logs:
-Date        |       Author          |   Description
-2022-10-12  |    Fangzheng Zhang    |    create class and init
-
- */
\ No newline at end of file

FrontendFolder/switch-room/src/services/ExampleService.js

-/**
- * This is an example service class to show you that how to use http service in ServerHttpService class.
- * If you have some data pre-processing job, you can do it here. 
- */
-
-import ServerHttpService from "./ServerHttpService";
-
-const baseUrl = "example";
-
-export default{
-
-    getExapleFromServer(){
-        return ServerHttpService.Get(baseUrl);
-    },
-
-    getExampleWithIDFromServer(inputId){
-        let urlPath = "/"+inputId;
-        return ServerHttpService.Get(baseUrl + urlPath);
-    },
-
-    getExampleUserFromServer(){
-        let urlPath = "/getUser";
-        return ServerHttpService.Get(baseUrl + urlPath);
-    },
-
-    postExampleUserDataToServer(userData){
-        let urlPath = "/newUser";
-        return ServerHttpService.Post(baseUrl + urlPath, JSON.parse(userData));
-    }
-
-
-};
-
-/*
-Change logs:
-Date        |       Author          |   Description
-2022-10-12  |    Fangzheng Zhang    |    create class and init
-
- */
\ No newline at end of file

FrontendFolder/switch-room/src/services/ServerHttpService.js

-/**
- * This class will handle the http request that send to server. 
- * It will help debuging and handle cookie if needed.
- */
-
-import Constants from "@/services/Constants";
-
-export default{
-
-    Get(path){
-        let url = Constants.Server_URL + path;
-        console.log("GET from: " + url);
-
-        return fetch(url,{
-            method: "GET"
-        })
-            .then((response) =>{
-                if(response.ok){
-                  return response.json();  
-                }
-                throw new Error("Unable to receive GET request from server with url:" + url);
-            })
-            .catch((reason) =>{
-                console.log("Error on GET request", reason);
-            }); 
-    },
-
-    Post(path, bodyData){
-        let url = Constants.Server_URL + path;
-        console.log("POST from: " + url);
-        return fetch(url,{
-            method: "POST",
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(bodyData)
-        })
-        .then((response)=>{
-            if(response.ok){
-                return response.json();
-            }
-            throw new Error("Unable to receive POST request from server with url:" + url);
-        })
-        .catch((reason) =>{
-            console.log("Error on POST request", reason);
-        }); 
-    }, 
-
-    Put(path, bodyData){
-        let url = Constants.Server_URL + path;
-        console.log("PUT from: " + url);
-        return fetch(url,{
-            method: "PUT",
-            headers: {
-                'Content-Type': 'application/json'
-            },
-            body: JSON.stringify(bodyData)
-        })
-        .then((response)=>{
-            if(response.ok){
-                return response.json();
-            }
-            throw new Error("Unable to receive PUT request from server with url:" + url);
-        })
-        .catch((reason) =>{
-            console.log("Error on PUT request", reason);
-        }); 
-    }, 
-
-    Delete(path){
-        let url = Constants.Server_URL + path;
-        console.log("Delete from: " + url);
-        return fetch(url,{
-            method: "Delete",
-        })
-        .then((response)=>{
-            if(response.ok){
-                return response.json();
-            }
-            throw new Error("Unable to receive DELETE request from server with url:" + url);
-        })
-        .catch((reason) =>{
-            console.log("Error on DELETE request", reason);
-        }); 
-    }, 
-}
-
-/*
-Change logs:
-Date        |       Author          |   Description
-2022-10-12  |    Fangzheng Zhang    |    create class and init
-
- */
\ No newline at end of file

FrontendFolder/switch-room/src/shims-vue.d.ts

+/* eslint-disable */
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

FrontendFolder/switch-room/src/views/AboutView.vue

+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

FrontendFolder/switch-room/src/views/HomeView.vue

+<template>
+  <app-header></app-header>
+  <app-footer></app-footer>
+</template>
+
+<script setup lang="ts">
+import AppHeader from "@/components/AppHeader.vue";
+import AppFooter from "@/components/AppFooter.vue";
+</script>

FrontendFolder/switch-room/jsconfig.json → FrontendFolder/switch-room/tsconfig.json

@@ -2,8 +2,20 @@
   "compilerOptions": {
     "target": "es5",
     "module": "esnext",
-    "baseUrl": "./",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
     "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "useDefineForClassFields": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "types": [
+      "webpack-env"
+    ],
     "paths": {
       "@/*": [
         "src/*"
@@ -15,5 +27,15 @@
       "dom.iterable",
       "scripthost"
     ]
-  }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "src/**/*.vue",
+    "tests/**/*.ts",
+    "tests/**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
 }