Reply not working in laravel using botman - laravel

I want to create an automatic chat system with Botman, but I have a problem. I do not receive a response when I send a message, and i get this message in console, "chat.js:1 POST http://127.0.0.1:8000/botman 404 (Not Found) (anonymous) # chat.js:1 t.exports # chat.js:1 t.exports # chat.js:1 Promise.then (async) r.request # chat.js:1 r. # chat.js:1 (anonymous) # chat.js:1 callAPI # chat.js:1 e.say # chat.js:1 r.handleKeyPress # chat.js:1 m # chat.js:1 chat.js:1 Uncaught (in promise) Error: Request failed with status code 404 at t.exports (chat.js:1:13996) at t.exports (chat.js:1:17470) at d. (chat.js:1:12823)" So here is my code
//route :
Route::get('/show_my_chat_form', 'BotManController#index')->name('chatform');
Route::get('/botman', 'BotManController#handle');
Route::post('/botman', 'BotManController#handle');
//here is my Controller
use BotMan\BotMan\BotMan;
use Illuminate\Http\Request;
use BotMan\BotMan\Messages\Incoming\Answer;
class BotManController extends Controller
{
public function index()
{
return view('chatform');
}
public function handle($language)
{
$botman=app("botman");
$botman->hears("{message}", function($botman,$message)
{
if ($message == "Hello")
{
$this->askName($botman);
}
else
{
$botman->reply("Please write hi to start conversation! ");
}
});
$botman->listen();
}
public function askName($language,$botman)
{
$botman->ask("what's your name? ", function(Answer $answer)
{
$name=$answer->getText();
$this->says("nice to met you M.-Mm ".$name);
});
//the config.php and web.php located in /config/botman/..
//config.php
<?php
return [
'conversation_cache_time' => 40,
'user_cache_time' => 30,
];
//web.php
<?php
return [
'matchingData' => [
'driver' => 'web',
],
];
//view
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Form</title>
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/assets/css/chat.min.css">
<style>
html,
body {
background-color: #fff;
color: #636b6f;
font-family: 'Nunito', sans-serif;
font-weight: 200;
height: 100vh;
margin: 0;
}
</style>
</head>
<body>
</body>
<script>
var botmanWidget = {
aboutText: 'write',
introMessage: "✋hi",
//frameEndpoint: ''
};
</script>
<script src='https://cdn.jsdelivr.net/npm/botman-web-widget#0/build/js/widget.js'></script>
</html>

Related

How to style Kendo Scheduler's weekend

I have kendo scheduler below, is there any way to set different background style for weekends.
#(Html.Kendo().Scheduler<CalenderTaskModel>()
.Name("scheduler")
.Footer(false)
.Editable(false)
.EventTemplateId("eventTemplate")
.Timezone("Etc/UTC")
.Views(views =>
{
views.AgendaView(view => view.Title("Week"));
views.MonthView(view => view.Selected(true).EventHeight(15).Title("Month"));
})
.Resources(resource =>
{
resource.Add(m => m.ResourceID)
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new[] {
new { Text = "Resource 1", Value = "Resource1"} ,
new { Text = "Resource 2", Value = "Resource2"}
});
})
.DataSource(d => d
.Read("GetCalenderSummary", "Home"))
)
<script id="eventTemplate" type="text/x-kendo-template">
# if(ResourceID === 'Resource1') { #
<a class='t-resource1'>#: title #</a>
# } else if (ResourceID === 'Resource2') { #
<a class='t-resource2'>#: title #</a>
# } #
</script>
I am not looking to set background style of the event on weekend but i want to set the background of the day (weekend) itself.
So below is the sample picture i got from telerik's demo. The highlighted portion should be in different background color
You can use dayTemplate:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>
<style>
.k-scheduler-content td {
padding: 0;
}
.weekend {
background-color: red;
height: 100%;
padding: 5px;
}
</style>
</head>
<body>
<div id="scheduler"></div>
<script>
$("#scheduler").kendoScheduler({
date: new Date("2013/6/6"),
views: [
{
type: "month",
dayTemplate: (e) => "<div" + (e.date.getDay() === 0 || e.date.getDay() === 6 ? " class='weekend'>" : ">") + e.date.getDate() + "</div>"
}
],
dataSource: [
{
id: 1,
start: new Date("2013/6/6 08:00 AM"),
end: new Date("2013/6/6 09:00 AM"),
title: "Interview"
}
]
});
</script>
</body>
</html>
Assuming that Sunday is always the first column and Saturday the last one, you could use the following css:
.k-scheduler-monthview .k-scheduler-table td:first-child,
.k-scheduler-monthview .k-scheduler-table td:last-child {
background-color: grey;
}
On dataBound event you can go through all days and check what kind of week day it is.
dataBound: function(e) {
var view = this.viewName();
if(view == 'week' || view == 'month'){
var days = this.view().content.find("td");
for(var i = 0; i < days.length; i++){
var slot = this.slotByElement(days[i]);
var date = new Date(slot.startDate);
var isWeekend = date.getDay() == 0 || date.getDay() == 6;
if(isWeekend){
days[i].style.background = '#4CAF50'
}
}
}
}
slotByElement method gets you a scheduler's day when you pass a Html element. From there you can check whether is weekend or not.
Working fiddle where weekends get marked for "week" and "month" views.

