binkowsp/Inspekcja-UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Patryk Binkowski
2024-10-18 15:28:33 +02:00
parent b87d3dfd0b
commit fbe4a1265b
24 changed files with 5071 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
.eslintrc.cjs Normal file
View File

@@ -0,0 +1,15 @@
/* eslint-env node */
require('@rushstack/eslint-patch/modern-module-resolution')
module.exports = {
root: true,
'extends': [
'plugin:vue/vue3-essential',
'eslint:recommended',
'@vue/eslint-config-typescript',
'@vue/eslint-config-prettier/skip-formatting'
],
parserOptions: {
ecmaVersion: 'latest'
}
}

30
.gitignore vendored Normal file
View File

@@ -0,0 +1,30 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
.DS_Store
dist
dist-ssr
coverage
*.local
/cypress/videos/
/cypress/screenshots/
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
*.tsbuildinfo

8
.prettierrc.json Normal file
View File

@@ -0,0 +1,8 @@
{
"$schema": "https://json.schemastore.org/prettierrc",
"semi": false,
"tabWidth": 2,
"singleQuote": true,
"printWidth": 100,
"trailingComma": "none"
}

18
components.d.ts vendored Normal file
View File

@@ -0,0 +1,18 @@
/* eslint-disable */
// @ts-nocheck
// Generated by unplugin-vue-components
// Read more: https://github.com/vuejs/core/pull/3399
export {}
/* prettier-ignore */
declare module 'vue' {
export interface GlobalComponents {
Button: typeof import('primevue/button')['default']
DataView: typeof import('primevue/dataview')['default']
FullscreenCamera: typeof import('./src/components/FullscreenCamera.vue')['default']
InputText: typeof import('primevue/inputtext')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
Tag: typeof import('primevue/tag')['default']
}
}

1
env.d.ts vendored Normal file
View File

@@ -0,0 +1 @@
/// <reference types="vite/client" />

13
index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.ts"></script>
</body>
</html>

4511
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

46
package.json Normal file
View File

@@ -0,0 +1,46 @@
{
"name": "camera-app",
"version": "0.0.0",
"private": true,
"type": "module",
"scripts": {
"dev": "vite",
"build": "run-p type-check \"build-only {@}\" --",
"preview": "vite preview",
"build-only": "vite build",
"type-check": "vue-tsc --build --force",
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
"format": "prettier --write src/"
},
"dependencies": {
"@primevue/themes": "^4.1.0",
"axios": "^1.7.7",
"pinia": "^2.1.7",
"primevue": "^4.1.0",
"simple-vue-camera": "^1.1.3",
"tailwindcss-primeui": "^0.3.4",
"vue": "^3.4.29",
"vue-router": "^4.3.3"
},
"devDependencies": {
"@primevue/auto-import-resolver": "^4.1.0",
"@rushstack/eslint-patch": "^1.8.0",
"@tsconfig/node20": "^20.1.4",
"@types/node": "^20.14.5",
"@vitejs/plugin-vue": "^5.0.5",
"@vue/eslint-config-prettier": "^9.0.0",
"@vue/eslint-config-typescript": "^13.0.0",
"@vue/tsconfig": "^0.5.1",
"autoprefixer": "^10.4.20",
"eslint": "^8.57.0",
"eslint-plugin-vue": "^9.23.0",
"npm-run-all2": "^6.2.0",
"postcss": "^8.4.47",
"prettier": "^3.2.5",
"tailwindcss": "^3.4.13",
"typescript": "~5.4.0",
"unplugin-vue-components": "^0.27.4",
"vite": "^5.3.1",
"vue-tsc": "^2.0.21"
}
}

6
postcss.config.js Normal file
View File

@@ -0,0 +1,6 @@
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

10
src/App.vue Normal file
View File

@@ -0,0 +1,10 @@
<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
</script>
<template>
<RouterView />
</template>
<style scoped>
</style>

