2 년 전 · 6f13bb9362
--- a/frontend/.browserslistrc
+++ b/frontend/.browserslistrc
@@ -0,0 +1,3 @@
 > 1%
 last 2 versions
 not dead
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -0,0 +1,14 @@
 module.exports = {
  root: true,
  env: {
    node: true,
  },
  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
  parserOptions: {
    parser: "babel-eslint",
  },
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
  },
 };
--- a/frontend/.gitignore
+++ b/frontend/.gitignore
@@ -0,0 +1,23 @@
 .DS_Store
 node_modules
 /dist


 # local env files
 .env.local
 .env.*.local

 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*

 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw?
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -0,0 +1,24 @@
 # frontend

 ## Project setup
 ```
 npm install
 ```

 ### Compiles and hot-reloads for development
 ```
 npm run serve
 ```

 ### Compiles and minifies for production
 ```
 npm run build
 ```

 ### Lints and fixes files
 ```
 npm run lint
 ```

 ### Customize configuration
 See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/frontend/babel.config.js
+++ b/frontend/babel.config.js
@@ -0,0 +1,3 @@
 module.exports = {
  presets: ["@vue/cli-plugin-babel/preset"],
 };
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -0,0 +1,34 @@
 {
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@braid/vue-formulate": "^2.5.2",
    "axios": "^0.24.0",
    "core-js": "^3.6.5",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^6.2.2",
    "prettier": "^2.2.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "vue-template-compiler": "^2.6.11"
  }
 }
--- a/frontend/public/favicon.ico
+++ b/frontend/public/favicon.ico
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -0,0 +1,17 @@
 <!DOCTYPE html>
 <html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -0,0 +1,30 @@
 <template>
  <div id="app">
    <router-view />
  </div>
 </template>

 <style lang="scss">
 body {
  background-color: #fff;
 }
 #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
 }

 #nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
 }
 </style>
--- a/frontend/src/assets/font/PICOBLA_.TTF
+++ b/frontend/src/assets/font/PICOBLA_.TTF
--- a/frontend/src/components/Bloginput.vue
+++ b/frontend/src/components/Bloginput.vue
@@ -0,0 +1,96 @@
 <template>
  <section class="blog-input">
    <div class="input-elements">
      <FormulateForm name="add-post" @submit="addPost">
        <div class="form-author">
          <label for="auth">User:</label>
          <FormulateInput
            v-model="formValues.author"
            type="text"
            id="auth"
            name="author"
          />
        </div>
        <div class="form-content">
          <label for="content">Sh**t:</label>
          <FormulateInput
            type="text"
            id="content"
            v-model="formValues.content"
            name="content"
          />
        </div>
        <FormulateInput class="submit" type="submit" :label="'Submit post'" />
      </FormulateForm>
    </div>
  </section>
 </template>

 <script>
 import axios from "axios";

 export default {
  name: "Bloginput",

  data() {
    return {
      formValues: {},
    };
  },

  methods: {
    addPost(data) {
      axios.post(`/addPost?XDEBUG_SESSION_START=1`, data).then((res) => {
        if (res.data != "FALSE") {
          this.$router.go();
        }
      });
    },
  },
 };
 </script>

 <style lang="scss">
 .blog-input {
  display: flex;
  align-items: center;

  .input-elements {
    display: flex;
    justify-content: space-between;

    form {
      display: flex;
      flex-direction: column;

      .form-author {
        display: flex;
        align-items: center;

        label {
          margin-right: 1rem;
        }
      }

      .form-content {
        display: flex;
        align-items: center;

        margin-top: 1rem;

        label {
          margin-right: 1rem;
        }
      }

      .submit {
        margin-top: 1rem;

        &:hover {
          cursor: pointer;
        }
      }
    }
  }
 }
 </style>
