Email markup for EventReservation not working - google-calendar-api

I'm trying to use the Gmail Email Markup to create an automatic event in Google Calendar. From the official guide, I'm using the below code:
<html>
<body>
<script type="application/ld+json">
{
"#context": "http://schema.org",
"#type": "EventReservation",
"reservationNumber": "IO12345",
"underName": {
"#type": "Person",
"name": "John Smith"
},
"reservationFor": {
"#type": "Event",
"name": "Google I/O 2013",
"startDate": "2017-11-16T08:30:00-08:00",
"location": {
"#type": "Place",
"name": "Moscone Center",
"address": {
"#type": "PostalAddress",
"streetAddress": "800 Howard St.",
"addressLocality": "San Francisco",
"addressRegion": "CA",
"postalCode": "94103",
"addressCountry": "US"
}
}
}
}
</script>
<p>
Dear John, thanks for booking your Google I/O ticket with us.
</p>
<p>
BOOKING DETAILS<br/>
Reservation number: IO12345<br/>
Order for: John Smith<br/>
Event: Google I/O 2013<br/>
Start time: Nov 16th 2017 8:00am PST<br/>
Venue: Moscone Center, 800 Howard St., San Francisco, CA 94103<br/>
</p>
But this is not working. It isn't creating an event. Any idea why? Also, I have add automatic events from Gmail enabled in my Calendar settings. I'm getting other automatic events of flight bookings on my calendar.
Thanks in advance!

Maybe you are using an educational account (school / university). Try it with a regular gmail account.

Related

Spring restTemplate not returning anything

#Bean
public RestTemplate restTemplate(RestTemplateBuilder builder) {
return builder.build();
}
#GetMapping("/printJson")
public String getJson(#RequestParam(name="reports", required=false, defaultValue="None") RestTemplate restTemplate, Model model) throws Exception {
List<DailyReport> reports = restTemplate.getForObject("http://localhost:8080/pwa/services/dailyReport/all",
(Class<List<DailyReport>>) ((Class)List.class));
model.addAttribute("reports", reports);
return "printJson";
}
Hi, I am trying to consume my own webservice with restTemplate. On my webservice I have stored data with JSON and I want to print it or use it with a web application
This is what my json file looks like :
{
"serial_number": 202102,
"report_date":"2019-11-23T23:00:00.000+0000",
"status": "en service",
"automate_information":{
"state": "ok",
"temperature": 20,
"payment_state":{
"coins": "normal",
"smart_card": "normal",
"card": "normal"
}
},
"errors":[
{"type": "ax23", "description": "azerty"},
{"type": "cx400", "description": "qzerty"}
],
"articles":[
{"name": "cafe", "quantity": 20},
{"name": "chocolat", "quantity": 30},
{"name": "oasis", "quantity": 10}
],
"income": 300
}
I have made a matching structure with the same names and all, but when I launch my application and I go on the corresponding view :
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>JSON</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<tr th:each="report: ${reports}">
<td th:text="${report.id}" />
<td th:text="${report.serial_number}" />
</tr>
<form th:action="#{/logout}" method="post">
<input type="submit" value="Sign Out"/>
</form>
</body>
</html>
Nothing at all is printed. When I tried to call the .size() on the variable reports, I had the error : Cannot call .size() function on null.
I have searched everywhere, and looked back at my structure to see if the names were exactly alike and didn't find anything.
Is there something wrong I am doing with resttemplate ?
Thank you a lot for your help, I might have done a lot of mistakes I am new to spring.

changing json data into hex colors and applying style to div

I have the following JSON data:
{
"name": "faded",
"artist": "alan walker",
"color": "faded"
},
{
"name": "i love you",
"artist": "omfg",
"color": "143"
},
{
"name": "closer",
"artist": "the chainsmokers",
"color": "c105e2"
},
{
"name": "roses",
"artist": "the chainsmokers",
"color": "205e2"
}
I'm converting hex codes into background-colors, however some of these will not work since colors needs be either a 6-digit (#ffffff) or 3-digit number (#fff).
A solution would be to add 0 before numbers which are 2,4 or 5 digits only, so "205e2" would come out as "#0205e2". I'd also like to apply this JSON data to each div:
<div style="background-color: #000;"> <!-- background-color here -->
<h1 id="name"></h1> <!-- name goes here -->
<h2 id="artist"></h2> <!-- artist goes here -->
<h3 id="hex">#000000</h3><!-- color text goes here -->
<div class="content">
<button>Like</button>
<button>Copy</button>
</div>
What would be the possible way to code this?

