En la página del evento se agregan formularios para agregar día y hora de disponibilidad con un botón
This commit is contained in:
parent
b6c19c30ec
commit
be12417dac
|
|
@ -10,7 +10,8 @@
|
|||
"fruitcake/laravel-cors": "^2.0",
|
||||
"guzzlehttp/guzzle": "^7.0.1",
|
||||
"laravel/framework": "^8.40",
|
||||
"laravel/tinker": "^2.5"
|
||||
"laravel/tinker": "^2.5",
|
||||
"laravel/ui": "^3.3"
|
||||
},
|
||||
"require-dev": {
|
||||
"facade/ignition": "^2.5",
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
"Read more about it at https://getcomposer.org/doc/01-basic-usage.md#installing-dependencies",
|
||||
"This file is @generated automatically"
|
||||
],
|
||||
"content-hash": "7759431e303e2d722a264a8a991a9e84",
|
||||
"content-hash": "445b2b56036f4fb3c253035674db75e4",
|
||||
"packages": [
|
||||
{
|
||||
"name": "asm89/stack-cors",
|
||||
|
|
@ -1097,6 +1097,64 @@
|
|||
},
|
||||
"time": "2021-03-02T16:53:12+00:00"
|
||||
},
|
||||
{
|
||||
"name": "laravel/ui",
|
||||
"version": "v3.3.0",
|
||||
"source": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/laravel/ui.git",
|
||||
"reference": "07d725813350c695c779382cbd6dac0ab8665537"
|
||||
},
|
||||
"dist": {
|
||||
"type": "zip",
|
||||
"url": "https://api.github.com/repos/laravel/ui/zipball/07d725813350c695c779382cbd6dac0ab8665537",
|
||||
"reference": "07d725813350c695c779382cbd6dac0ab8665537",
|
||||
"shasum": ""
|
||||
},
|
||||
"require": {
|
||||
"illuminate/console": "^8.42",
|
||||
"illuminate/filesystem": "^8.42",
|
||||
"illuminate/support": "^8.42",
|
||||
"illuminate/validation": "^8.42",
|
||||
"php": "^7.3|^8.0"
|
||||
},
|
||||
"type": "library",
|
||||
"extra": {
|
||||
"branch-alias": {
|
||||
"dev-master": "3.x-dev"
|
||||
},
|
||||
"laravel": {
|
||||
"providers": [
|
||||
"Laravel\\Ui\\UiServiceProvider"
|
||||
]
|
||||
}
|
||||
},
|
||||
"autoload": {
|
||||
"psr-4": {
|
||||
"Laravel\\Ui\\": "src/",
|
||||
"Illuminate\\Foundation\\Auth\\": "auth-backend/"
|
||||
}
|
||||
},
|
||||
"notification-url": "https://packagist.org/downloads/",
|
||||
"license": [
|
||||
"MIT"
|
||||
],
|
||||
"authors": [
|
||||
{
|
||||
"name": "Taylor Otwell",
|
||||
"email": "taylor@laravel.com"
|
||||
}
|
||||
],
|
||||
"description": "Laravel UI utilities and presets.",
|
||||
"keywords": [
|
||||
"laravel",
|
||||
"ui"
|
||||
],
|
||||
"support": {
|
||||
"source": "https://github.com/laravel/ui/tree/v3.3.0"
|
||||
},
|
||||
"time": "2021-05-25T16:45:33+00:00"
|
||||
},
|
||||
{
|
||||
"name": "league/commonmark",
|
||||
"version": "1.6.5",
|
||||
|
|
@ -7399,5 +7457,5 @@
|
|||
"php": "^7.3|^8.0"
|
||||
},
|
||||
"platform-dev": [],
|
||||
"plugin-api-version": "2.0.0"
|
||||
"plugin-api-version": "2.1.0"
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
11
package.json
11
package.json
|
|
@ -11,8 +11,17 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"axios": "^0.21",
|
||||
"bootstrap": "^4.6.0",
|
||||
"jquery": "^3.6",
|
||||
"laravel-mix": "^6.0.6",
|
||||
"lodash": "^4.17.19",
|
||||
"postcss": "^8.1.14"
|
||||
"popper.js": "^1.16.1",
|
||||
"postcss": "^8.1.14",
|
||||
"resolve-url-loader": "^3.1.2",
|
||||
"sass": "^1.32.11",
|
||||
"sass-loader": "^11.0.1",
|
||||
"vue": "^2.6.12",
|
||||
"vue-loader": "^15.9.8",
|
||||
"vue-template-compiler": "^2.6.12"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,3 +2,24 @@
|
|||
background-color: white;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.horas {
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
input.formulario.hora {
|
||||
width: 49%;
|
||||
}
|
||||
|
||||
input.formulario.dia {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.mas {
|
||||
width: 80px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.horario-container {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,3 +9,18 @@ function copiarEnlace() {
|
|||
document.execCommand("copy");
|
||||
alert("ok");
|
||||
}
|
||||
const HORARIO_CONTAINER = '<div class="horario-container">\n' +
|
||||
' <input required name="horario[]dia" type="text" class="formulario dia">\n' +
|
||||
' <div class="horas">\n' +
|
||||
' <input required name="horario[]llegada" type="time" class="formulario hora">\n' +
|
||||
' <input required name="horario[]salida" type="time" class="formulario hora">\n' +
|
||||
' </div>\n' +
|
||||
' </div>';
|
||||
function agregarHorarioContainer() {
|
||||
$('#horarios').append(HORARIO_CONTAINER);
|
||||
|
||||
}
|
||||
|
||||
$( document ).ready(function() {
|
||||
agregarHorarioContainer();
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +1,32 @@
|
|||
/**
|
||||
* First we will load all of this project's JavaScript dependencies which
|
||||
* includes Vue and other libraries. It is a great starting point when
|
||||
* building robust, powerful web applications using Vue and Laravel.
|
||||
*/
|
||||
|
||||
require('./bootstrap');
|
||||
|
||||
window.Vue = require('vue').default;
|
||||
|
||||
/**
|
||||
* The following block of code may be used to automatically register your
|
||||
* Vue components. It will recursively scan this directory for the Vue
|
||||
* components and automatically register them with their "basename".
|
||||
*
|
||||
* Eg. ./components/ExampleComponent.vue -> <example-component></example-component>
|
||||
*/
|
||||
|
||||
// const files = require.context('./', true, /\.vue$/i)
|
||||
// files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default))
|
||||
|
||||
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
|
||||
|
||||
/**
|
||||
* Next, we will create a fresh Vue application instance and attach it to
|
||||
* the page. Then, you may begin adding components to this application
|
||||
* or customize the JavaScript scaffolding to fit your unique needs.
|
||||
*/
|
||||
|
||||
const app = new Vue({
|
||||
el: '#app',
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,5 +1,18 @@
|
|||
window._ = require('lodash');
|
||||
|
||||
/**
|
||||
* We'll load jQuery and the Bootstrap jQuery plugin which provides support
|
||||
* for JavaScript based Bootstrap features such as modals and tabs. This
|
||||
* code may be modified to fit the specific needs of your application.
|
||||
*/
|
||||
|
||||
try {
|
||||
window.Popper = require('popper.js').default;
|
||||
window.$ = window.jQuery = require('jquery');
|
||||
|
||||
require('bootstrap');
|
||||
} catch (e) {}
|
||||
|
||||
/**
|
||||
* We'll load the axios HTTP library which allows us to easily issue requests
|
||||
* to our Laravel back-end. This library automatically handles sending the
|
||||
|
|
|
|||
|
|
@ -0,0 +1,23 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="row justify-content-center">
|
||||
<div class="col-md-8">
|
||||
<div class="card">
|
||||
<div class="card-header">Example Component</div>
|
||||
|
||||
<div class="card-body">
|
||||
I'm an example component.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
mounted() {
|
||||
console.log('Component mounted.')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
// Body
|
||||
$body-bg: #f8fafc;
|
||||
|
||||
// Typography
|
||||
$font-family-sans-serif: 'Nunito', sans-serif;
|
||||
$font-size-base: 0.9rem;
|
||||
$line-height-base: 1.6;
|
||||
|
||||
// Colors
|
||||
$blue: #3490dc;
|
||||
$indigo: #6574cd;
|
||||
$purple: #9561e2;
|
||||
$pink: #f66d9b;
|
||||
$red: #e3342f;
|
||||
$orange: #f6993f;
|
||||
$yellow: #ffed4a;
|
||||
$green: #38c172;
|
||||
$teal: #4dc0b5;
|
||||
$cyan: #6cb2eb;
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
// Fonts
|
||||
@import url('https://fonts.googleapis.com/css?family=Nunito');
|
||||
|
||||
// Variables
|
||||
@import 'variables';
|
||||
|
||||
// Bootstrap
|
||||
@import '~bootstrap/scss/bootstrap';
|
||||
|
|
@ -57,17 +57,17 @@
|
|||
</div>
|
||||
|
||||
<div class="p-6 border-t border-gray-200 dark:border-gray-700 md:border-t-0 md:border-l">
|
||||
<form id="contrasena">
|
||||
<input required name="contrasena" type="text" class="formulario">
|
||||
<input type="submit" value="Gestionar evento">
|
||||
<form id="horarios">
|
||||
|
||||
</form>
|
||||
<button onclick="agregarHorarioContainer()" class="mas">+</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-center mt-4 sm:items-center sm:justify-between">
|
||||
<div class="ml-4 text-center text-sm text-gray-500 sm:text-right sm:ml-0">
|
||||
Laravel v{{ Illuminate\Foundation\Application::VERSION }} (PHP v{{ PHP_VERSION }})
|
||||
<input type="submit" value="Gestionar evento">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -6,12 +6,11 @@ const mix = require('laravel-mix');
|
|||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Mix provides a clean, fluent API for defining some Webpack build steps
|
||||
| for your Laravel applications. By default, we are compiling the CSS
|
||||
| for your Laravel application. By default, we are compiling the Sass
|
||||
| file for the application as well as bundling up all the JS files.
|
||||
|
|
||||
*/
|
||||
|
||||
mix.js('resources/js/app.js', 'public/js')
|
||||
.postCss('resources/css/app.css', 'public/css', [
|
||||
//
|
||||
]);
|
||||
.vue()
|
||||
.sass('resources/sass/app.scss', 'public/css');
|
||||
|
|
|
|||
Loading…
Reference in New Issue