1
src/assets/sync_200dp_FFFFFF_FILL0_wght700_GRAD200_opsz48.svg Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#FFFFFF"><path d="M236-477q0 60 21.5 103.5T319-298l25 16v-74q0-13 9.5-23t25.5-10q13 0 23 10t10 23v162q0 21-13 33.5T367-148H206q-15 0-24.5-10t-9.5-25q0-13 9.5-23t25.5-10h70l-6-6q-66-56-96.5-117T144-477q0-102 55.5-184T345-784q15-8 29.5 1.5T394-755q3 18-5.5 34T367-696q-62 32-96.5 91T236-477Zm489-7q0-44-23-90.5T644-657l-24-21v73q0 14-10 24t-24 10q-14 0-24.5-10.5T551-606v-161q0-20 13-32.5t34-12.5h160q14 0 24 9.5t10 23.5q0 14-10 24.5T758-744h-73l7 8q63 57 94 124t31 128q0 102-53.5 183.5T620-177q-16 9-31.5 0T569-205q-5-18 3-34t24-25q60-31 94.5-90.5T725-484Z"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 662 B

106
src/components/FullscreenCamera.vue Normal file
View File

@@ -0,0 +1,106 @@
<script setup lang="ts">
import { ref } from 'vue'
import type Camera from 'simple-vue-camera'
import { useSiteControlStore } from '@/stores/siteControlStore'
import { useCheckpointStore } from '@/stores/checkpointStore'
import { storeToRefs } from 'pinia'
import type { CheckpointPhoto } from '@/main'
const camera = ref<InstanceType<typeof Camera>>();
const photosList = ref<Array<Blob>>([]);
const lastestPhoto = ref<string>();
const siteControlStore = useSiteControlStore();
const checkpointStore = useCheckpointStore();
const { currentCheckpoint } = storeToRefs(checkpointStore);
const snapshot = async () => {
const blob = await camera.value?.snapshot({ width: 540, height: 960 },"image/png",
1);
console.log(blob);
// To show the screenshot with an image tag, create a url
if(blob != undefined) {
const url = URL.createObjectURL(blob);
photosList.value.push(blob);
var link = document.createElement('a');
link.download = `vue-cam-${new Date().toISOString()}.png`;
link.href = url;
if (currentCheckpoint.value == undefined) {
currentCheckpoint.value = {} as CheckpointPhoto;
}
currentCheckpoint.value.photoURL = url;
currentCheckpoint.value.photoBlob = blob;
// link.click();
}
}
function switchCamera() {
siteControlStore.switchCameraState();
}
</script>
<template>
<camera-component ref="camera" autoplay style="display: flex; position: relative; align-items: center" >
<div style="display: flex; justify-content: center; align-items: center; height: 100%">
<div @click="snapshot" class="photo-button" style="align-content: center;">
<div class="circle"></div>
<div class="ring"></div>
</div>
<div @click="switchCamera" class="swap-button" style="align-content: center;">
<img src="/home/patryk/WebstormProjects/camera-app/src/assets/sync_200dp_FFFFFF_FILL0_wght700_GRAD200_opsz48.svg" style="height:80px; margin-left: 10px"/>
<div class="ring"></div>
</div>
</div>
</camera-component>
</template>
<style scoped>
.photo-button {
width: 100px;
height: 100px;
top: 75%;
left: 25%;
margin-left: -50px;
position: absolute;
}
.swap-button {
width: 100px;
height: 100px;
top: 75%;
left: 75%;
margin-left: -50px;
position: absolute;
}
.circle {
position: absolute;
top: 12%;
left: 12%;
bottom: 12%;
right: 12%;
border-radius: 100%;
background-color: #ffffff;
opacity: 0;
}
.ring {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
border-radius: 100%;
border: 0.5em solid #ffffff;
opacity: 0.8;
}
.photo-button .circle, .photo-button .ring {
transition: all 0.25s;
}
.photo-button:hover .circle {
opacity: 1;
}
.photo-button:active .ring {
opacity: 1;
}
.photo-button:active .circle {
opacity: 0.5;
}
</style>

