Веб дизајн/Јул 2020

Јулски рок 2020. године одржан је 10. јула. Поставка је доступна са странице предмета.

1. задатак

Поставка

Направити следећу мини интернет апликацију за интерни рад апотеке Сима. Веб апликацију реализовати користећи Вуе технологију.

На почетној страни апликације, направити ХТМЛ форму, преко које могу да се улогују корисници система, а то су достављач робе и апотекар. Достављачи и апотекари треба да имају могућност уношења корисничког имена и лозинке, и радио дугме са две опције, где бирају тип: достављач или апотекар. У случају исправно унетих података, кориснику треба омогућити рад са остатком система (за сваки тип треба приказати посебну почетну страницу/компоненту након логовања). Уколико корисник не унесе неки од података или унесе погрешне податке, потребно је исписати поруку црвеним словима са могућношћу исправљања грешке. Достављач робе након сваке успешне пријаве на систем има могућност да дода нови производ, тако што уноси назив производа, количину, и датум пристизања. Уколико под одређеним називом већ постоји производ у магацину, потребно је ажурирати количину и датум пристизања. Сва поља морају бити попуњена.

Апотекар након сваке успешне пријаве на систем види табеларни приказ свих производа који постоје (приказати назив, количину и датум пристизања). Сви производи који су пристигли данашњег дана треба да буду обојени зеленом бојом. Апотекар може да означи који производ жели да уклони из понуде, тако што кликне на дугме Уклони поред сваког производа у табели. Кликом на дугме Уклони приказује се нова компонента, на којој се исписују сви преостали производи у апотеци.

Податке чувати на нивоу лоцалСтораге-а.

Корисници који постоје у систему:

• Име: Петар, Презиме: Јовић, Тип: достављач, Корисничко име: пера, Лозинка: пера123
• Име: Милица, Презиме: Николић, Тип: апотекар, Корисничко име: мица, Лозинка: мица123
• Име: Јован, Презиме: Лазић, Тип: апотекар, Корисничко име: јова, Лозинка: јова123

Студенти треба да користе податке који су наведени у тексту задатка, у супротном губе 5 поена.

НАПОМЕНА: По завршетку колоквијума само срц фолдер пројекта сачувати на L диск.

Решење

App.vue

<template>
  <router-view />
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  justify-content: center;
  display: flex;
  color: #2c3e50;
}
</style>

views

Home.vue

<template>
<section>
  <h1>Početna stranica</h1>
  <form @submit.prevent="login()">
    <p>
      <label for="username">Korisničko ime</label>
      <input type="text" name="username" id="username" v-model="username" required>
    </p>
    <p>
      <label for="password">Lozinka</label>
      <input type="password" name="password" id="password" v-model="password" required>
    </p>
    <p>
      <label for="type-distributor">Dostavljač</label>
      <input type="radio" name="type" id="type-distributor" v-model="type" value="distributor">
      <label for="type-pharmacist">Apotekar</label>
      <input type="radio" name="type" id="type-pharmacist" v-model="type" value="pharmacist">
    </p>
    <p><input type="submit" value="Uloguj se"></p>
    <p class="error">{{error}}</p>
  </form>
</section>
</template>

<style scoped>
label {
  padding-right: 10px;
}
p {
  margin: 0;
  margin-bottom: 2px;
}
.error {
  color: red;
  font-weight: bold;
}
</style>

