i have a form where i input restaurant details
#extends('layouts.app')
#section('content')
<html>
<head>
</head>
<body>
<h3 class="text-center"><u>Create Restaurant</u></h3>
<div class="container">
{!! Form::open(['action' => 'RestaurantsController#store','method'=>'POST','enctype'=>'multipart/form-data'])!!}
<div class="form-group">
{{Form::label('name','Name')}}
{{Form::text('name','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('opening_time','Opening time')}}
{{Form::time('opening time','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('closing_time','Closing time')}}
{{Form::time('closing time','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('days_of_operation','Days of operation')}}
{{Form::text('days_of_operation','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('website','Website')}}
{{Form::text('website','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('email','Email')}}
{{Form::text('email',null,['class'=>'form-control','id'=>'menu','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('phone','Phone')}}
{{Form::text('phone',null,['class'=>'form-control','id'=>'phone','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('pysical_address','Physical address')}}
{{Form::textarea('physical_address','',['class'=>'form-control','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('lat','Latitude')}}
{{Form::number('lat',null,['class'=>'form-control','id'=>'lat','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::label('lon','Longitude')}}
{{Form::number('lon',null,['class'=>'form-control','id'=>'lon','placeholder'=>'Insert here'])}}
</div>
<div class="form-group">
{{Form::file('cover_image')}}
</div>
{{-- {{Form::hidden('_method','POST')}} --}}
{{Form::submit('submit',['class'=>'btn btn-primary','type'=>'submit','id'=>'submit'])}}
{!! Form::close() !!}
</div>
</body>
</html>
#endsection
i need to save lattitude,longitude,restaurant id in coordinates table
i need to save the following details in restaurants table
$restaurant=new Restaurant;
$restaurant->name= $request->input('name');
$restaurant->opening_time=$request->input('opening_time');
$restaurant->physical_address=$request->input('physical_address');
$restaurant->closing_time=$request->input('closing_time');
$restaurant->days_of_operation=$request->input('days_of_operation');
$restaurant->website=$request->input('website');
$restaurant->email=$request->input('email');
$restaurant->phone=$request->input('phone');
$restaurant->cover_image=$fileNameToStore;
$restaurant->save();
how do i go about it?
How do i query restaurants that are near a user's location? I know how to get the current users longitude and lattitude and then?
Related
i do this but not working for me
<div class="row form-group">
<div class="col-md-2">
<%='start_date'%><span class="necessary-field"> *</span>:
</div>
<div class="col-md-6 select">
<%= calendar_date_select_tag'start_date',#employee.job.start_date, :readonly=>true, :format=>:default, :popup=>"force", :class=>"form-control" %>
</div>
</div>
i used :readonly=>true but also not working
how for example to us (input )
I am using an Angular 2 template (which looks fine to me):
<div class="container gt-container-fluid gt-container-form">
<div class="row">
<div class="col-sm-6">
<fieldset class="gt-fieldset">
<legend class="gt-legend">Details</legend>
<div class="row gt-row">
<div class="col-6"><label for="title">Requirements Title:</label></div>
<div class="col-6"><input id="title" type="text" class="k-textbox" [(ngModel)]="Requirement.Title" /></div>
</div>
<div class="row gt-row">
<div class="col-12"><label for="details">Requirements Details:</label></div>
</div>
<div class="row gt-row">
<div class="col-12">
<textarea id="details" class="k-textbox gt-textbox" [(ngModel)]="Requirement.Details"></textarea>
</div>
</div>
<div class="row gt-row">
<div class="col-6"><label for="rating">Requirement Rating:</label></div>
<div class="col-6"><kendo-dropdownlist id="ratings" [data]="ratingsData" [textField]="'ProductName'" [valueField]="'ProductID'" [defaultItem]="ratingsPlaceHolder"></kendo-dropdownlist></div>
</div>
<div class="row gt-row">
<div class="col-6"><label for="status">Approval Status:</label></div>
<div class="col-6"><kendo-dropdownlist id="approvalStatus" [data]=""></kendo-dropdownlist></div>
</div>
</fieldset>
<fieldset class="gt-fieldset">
<legend class="gt-legend">Attachments</legend>
<div class="row gt-row">
<div class="col-12"><label for="attachments">Drag and drop files of click "Select" to browse:</label></div>
</div>
<div class="row gt-row">
<div class="col-12">
<kendo-upload id="Attachments"
[saveUrl]=""
[removeUrl]=""
[disabled]="">
</kendo-upload>
</div>
</div>
</fieldset>
</div>
<div class="col-sm-6">
<kendo-tabstrip>
<kendo-tabstrip-tab [title]="'Framework Items'" [selected]="true">
<template kendoTabContent>
<div class="row gt-row">
<div class="col-6"><label for="framework">Framework Items:</label></div>
<div class="col-6"><kendo-multiselect [data]="frameworkItems" [value]="" [placeholder]="'Framework Items'"></kendo-multiselect></div>
</div>
<div class="row gt-row">
<div class="col-12 gt-col-addremovebuttons">
<button kendoButton (click)="onButtonClick()" [primary]="true">+</button>
<button kendoButton (click)="onButtonClick()" [primary]="true">-</button>
</div>
</div>
<div class="row gt-row">
<div class="col-12">
<kendo-grid [data]="frameworkItemsData" [height]="200">
<kendo-grid-column field="FrameworkLocation" title="ID">
</kendo-grid-column>
<kendo-grid-column field="FrameworkTitle" title="Name">
</kendo-grid-column>
</kendo-grid>
</div>
</div>
</template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab [title]="'Related Actions'">
<template kendoTabContent>
<div class="row gt-row">
<div class="col-6"><label for="actions">Related Actions:</label></div>
<div class="col-6"><kendo-multiselect [data]="actionItems" [value]="" [placeholder]="'Actions'"></kendo-multiselect></div>
</div>
</template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
</div>
</div>
<div class="row gt-row">
<div class="col-12 gt-col-buttons">
<button kendoButton (click)="saveChanges()" [primary]="true">Save</button>
<button kendoButton (click)="onButtonClick()" [primary]="false">Edit</button>
<button kendoButton (click)="deleteRecord()" [primary]="false">Delete</button>
<button kendoButton (click)="onButtonClick()" [primary]="false">Close</button>
</div>
</div>
</div>
However, it is throwing the following error (amongst others):
Unhandled Promise rejection: Template parse errors: Unexpected closing
tag "legend" (">\n \n
Details[ERROR ->]\n
\n \n Requirements Title:[ERROR ->]\n
\n
Interestingly the code highlighting in the code input in stack overflow shows me the same kind of errors but I can't for the life of me spot the error.
Any help much appreciated!
Here's a screenshot of how the website is on the desktop:
And here's how it looks like on the mobile (iPhone 6) version:
Here's my code for this page:
<?php require_once('includes/header.php'); ?>
<div class='container'>
<div class='panel panel-default col-xs-5'>
<div class='panel-body'>
<h3>Bem Vindo!</h3>
<p> Just some text. </p>
</div>
</div>
<div class='container panel panel-default col-xs-offset-1 col-xs-5'>
<div class='panel-body'>
<form action="handler.php" method="post">
<div class='form-group'>
<label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
<select class='form-control' id='sel1' name='anos'>
<!-- Função para gerar um dropdown com anos -->
<?php require_once('utils.php'); dropdownAnos(); ?>
</select>
</div>
<button type="submit" class="btn btn-primary">Ver relatórios</button>
</form>
</div>
</div>
</div>
<?php require_once('includes/footer.php'); ?>
The code is very messy (I'm just starting on html, php, Bootstrap, etc). So, I'd like to make the mobile version better by putting one above the other. (Don't worry about the Navbar, I'll change it later).
Try this
<div class='container'>
<div class='row'>
<div class='col-xs-12 col-sm-12 col-md-6 col-lg-5 panel panel-default'>
<div class='panel-body'>
<h3>Bem Vindo!</h3>
<p> Just some text. </p>
</div>
</div>
<div class='col-xs-12 col-sm-12 col-md-6 col-lg-5 col-xs-offset-1 panel panel-default'>
<div class='panel-body'>
<form action="handler.php" method="post">
<div class='form-group'>
<label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
<select class='form-control' id='sel1' name='anos'>
<!-- Função para gerar um dropdown com anos -->
<?php require_once('utils.php'); dropdownAnos(); ?>
</select>
</div>
<button type="submit" class="btn btn-primary">Ver relatórios</button>
</form>
</div>
</div>
</div>
</div>
U can achieve what you want by col-xs (for xsmall devices), col-md (for medium devices), col-lg (large devices)...
Also cols should be nested in row, and row nested in container.
What you have to understand is how grid system work in Boostrap.
Basically col-xs-5 alone mean what ever the width of the screen take 5 out 12 col.
So what you must do is change this col-xs-5 to col-xs-12 (which mean full width) and col-md-5 or col-lg-5 (which mean take 12 col in little screen but take 5 in bigger one).
Which will give you something like this :
<div class='panel panel-default col-xs-12 col-md-5'>
<div class='panel-body'>
<h3>Bem Vindo!</h3>
<p> Just some text. </p>
</div>
</div>
<div class='container panel panel-default col-xs-12 col-md-offset-1 col-md-5'>
<div class='panel-body'>
<form action="handler.php" method="post">
<div class='form-group'>
<label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
<select class='form-control' id='sel1' name='anos'>
<!-- Função para gerar um dropdown com anos -->
<?php require_once('utils.php'); dropdownAnos(); ?>
</select>
</div>
<button type="submit" class="btn btn-primary">Ver relatórios</button>
</form>
</div>
</div>
One more thing, usually you wrap col-* inside a row div.
So
<div class="row">
<div class='panel panel-default col-xs-12 col-md-5'>
<div class='panel-body'>
<h3>Bem Vindo!</h3>
<p> Just some text. </p>
</div>
</div>
<div class='container panel panel-default col-xs-12 col-md-offset-1 col-md-5'>
<div class='panel-body'>
<form action="handler.php" method="post">
<div class='form-group'>
<label for='sel1'><h3>Escolha um ano abaixo:</h3></label>
<select class='form-control' id='sel1' name='anos'>
<!-- Função para gerar um dropdown com anos -->
<?php require_once('utils.php'); dropdownAnos(); ?>
</select>
</div>
<button type="submit" class="btn btn-primary">Ver relatórios</button>
</form>
</div>
</div>
</div>
This question already has answers here:
How to create a printable Twitter-Bootstrap page
(9 answers)
Closed 7 years ago.
I'm trying to print a document, that is formed with bootstrap. Requirement is that print should look well/nice. (Because this document is archivised)
The problem is, I've done a table, that is made full of controls (input fields).
It's simple drug prescription formula, and the doctor can prescribe as many drugs as he wants.
In the web browser it looks good:print-browser
But, when I want to print it... it breaks: print-printer.
The code, looks like this:
<div class="row">
<div class="col-sm-3 text-center">
<label>Wpisz nazwę leku</label>
</div>
<div class="row col-sm-9">
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
<div class="row" ng-repeat="drug in visit.prescribedDrugs">
<div class="col-sm-3">
<select class="form-control" ng-options="drug.id as drug.name group by getDrugFullTypeName(drug) for drug in technical.drugs track by drug.id"
ng-model="drug.drugItemId"></select>
</div>
<div class="row col-sm-9">
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose" class="form-control" type="text" ng-model="drug.initialDose">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<div class="input-group">
<input id="PrescribedTargetDose"
class="form-control"
type="text"
ng-model="drug.targetDose"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<div class="input-group-addon input-sm">{{technical.drugs[drug.drugItemId].dosage}}</div>
</div>
</div>
<div class="col-sm-3">
<p class="input-group ">
<input type="text"
name="PrescribedDrugCalendar"
id="newPrescribedDrugCalendar"
class="form-control"
datepicker-popup="yyyy-MM-dd"
ng-model="drug.targetDoseFrom[$index]"
is-open="isPrescribedTargetDoseFromCalendarOpened[$index]"
close-text="Zamknij"
placeholder="rrrr-mm-dd"
current-text="Dzisiaj"
clear-text="Wyczyść"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated" />
<!--ng-required="true"-->
<span class="input-group-btn hidden-print">
<button class="btn btn-default"
ng-click="openPrescribedTargetDoseFromCalendar($event, $index)"
ng-disabled="!technical.drugs[drug.drugItemId].isAccelerated">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
</div>
<div class="col-sm-2 text-center">
<input type="checkbox" id="CBisEffectivelyMaximalForPrescription" ng-model="drug.isEffectivelyMaximal">
</div>
<div class="col-sm-1 text-center hidden-print">
<button type="button"
class="btn btn-default text-center"
ng-click="removePrescribedDrug($index)"
ng-disabled="visit.prescribedDrugs.length==1">
<span class="glyphicon glyphicon-minus text-center" aria-hidden="true"></span> Usuń
</button>
</div>
</div>
</div>
And description for it:
I have labelled row:
Wpisz nazwę leku
<div class="col-sm-3 text-center">
<label>Dawka startowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa</label>
</div>
<div class="col-sm-3 text-center">
<label>Dawka docelowa od</label>
</div>
<div class="col-sm-2 text-center">
<label>Dawka max. (tolerowana)</label>
</div>
<div class="col-sm-1 text-center">
<label for="deleteDrug">Usuń</label>
</div>
</div>
</div>
And control row: which goes like:
Input field (select)
Input field (integer)
Input field (integer - activity based on buisness logic)
Calendar
Checkbox
Remove item button - it's hidden print.
But, it won't print as rows - instead of it creates as many rows, as many controls.
Where I have made mistake? I'm quite new in bootstrap/angular but I've read topics about printing.
In the index page I have:
<link href="Content/bootstrap.min.css" rel="stylesheet" media="all"/>
And i also tried to make my custom.css file with media="print" - but I don't know how to fix this problem.
Edit: Also - how to delete this little cursor on input fields, fe. This -> http://imgur.com/dFMVKQY
did you tried adding a print stylesheet ?
<link rel="stylesheet" type="text/css" media="print" href="print.css">
More info.
After various attempts with pull-right, float style and row-fluid, I decided to ask here:
What I try to do is simply to have a Map appear to the right of a set of rows.
Here is how it looks right now:
Which is not too far from what I want, but the name row plus any following rows should appear below each other.
Here is how my HTML looks:
<div class="panel-body">
<div class="row-fluid">
<div class="col-lg-10 pull-right">
<google-map id="my-map" bounds="map.bounds" events="map.events"
center="map.center" zoom="map.zoom" draggable="true"
control="map.control"> <marker ng-if="positionMarker"
coords="positionMarker" icon="positionMarker.icon"> </marker> </google-map>
</div>
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</div>
</div>
I bet this is a typical scenario but I have failed to find an example.
Other attempts that makes name appear below number, moves it below the map.
Is it perhaps possible to avoid having the map take up vertical space in the Bootstrap grid system?
You should use a 2-col layout :
Left column for your inputs
Right column for your Google Map
Plus, remember to put your .input-group inside a .form-group to get paddings/margins set to Bootstrap default values.
Here's a working example (click on Full page for a better view):
body {
padding-top: 25px;
}
.map {
width: 100%;
height: 150px;
background: tomato;
}
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Panel heading</h3>
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<form role="form">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Number</span> <input type="number"
class="form-control" placeholder="Nr">
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">Name</span> <input type="text"
class="form-control" placeholder="Name">
</div>
</div>
</form>
</div>
<div class="col-xs-6">
<div class="map"></div>
</div>
</div>
</div>
</div>
</div>