42
src/main.ts Normal file
View File

@@ -0,0 +1,42 @@
import '../src/style.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import PrimeVue from 'primevue/config';
import Aura from '@primevue/themes/aura';
import App from './App.vue'
import router from './router'
import Camera from 'simple-vue-camera'
import axios from 'axios'
const app = createApp(App)
app.use(createPinia())
app.use(router)
app.component("cameraComponent", Camera)
app.use(PrimeVue, {
theme: {
preset: Aura,
options: {
cssLayer: {
name: 'primevue',
order: 'tailwind-base, primevue, tailwind-utilities'
}
}
}
});
export const axiosInstance = axios.create({
baseURL: 'http://inspekcja.mleczarnia-kuzma.pl/api',
withCredentials: true
});
export interface CheckpointPhoto {
photoBlob: Blob,
comment: string,
photoURL: string,
checkpointName: string
}
app.mount('#app')

23
src/router/index.ts Normal file
View File

@@ -0,0 +1,23 @@
import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes: [
{
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('../views/AboutView.vue')
}
]
})
export default router

40
src/stores/checkpointStore.ts Normal file
View File

@@ -0,0 +1,40 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
import type { CheckpointPhoto } from '@/main'
import image1 from '@/assets/462543062_571956811847971_6091192186898499954_n.jpg'
import image2 from '@/assets/462543273_1547886179452155_4598127063523571403_n.jpg'
import image3 from '@/assets/462555442_563827316092754_1417971777838745605_n.jpg'
import image4 from '@/assets/462561044_1684289689086565_883327244306079067_n.jpg'
export const useCheckpointStore = defineStore('checkpoint', () => {
const checkpointList = ref<Array<CheckpointPhoto>>([
{
photoURL: image1,
photoBlob: new Blob(),
comment: "",
checkpointName: "checkpoint 1"
},
{
photoURL: image2,
photoBlob: new Blob(),
comment: "",
checkpointName: "checkpoint 2"
},
{
photoURL: image3,
photoBlob: new Blob(),
comment: "",
checkpointName: "checkpoint 3"
},
{
photoURL: image4,
photoBlob: new Blob(),
comment: "",
checkpointName: "checkpoint 4"
}
]);
const currentCheckpoint = ref<CheckpointPhoto>();
return {checkpointList, currentCheckpoint}
})

12
src/stores/siteControlStore.ts Normal file
View File

@@ -0,0 +1,12 @@
import { ref, computed } from 'vue'
import { defineStore } from 'pinia'
export const useSiteControlStore = defineStore('siteControl', () => {
const isCameraOn = ref<boolean>(false);
function switchCameraState() {
isCameraOn.value = !isCameraOn.value;
}
return { isCameraOn, switchCameraState }
})

14
src/style.css Normal file
View File

@@ -0,0 +1,14 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer tailwind-base, primevue, tailwind-utilities;
@layer tailwind-base {
@tailwind base;
}
@layer tailwind-utilities {
@tailwind components;
@tailwind utilities;
}

95
src/views/HomeView.vue Normal file
View File

