I have created a web app for my bot and also integrated the telegram "web app Script"
https://telegram.org/js/telegram-web-app.js
The code of my web app is shown in the below.
The only data I'm receiving from window.Telegram.WebApp is this :
using reply Markup keyboard:
{
"initData": "",
"initDataUnsafe": {
},
"version": "1.0",
"colorScheme": "dark",
"themeParams": {
"bg_color": "#17212b",
"button_color": "#5288c1",
"button_text_color": "#ffffff",
"hint_color": "#708499",
"link_color": "#6ab3f3",
"text_color": "#f5f5f5"
},
"isExpanded": true,
"viewportHeight": 621,
"viewportStableHeight": 621,
"MainButton": {
"text": "CONTINUE",
"color": "#5288c1",
"textColor": "#ffffff",
"isVisible": false,
"isProgressVisible": false,
"isActive": true
}
}
using inline button :
{
"initData": "query_id=AAFdL6MsAAAAA122voywCSO1y&user=%7B%22id%22%3A748891997%2C%22first_name%22%3A%22%F0%9D%97%A6%F0%9D%97%94%F0%9D%97%A0%F0%9D%97%9C%22%2C%22last_name%22%3A%22%22%2C%22username%22%3A%22samyar%22%2C%22language_code%22%3A%22en%22%7D&auth_date=1651749255&hash=34f3a0de3e0dc7b8d5735d0a85b265763c5c490917180fef40e4df61c819949e",
"initDataUnsafe": {
"query_id": "AAFdL6MsAAAAAFbvoywCSO1y",
"user": {
"id": 748291957,
"first_name": "𝗦𝗔𝗠𝗜",
"last_name": "",
"username": "samyar",
"language_code": "en"
},
"auth_date": "1651749255",
"hash": "34f3a0de3e0dc7b8d5735d0a85b265265cdc490917280fef40e4df61c819949e"
},
"version": "1.0",
"colorScheme": "dark",
"themeParams": {
"bg_color": "#17212b",
"button_color": "#5288c1",
"button_text_color": "#ffffff",
"hint_color": "#708499",
"link_color": "#6ab3f3",
"text_color": "#f5f5f5"
},
"isExpanded": true,
"viewportHeight": 621,
"viewportStableHeight": 621,
"MainButton": {
"text": "CONTINUE",
"color": "#5288c1",
"textColor": "#ffffff",
"isVisible": false,
"isProgressVisible": false,
"isActive": true
}
}
I need to access many other options, but I don't have.i just need the user's profile info.
The WebApp :
<!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.0" />
<script src="https://telegram.org/js/telegram-web-app.js"></script>
<title>Web app</title>
</head>
<body>
<div class="user-info">
<!-- Data -->
<img id="profile" />
<h1 id="name"></h1>
<h3 id="username"></h3>
<!-- -->
<p id="test">
This page is a simple webapp integrated with telegram bot 💥
</p>
</div>
<script>
const profileEl = document.getElementById("profile");
const nameEl = document.getElementById("name");
const usernameEl = document.getElementById("username");
const test = document.getElementById("test");
window.Telegram.WebApp.ready();
test.innerText = `${JSON.stringify(window.Telegram.WebApp)}`;
const { first_name, last_name, username, photo_url } =
window.Telegram.WebAppUser;
// set the profile
profileEl.src = photo_url;
nameEl.innerText = `${first_name} ${last_name}`;
usernameEl.innerText = username;
</script>
</body>
</html>
The bot code :
basically, it's just going to send an replyMarkupKeyboard
#app.on_message(filters.private)
async def hello(client, message):
# await message.reply("Just a web app integrated withen telegram! 😀",
# reply_markup=InlineKeyboardMarkup(
# [
# [
# InlineKeyboardButton(
# "Open Web app 💥",web_app=WebAppInfo(url="https://telegramwebapp.netlify.app"))
# ]
# ]
# ))
await message.reply("Just a web app integrated withen telegram! 😀",
reply_markup=ReplyKeyboardMarkup(
[
[
KeyboardButton(
"Open Web app 💥",
web_app=WebAppInfo(url="https://telegramwebapp.netlify.app"))
]
]
))
const { first_name, last_name, username } = window.Telegram.WebApp.initDataUnsafe.user;
Works fine for me.
I also stumbled upon this problem. For my case it was a good decision to implement web app by menu button
https://core.telegram.org/bots/webapps#launching-web-apps-from-the-menu-button
By this method I got the full user information
Related
I have splitted webpack configurations, common, development and production configs. I load also jQuery via webpack. The problem is that, on page refresh, there is short delay for about 200-300ms before css is loaded, so my page is firstly shown without it, and then reloads with css. What could be the problem?
In common, under plugins, I have:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery'
}),
In development config I have:
{
test: /\.scss$|\.css$/,
use: [
{
loader: "style-loader",
options: {sourceMap: true}
},
{
loader: "css-loader",
options: {sourceMap: true}
},
{
loader: "sass-loader",
options: {sourceMap: true}
}
]
},
and for production mode:
optimization: {
minimizer: [
new UglifyJSPlugin({
sourceMap: true,
uglifyOptions: {
mangle: false,
compress: {
inline: false
}
}
}),
new OptimizeCssAssetsPlugin({
cssProcessor: require('cssnano'),
cssProcessorOptions: {parser: _safe, discardComments: {removeAll: true}},
canPrint: true
})
]
},
module: {
rules: [
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader'
]
}
]
}
EDIT
Here is compiled html file:
<!DOCTYPE html>
<html lang=en>
<head>
<meta charset=UTF-8>
<meta name=viewport content="width=device-width">
<meta http-equiv=X-UA-Compatible content="ie=edge">
<link rel="shortcut icon" href="favicon.png">
</head>
<body>
<div id=app></div>
<script type="text/javascript" src="main.bundle.js?32313079e3d03749d814"></script>
</body>
</html>
Maybe it is too late to answer this question, however, that is not related to Webpack. You have attached your bundle at the end of the page. Therefore before loading the bundle the page content comes up and after that bundles loaded the style. Therefore until it loads the completely there is a little time that takes time for the browser to run the bundle and attach the style. It can be fixed by putting the bundle in the <head> tag. You may need to run your jquery codes inside $(document).ready() function by passing a callback as an argument. Pay attention that it can affect the load time of your page as well.
Another solution can be configuring Webpack to load the styles first and then your js codes.
I have a fullCalendar where event data comes from a JSON feed.
The field names do not match fullCalendar field names so I use the eventDataTransform function like this:
eventDataTransform: function (eventData){
var ro = new Object();
ro.start = eventData.myStartField;
ro.end = eventData.myEndField;
ro.title = eventData.myTitleField;
ro.sourceObject = eventData;
console.log("converted event", ro);
return ro;
}
I keep the original JSON object in a custom field 'sourceObject'.
This works perfect. No issues.
Until I add a constraint to fullCalendar:
eventConstraint: {start: "08:00:00", end: "16:00:00"}
From that moment on, every time I move an event or alter it's duration, the eventDataTransform function is triggered and all my events get a start and end value of undefined.
This is weird because a drag shouldn't trigger the eventDataTransform function at all.
Is this a bug or am I doing something wrong?
Thanks
Full code:
<!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">
<meta name="description" content="">
<meta name="author" content="">
<link rel='stylesheet' href='css/fullcalendar.min.css' />
<link href='css/scheduler.min.css' rel='stylesheet' />
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
<script src='js/moment.min.js'></script>
<script src='js/fullcalendar.min.js'></script>
<script src='js/scheduler.min.js'></script>
<script>
$(document).ready(function() {
console.log("init");
$('#calendar').fullCalendar({
schedulerLicenseKey: 'CC-Attribution-NonCommercial-NoDerivatives',
defaultView: 'agendaWeek',
weekends: false,
weekNumbers: true,
allDaySlot: false,
slotLabelFormat: 'H:mm',
nowIndicator: true,
selectable: true,
defaultDate: '2017-09-12',
editable: true,
eventConstraint: {start: "08:00:00", end: "16:00:00"},
eventDataTransform: function (eventData){
var ro = new Object();
ro.start = eventData.myStartField;
ro.end = eventData.myEndField;
ro.title = eventData.myTitleField;
ro.sourceObject = eventData;
console.log("converted event", ro);
return ro;
},
events: [
{
myTitleField: 'Long Event',
myStartField: '2017-09-07',
myEndField: '2017-09-10'
},
{
myTitleField: 'Meeting',
myStartField: '2017-09-12T10:30:00',
myEndField: '2017-09-12T12:30:00'
},
{
myTitleField: 'Lunch',
myStartField: '2017-09-12T12:00:00'
},
{
myTitleField: 'Meeting',
myStartField: '2017-09-12T14:30:00'
},
{
myTitleField: 'Happy Hour',
myStartField: '2017-09-12T17:30:00'
}
]
});
});
</script>
</head>
<body>
<div id="calendar" class="container">
</div>
</body>
</html>
Hi the selectbox is show the selected item but i cant open the dropdown at all
I am using form in the mdpanel
its not working in dialog on mdpanel
how can i fix it
i need form with edit user and i need select box that initialize with one of the user param
users :[
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' },
{ id: 3, name: 'Steve' }
],
selectedUser : { id: 1, name: 'Bob' }
html:
<md-select ng-model="ctrl.selectedUser" ng-model-options="{trackBy: '$value.id'}">
<md-option ng-value="user" ng-repeat="user in ctrl.users">{{ user.name }}</md-option>
</md-select>
You do not need to have ng-model-options="{trackBy: '$value.id'}"
DEMO
// Code goes here
var app = angular.module('app', ["ngMaterial"]);
app.controller('myCtrl', function($scope) {
$scope.users =[
{ id: 1, name: 'Bob' },
{ id: 2, name: 'Alice' },
{ id: 3, name: 'Steve' }
];
$scope.selectedUser = { id: 1, name: 'Bob' };
});
<!DOCTYPE html>
<html ng-app="app">
<head>
<link rel="stylesheet" href="style.css" />
<link data-require="angular-material#0.11.0" data-semver="0.11.0" rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.css" />
<script data-require="jquery#*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script data-require="angular.js#*" data-semver="1.4.5" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script data-require="angular-material#0.11.0" data-semver="0.11.0" src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.0/angular-material.min.js"></script>
<script data-require="angular-animate#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-animate.js"></script>
<script data-require="angular-aria#1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular-aria.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="myCtrl">
<div layout="row">
<md-select placeholder="Select" ng-model="selectedUser">
<md-option ng-repeat="user in users" value="{{user.name}}">
{{user.name}}
</md-option>
</md-select>
</div>
</body>
</html>
To make your select box initially load the selected item
Keep your code as it is
<md-select ng-model="ctrl.selectedUser" ng-model-options="{trackBy: '$value.id'}">
<md-option ng-value="user" ng-repeat="user in ctrl.users">{{ user.name }}</md-option>
</md-select>
Check your Angular version it should be <= 1.5.9
Demo http://codepen.io/anon/pen/EZRwaQ?editors=1010
I'm working on a project where I'm searching locations using Google Maps API v3 places (with auto complete service).
It works nicely and allows you to search from many different countries, how ever I was hoping to add some custom results (e.g. "Mikes place") to the result pane as well (if someone started typing "Mike").
Is it possible to add my own results to the Google Maps places search results or should I use some jQuery auto complete feature and try to add Google results with my own?
It's probably a bit late for you but I stumbled across your question before deciding to implement this myself in a Google Maps Autocomplete component for Angular JS which I maintain. Hopefully someone finds it helpful.
Using the component you can specify custom places results which get blended into the results that come back from the AutocompleteService.
Here's a working example:
<!DOCTYPE html>
<html lang="en" ng-app="example">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Injecting Custom Place Predictions</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="../src/autocomplete.css">
<!-- Required dependencies -->
<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>
<script src="lib/underscore/underscore.js"></script>
<script src="lib/angular/angular.js"></script>
<script src="lib/angular-touch/angular-touch.js"></script>
<!-- Google Places Autocomplete directive -->
<script src="../src/autocomplete.js"></script>
<script>
angular.module('example', ['google.places'])
// Setup a basic controller
.controller('MainCtrl', function ($scope) {
$scope.place = null;
$scope.myPlaces = [
toGooglePlacesResult({
label: 'International Airport - T1, Sydney, New South Wales',
address: {
street: 'International Airport - T1',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.936722, longitude: 151.164266 }
}),
toGooglePlacesResult({
label: 'Domestic Airport - T2, Sydney, New South Wales',
address: {
street: 'Domestic Airport - T2',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.933617, longitude: 151.181630 }
}),
toGooglePlacesResult({
label: 'Domestic Airport - T3, Sydney, New South Wales',
address: {
street: 'Domestic Airport - T3',
suburb: 'Sydney',
state: 'NSW'
},
location: { latitude: -33.933076, longitude: 151.181270 }
})
];
function toGooglePlacesResult(config) {
return {
formatted_address: config.label,
address_components: [
{
long_name: config.address.street,
short_name : config.address.street,
types: [ 'route' ]
},
{
long_name: config.address.suburb,
short_name: config.address.suburb,
types: [ 'locality' ]
},
{
long_name: config.address.state,
short_name: config.address.state,
types: [ 'administrative_area_level_1' ]
}
],
geometry: {
location: {
lat: function () { return config.location.latitude },
lng: function () { return config.location.longitude }
}
}
};
}
});
</script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
<div class="row">
<div class="col-md-12">
<h1>Injecting Custom Place Predictions</h1>
<form class="form">
<input class="form-control" g-places-autocomplete custom-places="myPlaces" ng-model="place"/>
</form>
<h5>Result:</h5>
<pre>{{place | json}}</pre>
</div>
</div>
</div>
</body>
</html>
The important parts are making sure your custom places results actually look minimally like a real places result, then wiring up your results to the directive using the custom-places attribute.
I'm trying to run the treegrid example but it only gives me the grid with no data in it!
this is my default.aspx:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My tree grid</title>
<!-- Ext -->
<link rel="stylesheet" type="text/css" href="ExtJs4/resources/css/ext-all.css" />
<script type="text/javascript" src="ExtJs4/bootstrap.js"></script>
<script type="text/javascript" src="ExtJs4/ext-all.js"></script>
<!-- example code -->
<script type="text/javascript" src="Scripts/treepanel.js"></script>
</head>
<body>
<h1>My tree grid</h1>
<div id="tree-div"> </div>
this is my treepanel.js
Ext.Loader.setConfig({ enabled: true }); //
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.tip.QuickTipManager',
'Ext.container.Viewport',
'Ext.layout.*',
'Ext.form.Panel',
'Ext.form.Label',
'Ext.grid.*',
'Ext.data.*',
'Ext.tree.*',
'Ext.selection.*',
'Ext.tab.Panel'
]);
Ext.onReady(function ()
{
Ext.define('Task', {
extend: 'Ext.data.Model',
fields: [
{name: 'task', type: 'string'},
{name: 'user', type: 'string'},
{name: 'duration', type: 'string'}
]
});
var store = Ext.create('Ext.data.TreeStore', {
model: 'Task',
proxy: {
type: 'ajax',
url: 'treegrid.json'////
},
folderSort: true
});
//Ext.ux.tree.TreeGrid is no longer a Ux. You can simply use a tree.TreePanel
var tree = Ext.create('Ext.tree.Panel', {
title: 'Core Team Projects',
width: 500,
height: 300,
renderTo: 'tree-div',
rootVisible:true,
store: store,
autoload:true,
columns: [{xtype: 'treecolumn', text: 'Task', dataIndex: 'task' },{text: 'Assigned To', dataIndex: 'user'}]
});
});
am I doing something wrong here?
I have no error msg from my firebug...so why isn't it working?
if I can't run an example how am I going to do more..I'm frustrated with this.
not sure, but the "autoLoad: true" is now on the panel, but shouldn't it be on the store?
Install PHP and do the following in IIS:
click on the new site
click on MIME types
right click in open space > Add > File name extension: "json" ... MIME Type: "application/x-javascript"
Adding more details:
http://www.sencha.com/forum/showthread.php?33266-Some-Problem-with-JSON&p=229858&viewfull=1#post229858