Creating custom Handlebars helper with Mandrill?

Is there a way to define a custom Handlebars helper with Mandrill? Say that I've got an object and the currency is in cents.
"products": [
{
"sku": "hdrPhotos",
"price": 19000,
"title": "Unlimited HDR Photography"
},
{
"sku": "panos",
"price": 2500,
"title": "Panoramas / Virtuals"
},
{
"sku": "fullVideo",
"price": 43000,
"title": "Full Video"
},
{
"sku": "aerialDaytimePhotos",
"price": 17500,
"title": "Aerial Daytime Photography"
},
]
I've got this template:
<!-- BEGIN PRODUCT LOOP // -->
{{#each products}}
<tr class="item">
<td valign="top" class="textContent">
<h4 class="itemName">{{title}}</h4>
<span class="contentSecondary">${{toCurrency price}}</span>
<br/>
<span class="contentSecondary sku"><em>{{sku}}</em></span>
<br/>
</td>
</tr>
{{/each}}
I want to take price, which is in cents, and write a custom helper toCurrency that simply divides it by 100.
Custom helpers are easy enough to do in standard Handlebars, but is it possible with Mandrill's utilization of it?
According to the documentation this isn't possible :
"Use Handlebars regardless of whether you're using templates in Mandrill. We'll cover the basics of Handlebars, helpers implemented specifically for Mandrill, and some deviations from and additions to standard Handlebars."
Reference: https://mandrill.zendesk.com/hc/en-us/articles/205582537-Using-Handlebars-for-Dynamic-Content#using-helpers
There are not even all helpers from handlebar.

Does angular ui select (bootstrap version) support optgroup?

Does anyone know if Angular-Ui-Select Bootstrap version support an optgroup?
Can't seem to find any documentation for that on https://github.com/angular-ui/ui-select?
Here is their example:
plnkr.co/edit/QCwSM75ilH2Vh6D9aMA4?p=preview
How to add an optgroup?
In this example, lets say, group persons by countries.
You can use group-by attribute.
See "Demo Multiselect" (last example "Array of objects (with groupBy)") at
https://github.com/angular-ui/ui-select
It's multiselect demo, but group-by works for single select too.
This is group-by using string
app.js:
$scope.countries = [
{
"code": "AD",
"name": "Andorra",
"continent": "Europe"
},
{
"code": "AE",
"name": "United Arab Emirates",
"continent": "Asia"
},
{
"code": "AF",
"name": "Afghanistan",
"continent": "Asia"
}
];
html:
<div>
<label>COUNTRY</label><br>
<ui-select ng-model="user.country" style="min-width: 300px;">
<ui-select-match placeholder="Select Country">
<span ng-bind="$select.selected.name"></span>
</ui-select-match>
<ui-select-choices repeat="country in countries | filter: {name: $select.search}" group-by="'continent'">
<span ng-bind="country.name"></span>
</ui-select-choices>
</ui-select>
</div>
Generated JSON of all countries with their continent using
http://peric.github.io/GetCountries/

Mobile images slider

I want to do a mobile webpage, which in the middle of the webpage, I will be able to swipe my finger to the left/right and scroll between images there.
a photo to demonstrate:
I wanna be able to swipe between the censored images with my finger.
How do I do such a thing?
Thanks in advance!
You're looking for a cover-flow like thing. This might guide you in the proper direction : http://andrebrov.net/dev/carousel/
Source Link : http://forum.jquery.com/topic/jquery-mobile-carousel-widget
GITHUB Link : https://github.com/andrebrov/jqm.carousel
Here's how the HTML would look like :
<div style="height:460px;width:300px;">
<div id="carousel" class="carousel">
<div id="carousel_scrollpane" class="carousel-content">
<div id="carousel_content" class="carousel-content-scroller"></div>
</div>
<div id="carousel_nav" class="carousel-nav">
<div id="carousel_mid" class="carousel-mid"></div>
</div>
</div>
</div>
Then, the initialisation would go this way :
var carousel = new $.widgets.Carousel({
uuid: "carousel",
args: {
"scrollInterval": 600,
"itemWidth": 290
},
value: [{
"title": "Tron.Legacy",
"image": "images/1.jpg"
}, {
"title": "Yogi Bear",
"image": "images/2.jpg"
}, {
"title": "The Chronicles of Narnia: The Voyage of the Dawn Treader",
"image": "images/3.jpg"
}, {
"title": "The Fighter",
"image": "images/4.jpg"
}, {
"title": "Tangled",
"image": "images/5.jpg"
}]
});
Hope this helps!

Resources