--- a/frontend/src/components/Blogpost.vue
+++ b/frontend/src/components/Blogpost.vue
@@ -0,0 +1,66 @@
 <template>
  <section class="blogpost">
    <div class="post-nav">
      <div class="nav-author">
        <h3 class="author-text">
          {{ author }}
        </h3>
      </div>
      <div class="nav-button"></div>
    </div>
    <div class="post-text">
      "
      {{ blogpost }}
      "
    </div>
  </section>
 </template>

 <script>
 export default {
  name: "Blogpost",

  props: {
    author: {
      type: String,
      default: "DefaultUser",
    },

    blogpost: {
      type: String,
      default: "",
    },
  },
 };
 </script>

 <style lang="scss">
 .blogpost {
  padding: 24px;
  border: solid 1px black;
  border-radius: 10px;

  .post-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .nav-author {
      .author-text {
        font-size: 1rem;
      }
    }

    .nav-button {
      &:hover {
        scale: 2;
        cursor: pointer;
      }
    }
  }
  .post-text {
    text-align: left;
    opacity: 0.8;
  }
 }
 </style>
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -0,0 +1,22 @@
 import Vue from "vue";
 import App from "./App.vue";
 import router from "./router";
 import store from "./store";
 import axios from "axios";
 import VueFormulate from "@braid/vue-formulate";

 axios.defaults.baseURL = "http://localhost:8000/api/";

 Vue.use(axios);
 Vue.config.productionTip = false;

 Vue.use(VueFormulate, {
  uploader: axios,
  uploadUrl: "/image-upload?XDEBUG_SESSION_START=1",
 });

 new Vue({
  router,
  store,
  render: (h) => h(App),
 }).$mount("#app");
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -0,0 +1,21 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
 import Home from "../views/Home.vue";

 Vue.use(VueRouter);

 const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
 ];

 const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
 });

 export default router;
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -0,0 +1,11 @@
 import Vue from "vue";
 import Vuex from "vuex";

 Vue.use(Vuex);

 export default new Vuex.Store({
  state: {},
  mutations: {},
  actions: {},
  modules: {},
 });
--- a/frontend/src/views/Home.vue
+++ b/frontend/src/views/Home.vue
@@ -0,0 +1,111 @@
 <template>
  <div class="home">
    <div class="home-header">
      <div class="header">
        <h2 class="header__title">sh*tter</h2>
      </div>
    </div>
    <div class="home-body">
      <Bloginput />
      <Blogpost
        class="body-post"
        v-for="post in posts"
        :key="post.post_id"
        :blogpost="post.post_content"
        :author="post.post_author"
      />
    </div>
    <div class="home-footer">
      <div class="footer">
        <p>© by Robbe Van Aken</p>
      </div>
    </div>
  </div>
 </template>

 <script>
 import Blogpost from "@/components/Blogpost.vue";
 import Bloginput from "@/components/Bloginput.vue";
 import axios from "axios";

 export default {
  name: "Home",
  components: {
    Blogpost,
    Bloginput,
  },

  data() {
    return {
      posts: [],
    };
  },

  created() {
    axios
      .get(`/getPosts?XDEBUG_SESSION_START=1`)
      .then((response) => {
        console.log(response.data);
        this.posts = response.data;
        // Object.values(response.data).forEach((val) => {
        //   this.posts.push({
        //     id: val.post_id,
        //     blogpost: val.post_content,
        //     author: val.post_author,
        //   });
        // });
      })
      .catch(function (error) {
        console.log(error);
      });
  },
 };
 </script>

 <style lang="scss">
@font-face {
  font-family: "PICOBALA";
  src: local("PICOBALA"), url(../assets/font/PICOBLA_.TTF) format("truetype");
 }

 .home {
  display: flex;
  justify-content: center;
  flex-direction: column;
  .home-header {
    top: 15px;
    .header {
      &__title {
        font-family: "PICOBALA";
        font-size: 54px;

        color: #06aed5;
      }
    }
  }

  .home-body {
    display: flex;
    align-items: center;
    flex-direction: column;

    .body-post {
      max-width: 50%;
      margin-top: 24px;
    }
  }

  .home-footer {
    display: flex;
    justify-content: center;
    .footer {
      position: fixed;
      bottom: 15px;

      p {
        font-size: 11px;
      }
    }
  }
 }
 </style>