<script>
export default {
  name: 'Home',
  data () {
    return {
      username: '',
      password: '',
      type: '',
      error: '',
      users: []
    }
  },
  created () {
    const savedUsers = localStorage.getItem('users')
    this.users = savedUsers ? JSON.parse(savedUsers) : [
      {
        name: 'Petar',
        surname: 'Jović',
        username: 'pera',
        password: 'pera123',
        type: 'distributor'
      },
      {
        name: 'Milica',
        surname: 'Nikolić',
        username: 'mica',
        password: 'mica123',
        type: 'pharmacist'
      },
      {
        name: 'Jovan',
        surname: 'Lazić',
        username: 'jova',
        password: 'jova123',
        type: 'pharmacist'
      }
    ]
  },
  methods: {
    login () {
      if (this.username === '') {
        this.error = 'Unesite korisničko ime.'
        return
      }
      if (this.password === '') {
        this.error = 'Unesite lozinku.'
        return
      }
      if (this.type === '') {
        this.error = 'Izaberite tip.'
        return
      }
      const user = this.users.find(({ username }) => username === this.username)
      if (!user) {
        this.error = 'Korisničko ime ne postoji u sistemu.'
        return
      }
      const { username, password, type } = user
      if (password !== this.password) {
        this.error = 'Pogrešna lozinka.'
        return
      }
      if (type !== this.type) {
        this.error = 'Pogrešan tip.'
        return
      }
      this.$router.push(type)
      localStorage.setItem('user', username)
    }
  }
}
</script>

Distributor.vue

<template>
<section>
  <h1>Dostavljač</h1>
  <form @submit.prevent="submit()">
    <p>
      <label for="name">Naziv</label>
      <input type="text" name="name" id="name" v-model="name" required>
    </p>
    <p>
      <label for="quantity">Količina</label>
      <input type="number" name="quantity" id="quantity" v-model="quantity" required>
    </p>
    <p>
      <label for="date">Datum</label>
      <input type="date" name="date" id="date" v-model="date" required>
    </p>
    <input type="submit" value="Unesi">
  </form>
</section>
</template>

<style scoped>
label {
  padding-right: 10px;
}
p {
  margin: 0;
  margin-bottom: 2px;
}
</style>

<script>
export default {
  name: 'Distributor',
  data () {
    return {
      name: '',
      quantity: '',
      date: '',
      products: []
    }
  },
  created () {
    this.products = JSON.parse(localStorage.getItem('products') || '[]')
  },
  methods: {
    submit () {
      if (
        this.name === '' ||
        this.quantity === '' ||
        this.date === ''
      ) {
        return
      }
      const product = this.products.find(({ name }) => name === this.name)
      if (product) {
        product.quantity += Number(this.quantity)
        product.date = this.date
      } else {
        this.products.push({
          name: this.name,
          quantity: Number(this.quantity),
          date: this.date
        })
      }
      localStorage.setItem('products', JSON.stringify(this.products))
    }
  }
}
</script>

Pharmacist.vue

<template>
<section>
  <h1>Apotekar</h1>
  <table>
    <thead>
      <tr>
        <th>Naziv</th>
        <th>Količina</th>
        <th>Datum</th>
        <th>Akcija</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="product of products" :key="product.name" :class="today(product) ? 'today' : ''">
        <td>{{product.name}}</td>
        <td>{{product.quantity}}</td>
        <td>{{product.date}}</td>
        <td><button @click="remove(product)">Ukloni</button></td>
      </tr>
    </tbody>
  </table>
</section>
</template>

<style scoped>
.today {
  color: green;
  font-weight: bold;
}
</style>

<script>
export default {
  name: 'Pharmacist',
  data () {
    return {
      products: []
    }
  },
  created () {
    this.products = JSON.parse(localStorage.getItem('products') || '[]')
  },
  methods: {
    remove (product) {
      console.log(product, this.products)
      this.products = this.products.filter(({ name }) => name !== product.name)
      localStorage.setItem('products', JSON.stringify(this.products))
    },
    today (product) {
      const today = new Date()
      const productDate = new Date(product.date)
      return productDate.toDateString() === today.toDateString()
    }
  }
}
</script>

router

index.js

import { createRouter, createWebHistory } from 'vue-router'
import Distributor from '../views/Distributor.vue'
import Home from '../views/Home.vue'
import Pharmacist from '../views/Pharmacist.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/distributor',
    name: 'Distributor',
    component: Distributor
  },
  {
    path: '/pharmacist',
    name: 'Pharmacist',
    component: Pharmacist
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

2. задатак

Овај задатак није решен. Помозите СИ Wики тако што ћете га решити.