@@ -0,0 +1,95 @@
<script setup lang="ts">
import type Camera from 'simple-vue-camera'
import { ref } from 'vue'
import { useSiteControlStore } from '@/stores/siteControlStore'
import { storeToRefs } from 'pinia'
import { axiosInstance, type CheckpointPhoto } from '@/main'
import FullscreenCamera from '@/components/FullscreenCamera.vue'
import { useCheckpointStore } from '@/stores/checkpointStore'
const camera = ref<InstanceType<typeof Camera>>();
const lastestPhoto = ref<string>();
const siteControlStore = useSiteControlStore();
const checkpointStore = useCheckpointStore();
const { isCameraOn } = storeToRefs(siteControlStore);
const { checkpointList, currentCheckpoint } = storeToRefs(checkpointStore);
function switchCamera(checkpoint : CheckpointPhoto) {
currentCheckpoint.value = checkpoint;
siteControlStore.switchCameraState();
}
function sendPhoto() {
// let reader = new FileReader();
// let base64String;
// reader.readAsDataURL(photosList.value[0].photoBlob);
// reader.onloadend = function () {
// base64String = reader.result as string;
// console.log('Base64 String - ', base64String);
//
// // Simply Print the Base64 Encoded String,
// // without additional data: Attributes.
// console.log('Base64 String without Tags- ',
// base64String.substring(base64String.indexOf(',') + 1));
// const json = {
// comment: 'test test',
// filename: 'test.png',
// base64: base64String
// }
// console.log(JSON.stringify(json));
// // axiosInstance.post('/upload', JSON.stringify(json)).then( response => {
// // console.log(response);
// // });
//}
}
</script>
<template>
<FullscreenCamera v-if="isCameraOn == true"/>
<div v-else>
<DataView :value="checkpointList" layout="grid" data-key="">
<template #grid="slotProps">
<div class="grid grid-cols-12 gap-4">
<div v-for="(item, index) in slotProps.items" :key="index" class="col-span-12 sm:col-span-6 md:col-span-4 xl:col-span-6 p-2">
<div class="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col h-[100%]">
<div class="bg-surface-50 flex justify-center rounded p-4 h-[inherit]">
<div class="relative mx-auto flex align-middle">
<img class="rounded w-full" :src="item.photoURL" :alt="item.name" style="max-width: 300px" v-if="item.photoURL != undefined"/>
<span class="font-medium text-center self-center h-auto" v-else>Zrób zdjęcie</span>
</div>
</div>
<div class="pt-6">
<div class="flex flex-row justify-between items-start gap-2">
<div>
<div class="text-xl font-bold mt-1">{{ item.checkpointName }}</div>
</div>
</div>
<div class="flex flex-col gap-6 mt-4">
<div>
<label for="fluid" class="font-medium mb-2 block">Komentarz</label>
<InputText v-model="item.comment" fluid />
</div>
<div class="flex gap-2">
<Button icon="pi pi-shopping-cart" label="Otwórz kamerę" class="flex-auto whitespace-nowrap" @click="switchCamera(item)"></Button>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
</DataView>
<Button label="Send photo" @click="sendPhoto"/>
<h1 class="text-3xl font-bold underline">
Hello world!
</h1>
</div>
</template>
<style scoped>
</style>

13
tailwind.config.js Normal file
View File

@@ -0,0 +1,13 @@
/** @type {import('tailwindcss').Config} */
// eslint-disable-next-line no-undef
module.exports = {
content: [
"./index.html",
"./src/**/*.{vue,js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
// eslint-disable-next-line no-undef
plugins: [require('tailwindcss-primeui')],
}

14
tsconfig.app.json Normal file
View File

@@ -0,0 +1,14 @@
{
"extends": "@vue/tsconfig/tsconfig.dom.json",
"include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
"exclude": ["src/**/__tests__/*"],
"compilerOptions": {
"composite": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
}
}

11
tsconfig.json Normal file
View File

@@ -0,0 +1,11 @@
{
"files": [],
"references": [
{
"path": "./tsconfig.node.json"
},
{
"path": "./tsconfig.app.json"
}
]
}

19
tsconfig.node.json Normal file
View File

@@ -0,0 +1,19 @@
{
"extends": "@tsconfig/node20/tsconfig.json",
"include": [
"vite.config.*",
"vitest.config.*",
"cypress.config.*",
"nightwatch.conf.*",
"playwright.config.*"
],
"compilerOptions": {
"composite": true,
"noEmit": true,
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"module": "ESNext",
"moduleResolution": "Bundler",
"types": ["node"]
}
}

23
vite.config.ts Normal file
View File

@@ -0,0 +1,23 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite';
import {PrimeVueResolver} from '@primevue/auto-import-resolver';
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
PrimeVueResolver()
]
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})