diff --git a/viz-dev-frontend/src/components/ModalAddData.vue b/viz-dev-frontend/src/components/ModalAddData.vue
deleted file mode 100644
index cc0b6debb6e659721cb9f3f3aab70d473dabb2f4..0000000000000000000000000000000000000000
--- a/viz-dev-frontend/src/components/ModalAddData.vue
+++ /dev/null
@@ -1,126 +0,0 @@
-<template>
- <div class="modal__show--data">
- <div class="modal__content">
- <div class="modal__header">
- <span class="close" @click="$emit('close')">×</span>
- <h2>Add Data</h2>
- </div>
- <div class="modal__body">
- <p><span>Nama Data Baru</span>: <input type="text" class="number-entry"></p>
- </div>
- <div class="modal__footer">
- <button class="btn__add">Add</button>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: 'ModalAddData',
- components: {
- },
-};
-</script>
-
-<style scoped>
-.modal__show--data {
- position: fixed;
- z-index: 1;
- padding-top: 150px;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- overflow: auto;
- background-color: rgb(0,0,0);
- background-color: rgba(0,0,0,0.4);
-}
-
-.modal__content {
- position: relative;
- background-color: #fefefe;
- margin: auto;
- padding: 0;
- border: 1px solid #888;
- width: 50%;
- box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
- -webkit-animation-name: animatetop;
- -webkit-animation-duration: 0.4s;
- animation-name: animatetop;
- animation-duration: 0.4s;
-}
-
-@keyframes animatetop {
- from {top: -300px; opacity: 0}
- to {top: 0; opacity: 1}
-}
-
-.close {
- color: white;
- float: right;
- font-size: 28px;
- font-weight: bold;
-}
-
-.close:hover,
-.close:focus {
- color: #000;
- text-decoration: none;
- cursor: pointer;
-}
-
-.modal__header {
- padding: 2px 16px;
- background-color: rgba(6, 116, 210, 1);
- color: white;
- text-align: center;
-}
-
-.modal__body {
- padding: 2px 16px;
- text-align: center;
-}
-
-.modal__footer {
- text-align: center;
-}
-
-span {
- font-weight: 600;
-}
-
-.btn__delete {
- border: 0;
- background-color: rgba(247, 91, 101, 1);
- border-radius: 5px;
- box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, .2);
- padding: 10px 15px;
- cursor: pointer;
- font-weight: 600;
- margin: 10px 5px;
- color: white;
-}
-
-.btn__delete:hover {
- background-color: rgb(242, 75, 85);
- transform: scale(1.1);
-}
-
-.btn__add {
- border: 0;
- background-color: rgba(6, 116, 210, 1);
- border-radius: 5px;
- box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, .2);
- padding: 10px 15px;
- cursor: pointer;
- font-weight: 600;
- margin: 10px 5px;
- color: white;
-}
-
-.btn__add:hover {
- background-color: rgb(10, 84, 150);
- transform: scale(1.1);
-}
-</style>
diff --git a/viz-dev-frontend/src/components/ModalSeriesCreate.vue b/viz-dev-frontend/src/components/ModalSeriesCreate.vue
new file mode 100644
index 0000000000000000000000000000000000000000..26d9da89fb6f115fa61f0dd27b9a0e4bbcf8bfdc
--- /dev/null
+++ b/viz-dev-frontend/src/components/ModalSeriesCreate.vue
@@ -0,0 +1,58 @@
+<template>
+ <div class="modal">
+ <div class="modal-background" v-on:click="closeModal"> </div>
+ <div class="modal-content">
+ <span class="close" v-on:click="closeModal">×</span>
+ <div class="modal-header">
+ <h2>Buat Series</h2>
+ </div>
+ <div class="modal-body">
+ <p> Nama Series: <input type="text" v-model="workingSeries.name"></p>
+ <p> Deskripsi: <input type="text" v-model="workingSeries.description"></p>
+ <p class="error">{{error}}</p>
+ <button class="btn" v-on:click="saveSeries">Simpan</button>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import api from '@/api';
+
+export default {
+ name: 'ModalSeriesCreate',
+ components: {},
+ data: () => ({
+ workingSeries: {
+ name: '',
+ description: '',
+ },
+ error: '',
+ }),
+ methods: {
+ saveSeries() {
+ api.post('/series', this.workingSeries).then(() => {
+ this.closeModal();
+ }).catch((err) => {
+ this.error = err.response.data.message;
+ });
+ },
+ closeModal() {
+ this.$emit('modalClosed');
+ },
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+@import '../styles/components/modal';
+@import '../styles/components/form';
+
+.modal-body p {
+ margin-bottom: 1em;
+}
+
+.error {
+ color: red;
+}
+</style>
diff --git a/viz-dev-frontend/src/components/Navbar.vue b/viz-dev-frontend/src/components/Navbar.vue
index b37182fa1eecaac7a8913110921635962e8f9b3d..2fe14f061ae59c473153e5e414e12c4bff830b64 100644
--- a/viz-dev-frontend/src/components/Navbar.vue
+++ b/viz-dev-frontend/src/components/Navbar.vue
@@ -3,8 +3,17 @@
<router-link v-bind:to="linkHome" class="d-flex flex-row align-items-center">
<img v-bind:src="logo" class="logo" /> Jabar Viz Dev
</router-link>
- <router-link v-bind:to="linkEdit" class="d-flex flex-row align-items-center">
- Edit
+ <router-link
+ v-if="user"
+ v-bind:to="linkSeries"
+ class="d-flex flex-row align-items-center">
+ Edit
+ </router-link>
+ <router-link
+ v-if="user && user.role === 'admin'"
+ v-bind:to="linkAccount"
+ class="d-flex flex-row align-items-center">
+ Akun
</router-link>
<div class="flex-1"></div>
<div class="flex-0" v-if="user">{{ user.username }}</div>
@@ -18,14 +27,16 @@
import { mapState } from 'vuex';
import logo from '@/assets/logo-jabar.png';
import Home from '@/views/Home.vue';
-import Edit from '@/views/Edit.vue';
+import Series from '@/views/Series.vue';
+import Account from '@/views/ManageAccount.vue';
import Login from '@/views/Login.vue';
export default {
data: () => ({
logo,
+ linkAccount: Account,
linkHome: Home,
- linkEdit: Edit,
+ linkSeries: Series,
linkLogin: Login,
}),
computed: {
diff --git a/viz-dev-frontend/src/router.js b/viz-dev-frontend/src/router.js
index a5de307e3889601a6ab6dfd5ced5168dc788ddd9..3a066a270182557cd25c4106b0a6a6b7ee25325a 100644
--- a/viz-dev-frontend/src/router.js
+++ b/viz-dev-frontend/src/router.js
@@ -4,8 +4,8 @@ import { requireAdmin, requireGuest, requireLogin } from './guard';
import Home from './views/Home.vue';
import ManageAccount from './views/ManageAccount.vue';
import Login from './views/Login.vue';
-import Edit from './views/Edit.vue';
-import EditData from './views/EditData.vue';
+import Series from './views/Series.vue';
+import SeriesEdit from './views/SeriesEdit.vue';
Vue.use(Router);
@@ -31,15 +31,15 @@ export default new Router({
beforeEnter: requireGuest,
},
{
- path: '/edit',
- name: 'Edit',
- component: Edit,
+ path: '/series',
+ name: 'Series',
+ component: Series,
beforeEnter: requireLogin,
},
{
- path: '/edit_data',
- name: 'Edit_Data',
- component: EditData,
+ path: '/series/:id',
+ name: 'SeriesEdit',
+ component: SeriesEdit,
beforeEnter: requireLogin,
},
],
diff --git a/viz-dev-frontend/src/styles/components/modal.scss b/viz-dev-frontend/src/styles/components/modal.scss
index 9a471d4bf725c2eb83dc06f99b7127924d96d28a..6fbe219c3b0d623b90aa077e082fd46bcc0d20e6 100644
--- a/viz-dev-frontend/src/styles/components/modal.scss
+++ b/viz-dev-frontend/src/styles/components/modal.scss
@@ -52,6 +52,9 @@
.modal-body {
padding: 16px 16px;
text-align: center;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
}
.modal-footer {
diff --git a/viz-dev-frontend/src/styles/index.scss b/viz-dev-frontend/src/styles/index.scss
index 7fe9e1482e557d75f9f887aff4eb5de98594c2aa..11b36e9c8ea385f1f19d62390c3bc458338b86a0 100644
--- a/viz-dev-frontend/src/styles/index.scss
+++ b/viz-dev-frontend/src/styles/index.scss
@@ -23,6 +23,9 @@ a {
// button
.btn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
font-family: inherit;
border: 0;
background-color: $primary-light;
@@ -33,6 +36,7 @@ a {
color: white;
animation: all 1s ease;
cursor: pointer;
+ text-align: center;
}
.btn:hover {
diff --git a/viz-dev-frontend/src/views/Edit.vue b/viz-dev-frontend/src/views/Edit.vue
deleted file mode 100644
index f979bc9bd5e7745fac658063666ede06fe0ff217..0000000000000000000000000000000000000000
--- a/viz-dev-frontend/src/views/Edit.vue
+++ /dev/null
@@ -1,115 +0,0 @@
-<template>
- <div>
- <Navbar></Navbar>
- <div class="container">
- <h1 class="title">JABAR DATA VISUALIZATION EDITING CENTER</h1>
- <button class="btn__add" @click="displayAddData">Add new data</button>
- <ModalAddData v-if="showAddData" @close="showAddData = false"></ModalAddData>
- <div class="container__data">
- <div class="btn__data" v-for="content in contents" @click="redirectPage(content.name)">
- {{ content.name }}
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-import ModalAddData from '@/components/ModalAddData.vue';
-export default {
- name: 'Edit',
- components: {
- ModalAddData: ModalAddData
- },
- data(){
- return{
- contents: [
- {name: 'Harapan Lama Sekolah'},
- {name: 'Rata-Rata Lama Sekolah'},
- {name: 'IPM'},
- {name: 'Jumlah Penduduk Miskin'},
- {name: 'Persentase Penduduk Miskin'},
- {name: 'Indeks Kedalaman Kemiskinan'},
- {name: 'Indeks Keparahan Kemiskinan'},
- {name: 'Garis Kemiskinan'},
- {name: 'Gini Ratio'},
- {name: 'Jumlah Penduduk'},
- {name: 'Laju Pertumbuhan'},
- {name: 'Kepadatan Penduduk'},
- {name: 'Rumah Sakit'},
- {name: 'Puskesmas'},
- {name: 'Petugas Medis'},
- {name: 'Dokter'},
- {name: 'Bidan'},
- {name: 'Jumlah SD Negeri/Swasta'},
- {name: 'Jumlah SLTP Negeri/Swasta'},
- {name: 'Jumlah SLTA Negeri/Swasta'},
- {name: 'Jumlah SMK Negeri/Swasta'},
- {name: 'Tingkat Partisipasi Angkatan Kerja P/L'},
- {name: 'Tingkat Pengangguran Terbuka (P/L) (Jiwa)'},
- {name: 'Industri Besar'},
- {name: 'Industri Kecil'},
- ],
- showAddData: false
- }
- },
- methods: {
- redirectPage: function (content) {
- this.$router.push({path:'edit_data', query: { data: content }});
- },
- displayAddData: function() {
- this.showAddData = true;
- }
- }
-};
-</script>
-
-<style scoped>
-.title {
- text-align: center;
-}
-.container {
- padding: 40px 76px;
- text-align: center;
-}
-
-.container__data {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- justify-content: center;
- margin: 40px 0;
-}
-
-.btn__data {
- background-color: #0e76bf;
- color: white;
- font-size: 1.2em;
- border-radius: 5px;
- margin: 10px;
- width: 125px;
- padding: 16px;
- text-align: center;
- display: flex;
- justify-content: center;
- align-items: center;
- cursor: pointer;
- transition: transform .5s ease;
- transform: scale(1);
- box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, .2);
-}
-
-.btn__add{
- border: 0;
- background-color: rgba(6, 116, 210, 1);
- border-radius: 5px;
- box-shadow: 2px 2px 8px 2px rgba(0, 0, 0, .2);
- padding: 10px 15px;
- cursor: pointer;
- font-weight: 600;
- margin: 10px 0;
- color: white;
-}
-
-
-</style>
diff --git a/viz-dev-frontend/src/views/ManageAccount.vue b/viz-dev-frontend/src/views/ManageAccount.vue
index 14d113b808cc6b2efed55747fdecc1b3edca15ec..ba92922254fb46bbf11cf5eae757af4bf7537029 100644
--- a/viz-dev-frontend/src/views/ManageAccount.vue
+++ b/viz-dev-frontend/src/views/ManageAccount.vue
@@ -44,7 +44,7 @@ import ModalUserCreate from '@/components/ModalUserCreate.vue';
import ModalUserEdit from '@/components/ModalUserEdit.vue';
export default {
- username: 'ManageAccount',
+ name: 'ManageAccount',
components: {
Loader,
ModalUserCreate,
@@ -112,12 +112,12 @@ export default {
@import '../styles/components/table';
.title {
- text-align: center;
- margin: 1.5em 0;
+ text-align: center;
+ margin: 1.5em 0;
}
.btn.add-user {
- margin-left: 0;
+ margin-left: 0;
}
.table {
diff --git a/viz-dev-frontend/src/views/Series.vue b/viz-dev-frontend/src/views/Series.vue
new file mode 100644
index 0000000000000000000000000000000000000000..9319e7de0b6fda2bb190595cde31462b97de5fe8
--- /dev/null
+++ b/viz-dev-frontend/src/views/Series.vue
@@ -0,0 +1,80 @@
+<template>
+ <div>
+ <Navbar></Navbar>
+ <div class="container d-flex flex-column align-items-center">
+ <h1 class="title">Edit Series</h1>
+ <button class="btn" v-on:click="toggleModalSeriesCreate">Tambah Series</button>
+ <ModalSeriesCreate
+ v-if="showModalSeriesCreate"
+ @modalClosed="toggleModalSeriesCreate" />
+ <div class="d-flex flex-row justify-content-center flex-wrap">
+ <router-link
+ v-bind:to="{ name: 'SeriesEdit', params: { id: content.id }}"
+ class="btn menu"
+ v-for="content in contents"
+ v-bind:key="content.id">
+ {{ content.name }}
+ </router-link>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script>
+import api from '@/api';
+import ModalSeriesCreate from '@/components/ModalSeriesCreate.vue';
+
+export default {
+ name: 'Series',
+ components: {
+ ModalSeriesCreate,
+ },
+ data: () => ({
+ isLoadingSeries: false,
+ showModalSeriesCreate: false,
+ contents: [],
+ showAddData: false,
+ }),
+ methods: {
+ displayAddData() {
+ this.showAddData = true;
+ },
+ toggleModalSeriesCreate() {
+ if (this.showModalSeriesCreate) {
+ // update series list after editing
+ this.retrieveSeries();
+ }
+
+ this.showModalSeriesCreate = !this.showModalSeriesCreate;
+ },
+ retrieveSeries() {
+ this.isLoadingSeries = true;
+ api.get('/series').then((response) => {
+ this.contents = response.data;
+ this.isLoadingSeries = false;
+ });
+ },
+ },
+ created() {
+ this.retrieveSeries();
+ },
+};
+</script>
+
+<style lang="scss" scoped>
+.title {
+ text-align: center;
+ margin: 1.5em 0;
+}
+
+.btn.menu {
+ width: 125px;
+ transition: transform .5s ease;
+ transform: scale(1);
+}
+
+.btn.menu:hover {
+ transform: scale(1.1);
+}
+
+</style>
diff --git a/viz-dev-frontend/src/views/EditData.vue b/viz-dev-frontend/src/views/SeriesEdit.vue
similarity index 95%
rename from viz-dev-frontend/src/views/EditData.vue
rename to viz-dev-frontend/src/views/SeriesEdit.vue
index 62e71c231ea2d656dcf11e1fe7569317cf68bd0a..d6e6d95cc6e7d942782be2f3f573020d8b5224b5 100644
--- a/viz-dev-frontend/src/views/EditData.vue
+++ b/viz-dev-frontend/src/views/SeriesEdit.vue
@@ -39,18 +39,18 @@
<script>
export default {
- name: 'Edit_Data',
+ name: 'SeriesEdit',
components: {
},
- data(){
- return{
+ data() {
+ return {
kab_kota: [
- {name: 'Kota Bandung',},
- {name: 'Kota Bekasi'},
- {name: 'Kota Depok'},
- ]
- }
- }
+ { name: 'Kota Bandung' },
+ { name: 'Kota Bekasi' },
+ { name: 'Kota Depok' },
+ ],
+ };
+ },
};
</script>