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

Julski rok 2020. godine održan je 10. jula. Postavka je dostupna sa stranice predmeta.

1. zadatak

Postavka

Napraviti sledeću mini internet aplikaciju za interni rad apoteke Sima. Veb aplikaciju realizovati koristeći Vue tehnologiju.

Na početnoj strani aplikacije, napraviti HTML formu, preko koje mogu da se uloguju korisnici sistema, a to su dostavljač robe i apotekar. Dostavljači i apotekari treba da imaju mogućnost unošenja korisničkog imena i lozinke, i radio dugme sa dve opcije, gde biraju tip: dostavljač ili apotekar. U slučaju ispravno unetih podataka, korisniku treba omogućiti rad sa ostatkom sistema (za svaki tip treba prikazati posebnu početnu stranicu/komponentu nakon logovanja). Ukoliko korisnik ne unese neki od podataka ili unese pogrešne podatke, potrebno je ispisati poruku crvenim slovima sa mogućnošću ispravljanja greške. Dostavljač robe nakon svake uspešne prijave na sistem ima mogućnost da doda novi proizvod, tako što unosi naziv proizvoda, količinu, i datum pristizanja. Ukoliko pod određenim nazivom već postoji proizvod u magacinu, potrebno je ažurirati količinu i datum pristizanja. Sva polja moraju biti popunjena.

Apotekar nakon svake uspešne prijave na sistem vidi tabelarni prikaz svih proizvoda koji postoje (prikazati naziv, količinu i datum pristizanja). Svi proizvodi koji su pristigli današnjeg dana treba da budu obojeni zelenom bojom. Apotekar može da označi koji proizvod želi da ukloni iz ponude, tako što klikne na dugme Ukloni pored svakog proizvoda u tabeli. Klikom na dugme Ukloni prikazuje se nova komponenta, na kojoj se ispisuju svi preostali proizvodi u apoteci.

Podatke čuvati na nivou localStorage-a.

Korisnici koji postoje u sistemu:

• Ime: Petar, Prezime: Jović, Tip: dostavljač, Korisničko ime: pera, Lozinka: pera123
• Ime: Milica, Prezime: Nikolić, Tip: apotekar, Korisničko ime: mica, Lozinka: mica123
• Ime: Jovan, Prezime: Lazić, Tip: apotekar, Korisničko ime: jova, Lozinka: jova123

Studenti treba da koriste podatke koji su navedeni u tekstu zadatka, u suprotnom gube 5 poena.

NAPOMENA: Po završetku kolokvijuma samo src folder projekta sačuvati na L disk.

Rešenje

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. zadatak

Овај задатак није решен. Помозите SI Wiki тако што ћете га решити.