renderToString with Redux store renders populated without props (server side)

Although the story id properly prefilled, renderToString() still renders the app without the state being filled in via mapStateToProps().
I use selectors to get data from state.
The problem is, that the props are not being populated. On the client, everything works.
Anyone ideas?
THANKS!
Here's the code for the server side operation:
app.use('*', (req, res) => {
// // Create a new Redux store instance
const sagaMiddleware = createSagaMiddleware();
let middleware = applyMiddleware(sagaMiddleware);
// middleware = compose(middleware,thunkMiddleware)
const initialState = {};
const store = createStore(reducers,initialState,middleware);
store.runSaga = sagaMiddleware.run;
store.close = () => store.dispatch(END);
const routes = getRoutes(store.getState)
const tres = res;
const url = req.originalUrl;
const urlSplit = url.split('/');
match({ routes: routes, location: req.url }, (err, redirect, props) => {
if (err) {
tres.status(500).send(err.message)
} else if (redirect) {
tres.redirect(redirect.pathname + redirect.search)
} else if (props) {
if(urlSplit[1]==='story'){
let slug = urlSplit[2];
store.runSaga(waitAll([[getStoryBySlug,host,slug], [getAbout, host]])).done.then(() => {
res.end(renderPage(store,props,tres));
});
}else{
store.runSaga(waitAll([[getAbout, host], [getHome, host]])).done.then(() => {
res.end(renderPage(store,props,tres));
});
}
} else {
tres.status(404).send('Not Found')
}
})
});
And here are the actual renderPage and renderFullPage functions:
const renderPage = (store,props,res) => {
// Render the component to a string
const html = renderToString(
<Provider store={store}>
<RouterContext {...props}/>
</Provider>
)
let head = Helmet.rewind();
const preloadedState = fromJS(store.getState());
return renderFullPage(html, preloadedState, head);
}
const renderFullPage = (html, preloadedState, head) => {
return `
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
${head.title.toString()}
${head.meta.toString()}
${head.link.toString()}
<script src="https://use.typekit.net/yzi3zgu.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
<link href="/assets/fonts/GillSans/stylesheet.css" rel="stylesheet"/>
<link href="/assets/vendors/fullpage/jquery.fullPage.css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
<link rel="shortcut icon" href="/assets/icons/favicon-inv.png" />
<link rel="stylesheet" href="/styles.css" />
</head>
<body>
<div id="root">${html}</div>
<script>
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState)}
</script>
<script src="/vendor.js"></script>
<script src="/main.js"></script>
</body>
</html>
};

How do I properly send __RequestVerificationToken with an ajax request in MVC5

I'm trying to send an ASP.NET AJAX request to my application. In the application's controller, I have:
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Edit([Bind(Include = "ID,Name,Instructions,Glass,Notes")] Drink drink,
[Bind(Include= "ID,Amount,Brand,IngredientID,DrinkID")] IEnumerable<DrinkIngredient> DrinkIngredients)
{
if (ModelState.IsValid)
{
//and so on
my javascript looks like this:
console.log($('#editDrinkForm').serialize())
var x = new XMLHttpRequest();
x = $.post(window.location,
{
data: $('#editDrinkForm').serialize()
})
.done(function () {
console.log("done");
})
.fail(function () {
console.log(x.responseText);
})
and yet, I'm seeing this output:
You'll notice that __RequestVerificationToken is the first value! So what gives?
everything else
output transcription (from a later run)
"__RequestVerificationToken=ZxW-JtClcOb-vYXDarYGYAEXtY84LzeiigiOKRhg4-sLSd1ixS4rwPtU-prisQ_D_vmoOYKP6cZ38ZTn5lhyg8Sh7V_F2VOgve6FkGNDOWcJy8JL8tEwPS7gy8uPd6Xl1_K8VdmWh6UGJBp372w8_w2&ID=1&Name=7%267&DrinkIngredients.index=3&DrinkIngredients%5B3%5D.ID=3&DrinkIngredients%5B3%5D.DrinkID=1&DrinkIngredients%5B3%5D.DrinkIngredientID=3&DrinkIngredients%5B3%5D.Brand=Seagram's+7+crown&DrinkIngredients%5B3%5D.ingredientID=2&DrinkIngredients%5B3%5D.Amount=1+part&DeleteDrinkIngredients.index=3&DrinkIngredients.index=4&DrinkIngredients%5B4%5D.ID=4&DrinkIngredients%5B4%5D.DrinkID=1&DrinkIngredients%5B4%5D.DrinkIngredientID=4&DrinkIngredients%5B4%5D.Brand=7-up&DrinkIngredients%5B4%5D.ingredientID=1&DrinkIngredients%5B4%5D.Amount=4+parts&DeleteDrinkIngredients.index=4&Instructions=combine%2C+stir&Glass=&Notes=fff"
(and)
"<!DOCTYPE html>
<html>
<head>
<title>The required anti-forgery form field "__RequestVerificationToken" is not present.</title>
<meta name="viewport" content="width=device-width" />
<style>
body {font-family:"Verdana";font-weight:normal;font-size: .7em;color:black;}
p {font-family:"Verdana";font-weight:normal;color:black;margin-top: -5px}
b {font-family:"Verdana";font-weight:bold;color:black;margin-top: -5px}
H1 { font-family:"Verdana";font-weight:normal;font-size:18pt;color:red }
H2 { font-family:"Verdana";font-weight:normal;font-size:14pt;color:maroon }
pre {font-family:"Consolas","Lucida Console",Monospace;font-size:11pt;margin:0;padding:0.5em;line-height:14pt}
.marker {font-weight: bold; color: black;text-decoration: none;}
.version {color: gray;}
.error {margin-bottom: 10px;}
.expandable { text-decoration:underline; font-weight:bold; color:"[…]
x = $.post(window.location, {data: $('#editDrinkForm').serialize()})
is wrong. Do this:
x = $.post(window.location, data: $('#editDrinkForm').serialize())
(some credit to stephen's comment)

How to add dropzone to laravel upload

I have upload function and view.
Someone could tell me how I should edit my function in controller and view to add dropzone.
Here is my controller and view:
Controller:
public function getUpload()
{
return View::make('foto/upload');
}
public function postUpload()
{
$file = Input::file('image');
$filename = $file->getClientOriginalName();
$path = 'uploads';
return $file->move($path, $filename);
}
View:
{{Form::open(array('url' => 'foto/upload', 'files' => true))}}
{{Form::file('image')}}
{{Form::submit('Upload')}}
{{Form::close()}}
my
<head>
<link rel="stylesheet" href="http://adres/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="http://adres/assets/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="http://adres/assets/css/dropzone.css">
<script type="text/javascript" src="http://adres/assets/js/jquery.js"></script>
<script type="text/javascript" src="http://adres/assets/js/dropzone.js"></script>
<style>
body { padding-top: 70px; }
</style>
</head>
This isn't really a Laravel specific question.
But this is how you add a class attribute in Form::open method. You just have to add it into the options array. like so: {{Form::open(array('url' => 'foto/upload', 'files' => true, 'class' => 'dropzone'))}}, as long as it's these "reserved" word: ['method', 'url', 'route', 'action', 'files'], Form::open will just throw your options array property=>value pair into the form element.

how do i populate the fullCalendar using my database values?

I am building an application in which i am using the famous fullCalendar. Now i need to populate my calendar using the values that are present in my database. I am trying to do it using an AJAX call. But its not working . Any help would be appreciated.
This is my jsp . The one which im using to display my calendar.
<!DOCTYPE html>
<html>
<head>
<link href='css/fullcalendar.css' rel='stylesheet' />
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='js/jquery.min.js'></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<link href="jquery-ui-1.10.0.custom.css" rel="stylesheet" type="text/css" media = "all"/>
<link rel='stylesheet' type='text/css' href='cssdata/fullcalendar.css' />
<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery-ui-1.10.0.custom.min.js"></script>
<script type='text/javascript' src='js/fullcalendar.js'></script>
<pre>
<script>
$(document).ready(function() {
getEvents();
var date = new Date();
var d = date.getDate();
var m = date.getMonth();
var y = date.getFullYear();
$('#calendar').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,basicWeek,basicDay'
},
editable: true,
events: [ getEvents()
/* {
title: 'All Day Event',
start: new Date(y, m, 1)
}, */
]
});
});
function getEvents(){
alert("hi");
$.post("http://localhost:8080/S360Portal/eventAjax.action", {},
function(data){
alert("Hello");
alert(data);
});
}
</script>
<style>
body {
margin-top: 40px;
text-align: center;
font-size: 14px;
font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
}
#calendar {
width: 900px;
margin: 0 auto;
}
</style>
</head>
<body>
<div id='calendar'></div>
</body>
</html>
Try using eventSources instead of events, this considering your function is in fact returning any events. Why not use $.Ajax({}) instead of $.post? It will make your life easier.
Here's an example of how i do it:
EventSources array.
var sources = {
sourceone: {
url: ajaxcallURL(),
type: 'POST',
data: { 'year': y },
cache: false, //this is optional
color: '#6C92A8', //this is optional
textColor: 'white' //this is optional
}
}
In Fullcalendar call I have this:
var calendar = $('#calendar').fullCalendar({
...
eventSources: [sources.sourceone],
...
});
This works for me, notice that I'm returning JSON so if you are returning XML for example you will have to iterate the XML.
Also if your events returns Dates different from the accepted they wont be mapped in the calendar, ( yyyy-mm-dd ) works.
Good Luck

Resources