Merge pull request 'Adicionando viuetify y dockers para correr el proyecto completo' (#34) from experiment_sale_with_vuetify_#33 into main
Reviewed-on: OneTeam/don_confiao#34
This commit is contained in:
6
.gitignore
vendored
6
.gitignore
vendored
@@ -327,3 +327,9 @@ pip-selfcheck.json
|
|||||||
|
|
||||||
# End of https://www.toptal.com/developers/gitignore/api/emacs,python,django,venv
|
# End of https://www.toptal.com/developers/gitignore/api/emacs,python,django,venv
|
||||||
|
|
||||||
|
/tienda_ilusion/don_confiao/static/frontend/
|
||||||
|
/tienda_ilusion/don_confiao/frontend/don-confiao/.vite/
|
||||||
|
/tienda_ilusion/don_confiao/frontend/don-confiao/.eslintrc.js
|
||||||
|
/tienda_ilusion/don_confiao/frontend/don-confiao/.eslintrc-auto-import.json
|
||||||
|
/tienda_ilusion/don_confiao/frontend/don-confiao/.editorconfig
|
||||||
|
/tienda_ilusion/don_confiao/frontend/don-confiao/.browserslistrc
|
||||||
|
|||||||
8
django.Dockerfile
Normal file
8
django.Dockerfile
Normal file
@@ -0,0 +1,8 @@
|
|||||||
|
from python:3.12-slim
|
||||||
|
|
||||||
|
WORKDIR /app/
|
||||||
|
|
||||||
|
COPY requirements.txt ./
|
||||||
|
RUN pip install --no-cache-dir -r requirements.txt
|
||||||
|
|
||||||
|
CMD ["python", "manage.py", "runserver", "0.0.0.0:9090"]
|
||||||
27
docker-compose.yml
Normal file
27
docker-compose.yml
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
services:
|
||||||
|
nginx:
|
||||||
|
build:
|
||||||
|
context: ./
|
||||||
|
dockerfile: nginx.Dockerfile
|
||||||
|
ports:
|
||||||
|
- "7000:80"
|
||||||
|
volumes:
|
||||||
|
- ./nginx.conf:/etc/nginx/conf.d/default.conf
|
||||||
|
- ./tienda_ilusion/don_confiao/static/frontend:/var/www/frontend/
|
||||||
|
django:
|
||||||
|
build:
|
||||||
|
context: ./
|
||||||
|
dockerfile: django.Dockerfile
|
||||||
|
volumes:
|
||||||
|
- ./tienda_ilusion:/app/
|
||||||
|
ports:
|
||||||
|
- "7001:9090"
|
||||||
|
frontend:
|
||||||
|
build:
|
||||||
|
context: ./
|
||||||
|
dockerfile: vuetify.Dockerfile
|
||||||
|
volumes:
|
||||||
|
- ./tienda_ilusion/don_confiao/frontend/don-confiao:/app/
|
||||||
|
ports:
|
||||||
|
- "7003:3000"
|
||||||
|
|
||||||
10
nginx.Dockerfile
Normal file
10
nginx.Dockerfile
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
FROM nginx:latest
|
||||||
|
|
||||||
|
# Copiamos el archivo de configuración NGINX
|
||||||
|
COPY nginx.conf /etc/nginx/conf.d/default.conf
|
||||||
|
|
||||||
|
# Establecemos la variable de entorno para el proxy inverso
|
||||||
|
ENV DJANGO_PROXY_URL http://django:8000
|
||||||
|
|
||||||
|
# Creamos un directorio estático
|
||||||
|
RUN mkdir -p /var/www/frontend
|
||||||
25
nginx.conf
Normal file
25
nginx.conf
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
server {
|
||||||
|
listen 80;
|
||||||
|
server_name donconfiao.org;
|
||||||
|
|
||||||
|
# location /frontend {
|
||||||
|
# alias /var/www/frontend/;
|
||||||
|
# autoindex on;
|
||||||
|
# }
|
||||||
|
|
||||||
|
location /frontend {
|
||||||
|
proxy_pass http://frontend:3000/frontend;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
|
||||||
|
location / {
|
||||||
|
proxy_pass http://django:9090;
|
||||||
|
proxy_set_header Host $host;
|
||||||
|
proxy_set_header X-Real-IP $remote_addr;
|
||||||
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
||||||
|
proxy_set_header X-Forwarded-Proto $scheme;
|
||||||
|
}
|
||||||
|
}
|
||||||
22
tienda_ilusion/don_confiao/frontend/don-confiao/.gitignore
vendored
Normal file
22
tienda_ilusion/don_confiao/frontend/don-confiao/.gitignore
vendored
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
.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?
|
||||||
79
tienda_ilusion/don_confiao/frontend/don-confiao/README.md
Normal file
79
tienda_ilusion/don_confiao/frontend/don-confiao/README.md
Normal file
@@ -0,0 +1,79 @@
|
|||||||
|
# Vuetify (Default)
|
||||||
|
|
||||||
|
This is the official scaffolding tool for Vuetify, designed to give you a head start in building your new Vuetify application. It sets up a base template with all the necessary configurations and standard directory structure, enabling you to begin development without the hassle of setting up the project from scratch.
|
||||||
|
|
||||||
|
## ❗️ Important Links
|
||||||
|
|
||||||
|
- 📄 [Docs](https://vuetifyjs.com/)
|
||||||
|
- 🚨 [Issues](https://issues.vuetifyjs.com/)
|
||||||
|
- 🏬 [Store](https://store.vuetifyjs.com/)
|
||||||
|
- 🎮 [Playground](https://play.vuetifyjs.com/)
|
||||||
|
- 💬 [Discord](https://community.vuetifyjs.com)
|
||||||
|
|
||||||
|
## 💿 Install
|
||||||
|
|
||||||
|
Set up your project using your preferred package manager. Use the corresponding command to install the dependencies:
|
||||||
|
|
||||||
|
| Package Manager | Command |
|
||||||
|
|---------------------------------------------------------------|----------------|
|
||||||
|
| [yarn](https://yarnpkg.com/getting-started) | `yarn install` |
|
||||||
|
| [npm](https://docs.npmjs.com/cli/v7/commands/npm-install) | `npm install` |
|
||||||
|
| [pnpm](https://pnpm.io/installation) | `pnpm install` |
|
||||||
|
| [bun](https://bun.sh/#getting-started) | `bun install` |
|
||||||
|
|
||||||
|
After completing the installation, your environment is ready for Vuetify development.
|
||||||
|
|
||||||
|
## ✨ Features
|
||||||
|
|
||||||
|
- 🖼️ **Optimized Front-End Stack**: Leverage the latest Vue 3 and Vuetify 3 for a modern, reactive UI development experience. [Vue 3](https://v3.vuejs.org/) | [Vuetify 3](https://vuetifyjs.com/en/)
|
||||||
|
- 🗃️ **State Management**: Integrated with [Pinia](https://pinia.vuejs.org/), the intuitive, modular state management solution for Vue.
|
||||||
|
- 🚦 **Routing and Layouts**: Utilizes Vue Router for SPA navigation and vite-plugin-vue-layouts for organizing Vue file layouts. [Vue Router](https://router.vuejs.org/) | [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts)
|
||||||
|
- ⚡ **Next-Gen Tooling**: Powered by Vite, experience fast cold starts and instant HMR (Hot Module Replacement). [Vite](https://vitejs.dev/)
|
||||||
|
- 🧩 **Automated Component Importing**: Streamline your workflow with unplugin-vue-components, automatically importing components as you use them. [unplugin-vue-components](https://github.com/antfu/unplugin-vue-components)
|
||||||
|
|
||||||
|
These features are curated to provide a seamless development experience from setup to deployment, ensuring that your Vuetify application is both powerful and maintainable.
|
||||||
|
|
||||||
|
## 💡 Usage
|
||||||
|
|
||||||
|
This section covers how to start the development server and build your project for production.
|
||||||
|
|
||||||
|
### Starting the Development Server
|
||||||
|
|
||||||
|
To start the development server with hot-reload, run the following command. The server will be accessible at [http://localhost:3000](http://localhost:3000):
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn dev
|
||||||
|
```
|
||||||
|
|
||||||
|
(Repeat for npm, pnpm, and bun with respective commands.)
|
||||||
|
|
||||||
|
> Add NODE_OPTIONS='--no-warnings' to suppress the JSON import warnings that happen as part of the Vuetify import mapping. If you are on Node [v21.3.0](https://nodejs.org/en/blog/release/v21.3.0) or higher, you can change this to NODE_OPTIONS='--disable-warning=5401'. If you don't mind the warning, you can remove this from your package.json dev script.
|
||||||
|
|
||||||
|
### Building for Production
|
||||||
|
|
||||||
|
To build your project for production, use:
|
||||||
|
|
||||||
|
```bash
|
||||||
|
yarn build
|
||||||
|
```
|
||||||
|
|
||||||
|
(Repeat for npm, pnpm, and bun with respective commands.)
|
||||||
|
|
||||||
|
Once the build process is completed, your application will be ready for deployment in a production environment.
|
||||||
|
|
||||||
|
## 💪 Support Vuetify Development
|
||||||
|
|
||||||
|
This project is built with [Vuetify](https://vuetifyjs.com/en/), a UI Library with a comprehensive collection of Vue components. Vuetify is an MIT licensed Open Source project that has been made possible due to the generous contributions by our [sponsors and backers](https://vuetifyjs.com/introduction/sponsors-and-backers/). If you are interested in supporting this project, please consider:
|
||||||
|
|
||||||
|
- [Requesting Enterprise Support](https://support.vuetifyjs.com/)
|
||||||
|
- [Sponsoring John on Github](https://github.com/users/johnleider/sponsorship)
|
||||||
|
- [Sponsoring Kael on Github](https://github.com/users/kaelwd/sponsorship)
|
||||||
|
- [Supporting the team on Open Collective](https://opencollective.com/vuetify)
|
||||||
|
- [Becoming a sponsor on Patreon](https://www.patreon.com/vuetify)
|
||||||
|
- [Becoming a subscriber on Tidelift](https://tidelift.com/subscription/npm/vuetify)
|
||||||
|
- [Making a one-time donation with Paypal](https://paypal.me/vuetify)
|
||||||
|
|
||||||
|
## 📑 License
|
||||||
|
[MIT](http://opensource.org/licenses/MIT)
|
||||||
|
|
||||||
|
Copyright (c) 2016-present Vuetify, LLC
|
||||||
16
tienda_ilusion/don_confiao/frontend/don-confiao/index.html
Normal file
16
tienda_ilusion/don_confiao/frontend/don-confiao/index.html
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
<!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>Welcome to Vuetify 3</title>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
@@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"allowJs": true,
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
5406
tienda_ilusion/don_confiao/frontend/don-confiao/package-lock.json
generated
Normal file
5406
tienda_ilusion/don_confiao/frontend/don-confiao/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
38
tienda_ilusion/don_confiao/frontend/don-confiao/package.json
Normal file
38
tienda_ilusion/don_confiao/frontend/don-confiao/package.json
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "don-confiao",
|
||||||
|
"version": "0.0.0",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite --host 0.0.0.0",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"lint": "eslint . --fix --ignore-path .gitignore"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@mdi/font": "7.4.47",
|
||||||
|
"core-js": "^3.37.1",
|
||||||
|
"roboto-fontface": "*",
|
||||||
|
"vue": "^3.4.31",
|
||||||
|
"vuetify": "^3.6.11"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.0.5",
|
||||||
|
"eslint": "^8.57.0",
|
||||||
|
"eslint-config-standard": "^17.1.0",
|
||||||
|
"eslint-config-vuetify": "^1.0.0",
|
||||||
|
"eslint-plugin-import": "^2.29.1",
|
||||||
|
"eslint-plugin-n": "^16.6.2",
|
||||||
|
"eslint-plugin-node": "^11.1.0",
|
||||||
|
"eslint-plugin-promise": "^6.4.0",
|
||||||
|
"eslint-plugin-vue": "^9.27.0",
|
||||||
|
"pinia": "^2.1.7",
|
||||||
|
"sass": "1.77.6",
|
||||||
|
"unplugin-auto-import": "^0.17.6",
|
||||||
|
"unplugin-fonts": "^1.1.1",
|
||||||
|
"unplugin-vue-components": "^0.27.2",
|
||||||
|
"unplugin-vue-router": "^0.10.0",
|
||||||
|
"vite": "^5.3.3",
|
||||||
|
"vite-plugin-vue-layouts": "^0.11.0",
|
||||||
|
"vite-plugin-vuetify": "^2.0.3",
|
||||||
|
"vue-router": "^4.4.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
11
tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
Normal file
11
tienda_ilusion/don_confiao/frontend/don-confiao/src/App.vue
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<v-app>
|
||||||
|
<v-main>
|
||||||
|
<router-view />
|
||||||
|
</v-main>
|
||||||
|
</v-app>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
//
|
||||||
|
</script>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
@@ -0,0 +1,6 @@
|
|||||||
|
<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M261.126 140.65L164.624 307.732L256.001 466L377.028 256.5L498.001 47H315.192L261.126 140.65Z" fill="#1697F6"/>
|
||||||
|
<path d="M135.027 256.5L141.365 267.518L231.64 111.178L268.731 47H256H14L135.027 256.5Z" fill="#AEDDFF"/>
|
||||||
|
<path d="M315.191 47C360.935 197.446 256 466 256 466L164.624 307.732L315.191 47Z" fill="#1867C0"/>
|
||||||
|
<path d="M268.731 47C76.0026 47 141.366 267.518 141.366 267.518L268.731 47Z" fill="#7BC6FF"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 526 B |
@@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<v-footer height="40" app>
|
||||||
|
<a
|
||||||
|
v-for="item in items"
|
||||||
|
:key="item.title"
|
||||||
|
:href="item.href"
|
||||||
|
:title="item.title"
|
||||||
|
class="d-inline-block mx-2 social-link"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
<v-icon
|
||||||
|
:icon="item.icon"
|
||||||
|
:size="item.icon === '$vuetify' ? 24 : 16"
|
||||||
|
/>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="text-caption text-disabled"
|
||||||
|
style="position: absolute; right: 16px;"
|
||||||
|
>
|
||||||
|
© 2016-{{ (new Date()).getFullYear() }} <span class="d-none d-sm-inline-block">Vuetify, LLC</span>
|
||||||
|
—
|
||||||
|
<a
|
||||||
|
class="text-decoration-none on-surface"
|
||||||
|
href="https://vuetifyjs.com/about/licensing/"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
target="_blank"
|
||||||
|
>
|
||||||
|
MIT License
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
</v-footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
title: 'Vuetify Documentation',
|
||||||
|
icon: `$vuetify`,
|
||||||
|
href: 'https://vuetifyjs.com/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Vuetify Support',
|
||||||
|
icon: 'mdi-shield-star-outline',
|
||||||
|
href: 'https://support.vuetifyjs.com/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Vuetify X',
|
||||||
|
icon: ['M2.04875 3.00002L9.77052 13.3248L1.99998 21.7192H3.74882L10.5519 14.3697L16.0486 21.7192H22L13.8437 10.8137L21.0765 3.00002H19.3277L13.0624 9.76874L8.0001 3.00002H2.04875ZM4.62054 4.28821H7.35461L19.4278 20.4308H16.6937L4.62054 4.28821Z'],
|
||||||
|
href: 'https://x.com/vuetifyjs',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Vuetify GitHub',
|
||||||
|
icon: `mdi-github`,
|
||||||
|
href: 'https://github.com/vuetifyjs/vuetify',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Vuetify Discord',
|
||||||
|
icon: ['M22,24L16.75,19L17.38,21H4.5A2.5,2.5 0 0,1 2,18.5V3.5A2.5,2.5 0 0,1 4.5,1H19.5A2.5,2.5 0 0,1 22,3.5V24M12,6.8C9.32,6.8 7.44,7.95 7.44,7.95C8.47,7.03 10.27,6.5 10.27,6.5L10.1,6.33C8.41,6.36 6.88,7.53 6.88,7.53C5.16,11.12 5.27,14.22 5.27,14.22C6.67,16.03 8.75,15.9 8.75,15.9L9.46,15C8.21,14.73 7.42,13.62 7.42,13.62C7.42,13.62 9.3,14.9 12,14.9C14.7,14.9 16.58,13.62 16.58,13.62C16.58,13.62 15.79,14.73 14.54,15L15.25,15.9C15.25,15.9 17.33,16.03 18.73,14.22C18.73,14.22 18.84,11.12 17.12,7.53C17.12,7.53 15.59,6.36 13.9,6.33L13.73,6.5C13.73,6.5 15.53,7.03 16.56,7.95C16.56,7.95 14.68,6.8 12,6.8M9.93,10.59C10.58,10.59 11.11,11.16 11.1,11.86C11.1,12.55 10.58,13.13 9.93,13.13C9.29,13.13 8.77,12.55 8.77,11.86C8.77,11.16 9.28,10.59 9.93,10.59M14.1,10.59C14.75,10.59 15.27,11.16 15.27,11.86C15.27,12.55 14.75,13.13 14.1,13.13C13.46,13.13 12.94,12.55 12.94,11.86C12.94,11.16 13.45,10.59 14.1,10.59Z'],
|
||||||
|
href: 'https://community.vuetifyjs.com/',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: 'Vuetify Reddit',
|
||||||
|
icon: `mdi-reddit`,
|
||||||
|
href: 'https://reddit.com/r/vuetifyjs',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="sass">
|
||||||
|
.social-link :deep(.v-icon)
|
||||||
|
color: rgba(var(--v-theme-on-background), var(--v-disabled-opacity))
|
||||||
|
text-decoration: none
|
||||||
|
transition: .2s ease-in-out
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
color: rgba(25, 118, 210, 1)
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,157 @@
|
|||||||
|
<template>
|
||||||
|
<v-container class="fill-height">
|
||||||
|
<v-responsive
|
||||||
|
class="align-centerfill-height mx-auto"
|
||||||
|
max-width="900"
|
||||||
|
>
|
||||||
|
<v-img
|
||||||
|
class="mb-4"
|
||||||
|
height="150"
|
||||||
|
src="@/assets/logo.png"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-body-2 font-weight-light mb-n1">Welcome to</div>
|
||||||
|
|
||||||
|
<h1 class="text-h2 font-weight-bold">Vuetify</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="py-4" />
|
||||||
|
|
||||||
|
<v-row>
|
||||||
|
<v-col cols="12">
|
||||||
|
<v-card
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
image="https://cdn.vuetifyjs.com/docs/images/one/create/feature.png"
|
||||||
|
prepend-icon="mdi-rocket-launch-outline"
|
||||||
|
rounded="lg"
|
||||||
|
variant="outlined"
|
||||||
|
>
|
||||||
|
<template #image>
|
||||||
|
<v-img position="top right" />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #title>
|
||||||
|
<h2 class="text-h5 font-weight-bold">Get started</h2>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template #subtitle>
|
||||||
|
<div class="text-subtitle-1">
|
||||||
|
Replace this page by removing <v-kbd>{{ `<HelloWorld />` }}</v-kbd> in <v-kbd>pages/index.vue</v-kbd>.
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<v-overlay
|
||||||
|
opacity=".12"
|
||||||
|
scrim="primary"
|
||||||
|
contained
|
||||||
|
model-value
|
||||||
|
persistent
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-card
|
||||||
|
append-icon="mdi-open-in-new"
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
href="https://vuetifyjs.com/"
|
||||||
|
prepend-icon="mdi-text-box-outline"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
rounded="lg"
|
||||||
|
subtitle="Learn about all things Vuetify in our documentation."
|
||||||
|
target="_blank"
|
||||||
|
title="Documentation"
|
||||||
|
variant="text"
|
||||||
|
>
|
||||||
|
<v-overlay
|
||||||
|
opacity=".06"
|
||||||
|
scrim="primary"
|
||||||
|
contained
|
||||||
|
model-value
|
||||||
|
persistent
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-card
|
||||||
|
append-icon="mdi-open-in-new"
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
href="https://vuetifyjs.com/introduction/why-vuetify/#feature-guides"
|
||||||
|
prepend-icon="mdi-star-circle-outline"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
rounded="lg"
|
||||||
|
subtitle="Explore available framework Features."
|
||||||
|
target="_blank"
|
||||||
|
title="Features"
|
||||||
|
variant="text"
|
||||||
|
>
|
||||||
|
<v-overlay
|
||||||
|
opacity=".06"
|
||||||
|
scrim="primary"
|
||||||
|
contained
|
||||||
|
model-value
|
||||||
|
persistent
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-card
|
||||||
|
append-icon="mdi-open-in-new"
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
href="https://vuetifyjs.com/components/all"
|
||||||
|
prepend-icon="mdi-widgets-outline"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
rounded="lg"
|
||||||
|
subtitle="Discover components in the API Explorer."
|
||||||
|
target="_blank"
|
||||||
|
title="Components"
|
||||||
|
variant="text"
|
||||||
|
>
|
||||||
|
<v-overlay
|
||||||
|
opacity=".06"
|
||||||
|
scrim="primary"
|
||||||
|
contained
|
||||||
|
model-value
|
||||||
|
persistent
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
|
||||||
|
<v-col cols="6">
|
||||||
|
<v-card
|
||||||
|
append-icon="mdi-open-in-new"
|
||||||
|
class="py-4"
|
||||||
|
color="surface-variant"
|
||||||
|
href="https://discord.vuetifyjs.com"
|
||||||
|
prepend-icon="mdi-account-group-outline"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
rounded="lg"
|
||||||
|
subtitle="Connect with Vuetify developers."
|
||||||
|
target="_blank"
|
||||||
|
title="Community"
|
||||||
|
variant="text"
|
||||||
|
>
|
||||||
|
<v-overlay
|
||||||
|
opacity=".06"
|
||||||
|
scrim="primary"
|
||||||
|
contained
|
||||||
|
model-value
|
||||||
|
persistent
|
||||||
|
/>
|
||||||
|
</v-card>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</v-responsive>
|
||||||
|
</v-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
//
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<v-app>
|
||||||
|
<v-navigation-drawer app>
|
||||||
|
<v-list>
|
||||||
|
<v-list-item v-for="item in menuItems" :key="item.title" @click="navigate(item.route)">
|
||||||
|
<v-list-item-title>{{ item.title }}</v-list-item-title>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list>
|
||||||
|
</v-navigation-drawer>
|
||||||
|
|
||||||
|
<v-app-bar app>
|
||||||
|
<v-toolbar-title>Compra</v-toolbar-title>
|
||||||
|
</v-app-bar>
|
||||||
|
<v-main>
|
||||||
|
<v-container>
|
||||||
|
<v-form ref="form" v-model="valid">
|
||||||
|
<v-text-field
|
||||||
|
v-model="purchase.date"
|
||||||
|
label="Fecha"
|
||||||
|
type="date"
|
||||||
|
:rules="[rules.required]"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
<v-select
|
||||||
|
v-model="purchase.client"
|
||||||
|
:items="clients"
|
||||||
|
label="Cliente"
|
||||||
|
:rules="[rules.required]"
|
||||||
|
required
|
||||||
|
item-text="name"
|
||||||
|
item-value="id"
|
||||||
|
></v-select>
|
||||||
|
<v-textarea
|
||||||
|
v-model="purchase.notes"
|
||||||
|
label="Notas"
|
||||||
|
></v-textarea>
|
||||||
|
<v-divider></v-divider>
|
||||||
|
<v-container>
|
||||||
|
<v-toolbar>
|
||||||
|
<v-toolbar-title secondary>Productos</v-toolbar-title>
|
||||||
|
</v-toolbar>
|
||||||
|
<div v-for="(line, index) in purchase.lines" :key="line.id">
|
||||||
|
<v-row>
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model="line.product"
|
||||||
|
label="Producto"
|
||||||
|
:rules="[rules.required]"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model.number="line.price"
|
||||||
|
label="Precio"
|
||||||
|
type="number"
|
||||||
|
:rules="[rules.required]"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
</v-col>
|
||||||
|
n <v-col>
|
||||||
|
<v-text-field
|
||||||
|
v-model.number="line.quantity"
|
||||||
|
label="Cantidad"
|
||||||
|
type="number"
|
||||||
|
:rules="[rules.required]"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<v-text-field
|
||||||
|
:value="calculateSubtotal(line)"
|
||||||
|
label="Subtotal"
|
||||||
|
readonly
|
||||||
|
></v-text-field>
|
||||||
|
</v-col>
|
||||||
|
<v-col>
|
||||||
|
<v-btn @click="removeLine(index)" color="red">Eliminar</v-btn>
|
||||||
|
</v-col>
|
||||||
|
</v-row>
|
||||||
|
</div>
|
||||||
|
<v-btn @click="addLine" color="blue">Agregar</v-btn>
|
||||||
|
|
||||||
|
</v-container>
|
||||||
|
|
||||||
|
<v-divider></v-divider>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
:value="calculateTotal"
|
||||||
|
label="Total"
|
||||||
|
readonly
|
||||||
|
></v-text-field>
|
||||||
|
<v-btn @click="submit" color="green">Comprar</v-btn>
|
||||||
|
</v-form>
|
||||||
|
</v-container>
|
||||||
|
</v-main>
|
||||||
|
</v-app>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'DonConfiao',
|
||||||
|
props: {
|
||||||
|
msg: String
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
valid: false,
|
||||||
|
purchase: {
|
||||||
|
date: '',
|
||||||
|
client: null,
|
||||||
|
notes: '',
|
||||||
|
lines: [{product:'', price: 0, quantity: 0}],
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
required: value => !!value || 'Requerido.',
|
||||||
|
},
|
||||||
|
menuItems: [
|
||||||
|
{ title: 'Inicio', route: '/'},
|
||||||
|
{ title: 'Compras', route:'/compras'},
|
||||||
|
],
|
||||||
|
clients: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.fetchClients();
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
calculateTotal() {
|
||||||
|
return this.purchase.lines.reduce((total, line) => {
|
||||||
|
return total + this.calculateSubtotal(line);
|
||||||
|
}, 0);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
fetchClients() {
|
||||||
|
fetch('/don_confiao/api/customers/')
|
||||||
|
.then(response => response.json())
|
||||||
|
.then(data => {
|
||||||
|
this.clients = data.map(client => client.name);
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
console.error(error);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addLine() {
|
||||||
|
this.purchase.lines.push({ product: '', price: 0, quantity:0 });
|
||||||
|
},
|
||||||
|
removeLine(index) {
|
||||||
|
this.purchase.lines.splice(index, 1);
|
||||||
|
},
|
||||||
|
calculateSubtotal(line) {
|
||||||
|
return line.price * line.quantity;
|
||||||
|
},
|
||||||
|
async submit() {
|
||||||
|
if (this.$refs.form.validate()) {
|
||||||
|
try {
|
||||||
|
const response = await fetch('http://localhost:8000/don_confiao/', {
|
||||||
|
method: 'POST',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
},
|
||||||
|
body: JSON.stringify(this.purchase),
|
||||||
|
});
|
||||||
|
if (response.ok) {
|
||||||
|
const data = await response.json();
|
||||||
|
console.log('Compra enviada:', data);
|
||||||
|
} else {
|
||||||
|
console.error('Error al enviar la compra:', response.statusText);
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('Error de red:', error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
navigate(route) {
|
||||||
|
this.$route.push(route);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style>
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,35 @@
|
|||||||
|
# Components
|
||||||
|
|
||||||
|
Vue template files in this folder are automatically imported.
|
||||||
|
|
||||||
|
## 🚀 Usage
|
||||||
|
|
||||||
|
Importing is handled by [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components). This plugin automatically imports `.vue` files created in the `src/components` directory, and registers them as global components. This means that you can use any component in your application without having to manually import it.
|
||||||
|
|
||||||
|
The following example assumes a component located at `src/components/MyComponent.vue`:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<MyComponent />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
//
|
||||||
|
</script>
|
||||||
|
```
|
||||||
|
|
||||||
|
When your template is rendered, the component's import will automatically be inlined, which renders to this:
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<MyComponent />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import MyComponent from '@/components/MyComponent.vue'
|
||||||
|
</script>
|
||||||
|
```
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
# Layouts
|
||||||
|
|
||||||
|
Layouts are reusable components that wrap around pages. They are used to provide a consistent look and feel across multiple pages.
|
||||||
|
|
||||||
|
Full documentation for this feature can be found in the Official [vite-plugin-vue-layouts](https://github.com/JohnCampionJr/vite-plugin-vue-layouts) repository.
|
||||||
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<v-app>
|
||||||
|
<v-main>
|
||||||
|
<router-view />
|
||||||
|
</v-main>
|
||||||
|
|
||||||
|
<AppFooter />
|
||||||
|
</v-app>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
//
|
||||||
|
</script>
|
||||||
20
tienda_ilusion/don_confiao/frontend/don-confiao/src/main.js
Normal file
20
tienda_ilusion/don_confiao/frontend/don-confiao/src/main.js
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
/**
|
||||||
|
* main.js
|
||||||
|
*
|
||||||
|
* Bootstraps Vuetify and other plugins then mounts the App`
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Plugins
|
||||||
|
import { registerPlugins } from '@/plugins'
|
||||||
|
|
||||||
|
// Components
|
||||||
|
import App from './App.vue'
|
||||||
|
|
||||||
|
// Composables
|
||||||
|
import { createApp } from 'vue'
|
||||||
|
|
||||||
|
const app = createApp(App)
|
||||||
|
|
||||||
|
registerPlugins(app)
|
||||||
|
|
||||||
|
app.mount('#app')
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
# Pages
|
||||||
|
|
||||||
|
Vue components created in this folder will automatically be converted to navigatable routes.
|
||||||
|
|
||||||
|
Full documentation for this feature can be found in the Official [unplugin-vue-router](https://github.com/posva/unplugin-vue-router) repository.
|
||||||
@@ -0,0 +1,7 @@
|
|||||||
|
<template>
|
||||||
|
<Purchase />
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
//
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# Plugins
|
||||||
|
|
||||||
|
Plugins are a way to extend the functionality of your Vue application. Use this folder for registering plugins that you want to use globally.
|
||||||
@@ -0,0 +1,17 @@
|
|||||||
|
/**
|
||||||
|
* plugins/index.js
|
||||||
|
*
|
||||||
|
* Automatically included in `./src/main.js`
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Plugins
|
||||||
|
import vuetify from './vuetify'
|
||||||
|
import pinia from '@/stores'
|
||||||
|
import router from '@/router'
|
||||||
|
|
||||||
|
export function registerPlugins (app) {
|
||||||
|
app
|
||||||
|
.use(vuetify)
|
||||||
|
.use(router)
|
||||||
|
.use(pinia)
|
||||||
|
}
|
||||||
@@ -0,0 +1,19 @@
|
|||||||
|
/**
|
||||||
|
* plugins/vuetify.js
|
||||||
|
*
|
||||||
|
* Framework documentation: https://vuetifyjs.com`
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Styles
|
||||||
|
import '@mdi/font/css/materialdesignicons.css'
|
||||||
|
import 'vuetify/styles'
|
||||||
|
|
||||||
|
// Composables
|
||||||
|
import { createVuetify } from 'vuetify'
|
||||||
|
|
||||||
|
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
|
||||||
|
export default createVuetify({
|
||||||
|
theme: {
|
||||||
|
defaultTheme: 'dark',
|
||||||
|
},
|
||||||
|
})
|
||||||
@@ -0,0 +1,36 @@
|
|||||||
|
/**
|
||||||
|
* router/index.ts
|
||||||
|
*
|
||||||
|
* Automatic routes for `./src/pages/*.vue`
|
||||||
|
*/
|
||||||
|
|
||||||
|
// Composables
|
||||||
|
import { createRouter, createWebHistory } from 'vue-router/auto'
|
||||||
|
import { setupLayouts } from 'virtual:generated-layouts'
|
||||||
|
import { routes } from 'vue-router/auto-routes'
|
||||||
|
|
||||||
|
const router = createRouter({
|
||||||
|
history: createWebHistory(import.meta.env.BASE_URL),
|
||||||
|
routes: setupLayouts(routes),
|
||||||
|
})
|
||||||
|
|
||||||
|
// Workaround for https://github.com/vitejs/vite/issues/11804
|
||||||
|
router.onError((err, to) => {
|
||||||
|
if (err?.message?.includes?.('Failed to fetch dynamically imported module')) {
|
||||||
|
if (!localStorage.getItem('vuetify:dynamic-reload')) {
|
||||||
|
console.log('Reloading page to fix dynamic import error')
|
||||||
|
localStorage.setItem('vuetify:dynamic-reload', 'true')
|
||||||
|
location.assign(to.fullPath)
|
||||||
|
} else {
|
||||||
|
console.error('Dynamic import error, reloading page did not fix it', err)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
console.error(err)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
router.isReady().then(() => {
|
||||||
|
localStorage.removeItem('vuetify:dynamic-reload')
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@@ -0,0 +1,5 @@
|
|||||||
|
# Store
|
||||||
|
|
||||||
|
Pinia stores are used to store reactive state and expose actions to mutate it.
|
||||||
|
|
||||||
|
Full documentation for this feature can be found in the Official [Pinia](https://pinia.esm.dev/) repository.
|
||||||
@@ -0,0 +1,8 @@
|
|||||||
|
// Utilities
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
|
||||||
|
export const useAppStore = defineStore('app', {
|
||||||
|
state: () => ({
|
||||||
|
//
|
||||||
|
}),
|
||||||
|
})
|
||||||
@@ -0,0 +1,4 @@
|
|||||||
|
// Utilities
|
||||||
|
import { createPinia } from 'pinia'
|
||||||
|
|
||||||
|
export default createPinia()
|
||||||
@@ -0,0 +1,3 @@
|
|||||||
|
# Styles
|
||||||
|
|
||||||
|
This directory is for configuring the styles of the application.
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
/**
|
||||||
|
* src/styles/settings.scss
|
||||||
|
*
|
||||||
|
* Configures SASS variables and Vuetify overwrites
|
||||||
|
*/
|
||||||
|
|
||||||
|
// https://vuetifyjs.com/features/sass-variables/`
|
||||||
|
// @use 'vuetify/settings' with (
|
||||||
|
// $color-pack: false
|
||||||
|
// );
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
// Plugins
|
||||||
|
import AutoImport from 'unplugin-auto-import/vite'
|
||||||
|
import Components from 'unplugin-vue-components/vite'
|
||||||
|
import Fonts from 'unplugin-fonts/vite'
|
||||||
|
import Layouts from 'vite-plugin-vue-layouts'
|
||||||
|
import Vue from '@vitejs/plugin-vue'
|
||||||
|
import VueRouter from 'unplugin-vue-router/vite'
|
||||||
|
import Vuetify, { transformAssetUrls } from 'vite-plugin-vuetify'
|
||||||
|
|
||||||
|
// Utilities
|
||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import { fileURLToPath, URL } from 'node:url'
|
||||||
|
|
||||||
|
// https://vitejs.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [
|
||||||
|
VueRouter(),
|
||||||
|
Layouts(),
|
||||||
|
Vue({
|
||||||
|
template: { transformAssetUrls }
|
||||||
|
}),
|
||||||
|
// https://github.com/vuetifyjs/vuetify-loader/tree/master/packages/vite-plugin#readme
|
||||||
|
Vuetify({
|
||||||
|
autoImport: true,
|
||||||
|
styles: {
|
||||||
|
configFile: 'src/styles/settings.scss',
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
Components(),
|
||||||
|
Fonts({
|
||||||
|
google: {
|
||||||
|
families: [{
|
||||||
|
name: 'Roboto',
|
||||||
|
styles: 'wght@100;300;400;500;700;900',
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
}),
|
||||||
|
AutoImport({
|
||||||
|
imports: [
|
||||||
|
'vue',
|
||||||
|
'vue-router',
|
||||||
|
],
|
||||||
|
eslintrc: {
|
||||||
|
enabled: true,
|
||||||
|
},
|
||||||
|
vueTemplate: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
define: { 'process.env': {} },
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
'@': fileURLToPath(new URL('./src', import.meta.url))
|
||||||
|
},
|
||||||
|
extensions: [
|
||||||
|
'.js',
|
||||||
|
'.json',
|
||||||
|
'.jsx',
|
||||||
|
'.mjs',
|
||||||
|
'.ts',
|
||||||
|
'.tsx',
|
||||||
|
'.vue',
|
||||||
|
],
|
||||||
|
},
|
||||||
|
server: {
|
||||||
|
port: 3000,
|
||||||
|
},
|
||||||
|
build: {
|
||||||
|
outDir: '../../static/frontend/',
|
||||||
|
},
|
||||||
|
base: '/frontend/',
|
||||||
|
})
|
||||||
9
vuetify.Dockerfile
Normal file
9
vuetify.Dockerfile
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
from node
|
||||||
|
|
||||||
|
WORKDIR /app/
|
||||||
|
|
||||||
|
COPY tienda_ilusion/don_confiao/frontend/don-confiao/package.json /app/
|
||||||
|
|
||||||
|
RUN npm install
|
||||||
|
|
||||||
|
CMD ["npm", "run", "dev"]
|
||||||
Reference in New Issue
Block a user