I am using the print js library to export tables in my application.
I need to put a header when exporting each page. Now when I use the json type as follows
let someJSONdata = [{
name: 'name',
email: "fda#daa.com",
phone: "46228156"
}];
let url = 'urlstring';
let rawHTML = `
<div id="header">
<img src="${url}" alt="">
<div class="parraf">
<h3 style="margin:0px"> title </h3>
<h5 style="margin:0px"> subtitle </h5>
<h6 style="margin:0px"> description </h6>
</div>
</div> <br>`;
printJS({
printable: someJSONdata,
type: 'json',
properties: ['name', 'email', 'phone'],
header: rawHTML,
style: '#header { display: flex; } #header img { max-width: 120px;} .parraf { width: 100%; padding: 0px; text-align: center; max-height: 80px }'
});
** This works well. The thing is that for my situation I am exporting directly to html so the code would look like this: **
let url = 'pathhere';
let rawHTML = `
<div id="div_toexport_from_html">
<img src="${url}" alt="">
<div class="textos">
<h3 style="margin:0px"> INSTITUTO TECNOLOGICO DE SONORA </h3>
<h5 style="margin:0px"> ADMINISTRACION DE PERSONAL </h5>
<h6 style="margin:0px"> Reporte de permisos </h6>
</div>
</div> <br>`;
printJS({
printable: 'div_toexport_from_html',
type: 'html',
header: rawHTML,
style: '#div_toexport_from_html { display: flex; } #div_toexport_from_html img { max-width: 120px;} .textos { width: 100%; padding: 0px; text-align: center; max-height: 80px; color: #0b6db5; } ',
targetStyles: ['*'],
maxWidth: setMaxWidth,
ignoreElements: viewtoIgnore
});
the bad thing is that it does not correctly rander the html but takes it as a normal text string.
Could it be possible or in what way can it be operated this way?
In summary
The route in this case I put it as a reference that the real url would be placed there. The issue is that I don't know if the printjs library in the options to export allows the following:
var printTypes = ['pdf', 'html', 'image', 'json', 'raw-html'];
When using the
type = 'json'
correctly rander the header that is passed through a raw-html string. However, when using the
type = 'html'
which is my case, it does not correctly rander the specified raw-html string since it takes it as if it were a normal text.
Maybe that way the library works. Who knows?
Related
I start to working with gridstack.js and i want to build layout dynamically from jquery.
But for this i want to provide some layout for boxes, like this:
So i do this, but problem is how i can build, this layout for boxes from script, because now i just add this to html.
var items = [
{ w: 3,content: 'my first widget' }, // will default to location (0,0) and 1x1
{ w: 3, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
];
var grid = GridStack.init();
grid.load(items);
.stantion-box {
display: flex;
}
.stantion-text {
justify-content: right;
}
.image-box {
width: 100%;
height: 100%;
}
.grid-stack {
background: lightgoldenrodyellow;
}
.grid-stack-item-content {
color: #2c3e50;
text-align: center;
background-color: #18bc9c;
}
<link href="https://cdn.jsdelivr.net/npm/gridstack#4.3.1/dist/gridstack.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/gridstack#4.3.1/dist/gridstack-h5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div><a class="btn btn-default" onClick="addNewWidget()" href="#">Add Widget</a></div>
<br />
<div class="container-fluid">
<div class="grid-stack">
<div class="text-center card text-white grid-stack-item newWidget ui-draggable" gs-x="0" gs-y="2" gs-w="3" gs-h="1">
<div class="card-body grid-stack-item-content ui-draggable-handle stantion-box">
<div class="stantion-icon">
<img src="https://www.ccifr.ru/wp-content/themes/ccifr/img/no-image.png" class="image-box"/>
</div>
<div class="stantion-text">
<div class="stantion-title">
<span>Drag me into the dashboard!</span>
</div>
<div class="stantion-descr">
<span>some descr</span>
</div>
</div>
</div>
</div>
</div>
</div>
So i want to build first box on the layout use js, to dynamically boxes build from here
var items = [
{ w: 3,content: 'my first widget' }, // will default to location (0,0) and 1x1
{ w: 3, content: 'another longer widget!' } // will be placed next at (1,0) and 2x1
];
How i can defind standart layout for boxes?
I'm using MVC, have standard scaffolded index.cshtml page.
My goal is to display the details on a modal box. I'm able to display the modal box however whatever I do the modal is always and always displayed on the top left side of the screen. I'm trying to manipulate it using css but it fails whatever I do it does not work
so what I have done is:
Index.cshtml
<div id="myModal" class="modal TestModal">
<div class="modal-dialog TestModal">
<div class="modal-content TestModal">
<div id="myModalContent" class="TestModal"></div>
</div>
</div>
</div>
1- Created a partialView
<div class="modal-header">
<h4 class="modal-title">Validation Error</h4>
</div>
<div class="modal-body">
<p class="text-warning">
<small>Please make an entry before save</small>
</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Ok</button>
</div>
2-Created the following method in my controller
public PartialViewResult DisplayModalFor(int id)
{
//var parent = _context.TOURNAMENTS_M.Include(x => x.TOURNAMENTS_D).First(x => x.TM_ROWID.Equals(Id));
return PartialView("_DetailsModal");
}
and finally I have the following function in my javascript file:
function PopUpModalFor(tmRowid) {
const id = tmRowid;
$.ajax({
url: "/TOURNAMENTS_M/DisplayModalFor",
type: "GET",
data: {
id: id
}
})
.done(function (result) {
$("#myModalContent").html(result);
$("#myModal").modal("show");
})
.fail(function () {
alert("I failed :'( ");
});
}
thoughts?
I have a weird problem here!
though I have included
<link rel="stylesheet" href="~/css/MyStyle.css" />
into my _Layout.cshtml, my CSS is not working completely.
for example I have
.YOLO {
background-color: green;
}
.Padded {
margin: 50px 100px 0 100px !important;
}
then I have modified my index.cshtml to look like this
<div class="Padded">
<p class="YOLO">THIS SHOULD BE GREEN</p>
<h2>Index</h2>
//More code..
however the p tag is not green what should I do?
I found this on here. But don't know whether it is working for you or not. Can you just try below? Anyway, by default, it should align into the middle.
#myModal{
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
I have created a error.vue file within the layouts folder which should show the UI for a 400, 404, 410 and 500 error. But, it is not showing the ones I created, it is still showing the default NuxtServerError page.
So, my question is how can I show my created UI within a page.
Below is the code that I am using within the layouts/error.vue
HTML:
<template>
<div class="error-container">
<div class="error-content" v-if="error.statusCode === 404">
<div>
<h1>Sorry, the page you were looking for doesn't exist.</h1>
<p>You can return to our <nuxt-link to="/">home page</nuxt-link> or contact us if you can't find what you are looking for.</p>
</div>
<img src="~/assets/Images/404.png">
</div>
<div class="error-content" v-if="error.statusCode === 400">
<div>
<h1>Sorry, the page you are looking for doesn't exist anymore.</h1>
<p>You can return to our <nuxt-link to="/">home page</nuxt-link> or contact us if you can't find what you are looking for.</p>
</div>
<img src="~/assets/Images/404.png">
</div>
<div class="error-content" v-if="error.statusCode === 410">
<div>
<h1>Sorry, the page you are looking for has been deleted.</h1>
<p>You can return to our <nuxt-link to="/">home page</nuxt-link> or contact us if you can't find what you are looking for.</p>
</div>
<img src="~/assets/Images/404.png">
</div>
<div class="error-content" v-if="error.statusCode === 500">
<div>
<h1>Sorry, the page you were looking for doesn't exist.</h1>
<p>You can return to our <nuxt-link to="/">home page</nuxt-link> or contact us if you can't find what you are looking for.</p>
</div>
<img src="~/assets/Images/404.png">
</div>
</div>
</template>
Javascript:
<script>
export default {
head() {
return {
title: 'Lost?'
}
},
props: ['error'],
layout: 'error'
}
</script>
CSS:
<style scoped>
.error-container {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.error-content {
width: 90%;
max-width: 800px;
margin: auto;
display: grid;
grid-template: auto / auto 200px;
grid-column-gap: 10px;
text-align: center;
}
.error-content > div {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.error-content > div > h1 {
font-size: 30px;
margin: 0;
}
.error-content > img {
width: 200px;
}
a {
text-decoration: unset;
color: var(--color-tpBlue);
}
</style>
Many thanks in advance!
Redirect to error layout does not happen automatically. Instead, redirect should be done in relevant hooks or methods of your application. It is done by calling error method available in Nuxt context with statusCode and message props passed, which will replace page with with content of layout/error.vue and will respond with HTTP status provided as a statusCode prop.
Here is an example of handling errors inside asyncData:
export default {
async asyncData ({ params, error }) {
try {
const { data } = await axios.get(`https://my-api/posts/${params.id}`)
return { title: data.title }
} catch (e) {
error({ statusCode: 404, message: 'Post not found' })
}
}
}
As a complement to #aBiscuit answer:
For the ones who want to redirect to the error page in another context than asyncData in your component, you can access the error function in this.$nuxt.error.
I am learning windows 8/HTML/JavaScript app creation.
I am trying to create a WinJS.UI.ListView object as described in the MSDN site.
Now I have three listview elements and I want them to be placed on a single row.
I tried used css float:left property to display them in one line.
But the problem is I cant get them in a single line.
This is my screenshot of the output
HTML:
<section aria-label="Main content" role="main">
<div id="iconTextApplicationsTemplate" data-win-control="WinJS.Binding.Template">
<div class="iconTextApplications" >
<img class="iconTextApplicationsImage" src="#" data-win-bind="alt: title; src: picture" />
<div class="iconTextApplicationsTitle" data-win-bind="innerText: title"></div>
</div>
</div>
<div id="iconTextApplications" class="win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{ itemDataSource : Icons.itemList.dataSource,
itemTemplate: select('#iconTextApplicationsTemplate'),
layout: { type:WinJS.UI.CellSpanningLayout } }" >
CSS
.win-container{
margin:auto;
}
.win-surface {
width:100%;
margin: 0 auto;
}
.win-viewport {
width:100%;
margin: 0 auto;
background-color:rgb(94, 82, 68);
}
#iconTextApplicationsTemplate {
float:left;
width:100%;
height:100%;
}
JavaScript
var dataArray = [
{ title: "One", picture: "images/jokes.png" },
{title : "Two" , picture : "images/quotes.png" },
{ title: "Three", picture: "images/trivia.png" }
];
var dataList = new WinJS.Binding.List(dataArray);
var publicMembers = {
itemList: dataList
};
WinJS.Namespace.define("Icons",publicMembers);
Am I approaching it in the wrong way?
or Should I go for other techniques?
In WinJS you'll need to define the height as the ListView will automagically wrap if the height is either set to auto or 100%.
I am developping a metro style application for Windows 8 using HTML5/CSS/JS
I'm trying to display items with different size in a grouped List View. (like all metro style apps do...) I found on the internet that I need to put a GridLayout to my list View and implement the groupInfo. It succeeds in modifying the first item (the picture inside the first item is bigger than the other items), but then all the items have the size of the first item. I would like something like this instead :
Here is what I have done :
updateLayout: function (element, viewState, lastViewState) {
//I get my listView winControl defined in HTML
var listView = element.querySelector(".blocksList").winControl;
var globalList = new WinJS.Binding.List(globalArray);
var groupDataSource = globalList.createGrouped(this.groupKeySelector,
this.groupDataSelector, this.groupCompare);
// I set the options of my listView (the source for the items and the groups + the grid Layout )
ui.setOptions(listView, {
itemDataSource: groupDataSource.dataSource,
groupDataSource: groupDataSource.groups.dataSource,
layout: new ui.GridLayout({
groupHeaderPosition: "top",
groupInfo: function () {
return {
multiSize: true,
slotWidth: Math.round(480),
slotHeight: Math.round(680)
};
}
}),
itemTemplate: this.itemRenderer,
});
},
// je définis le template pour mes items
itemRenderer: function (itemPromise) {
return itemPromise.then(function (currentItem, recycled) {
var template = document.querySelector(".itemTemplate").winControl.renderItem(itemPromise, recycled);
template.renderComplete = template.renderComplete.then(function (elem) {
//if it is the first item I put it widder
if (currentItem.data.index == 0) {
// elem.querySelector(".item-container").style.width = (480) + "px";
elem.style.width = (2*480) + "px";
}
});
return template.element;
})
},
the html part is :
<section aria-label="Main content" role="main">
<div class="blocksList" aria-label="List of blocks" data-win-control="WinJS.UI.ListView"
data-win-options="{itemTemplate:select('.itemTemplate'), groupHeaderTemplate:select('.headerTemplate')
, selectionMode:'none', swipeBehavior:'none', tapBehavior:'invoke'}">
</div>
</section>
<!--Templates-->
<div class="headerTemplate" data-win-control="WinJS.Binding.Template">
<div class="header-title" data-win-bind="innerText: categorieName"/>
</div>
<div class="itemTemplate" data-win-control="WinJS.Binding.Template">
<div class="item-container" >
<div class="item-image-container">
<img class="item-image" data-win-bind="src: urlImage" src="#" />
</div>
<div class="item-overlay">
<h4 class="item-title" data-win-bind="textContent: title"></h4>
</div>
</div>
</div>
et le css
.newHomePage p {
margin-left: 120px;
}
.newHomePage .blocksList {
-ms-grid-row: 2;
}
.newHomePage .blocksList .win-horizontal.win-viewport .win-surface {
margin-left: 120px;
margin-bottom: 60px;
}
.newHomePage .blocksList .item-container {
height: 340px;
width: 240px;
color: white;
background-color: red;
-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr;
display: -ms-grid;
}
.newHomePage .blocksList .win-item {
/*-ms-grid-columns: 1fr;
-ms-grid-rows: 1fr 30px;
display: -ms-grid;*/
height: 130px;
width: 240px;
background: white;
outline: rgba(0, 0, 0, 0.8) solid 2px;
}
Thank you for your help.
In Release Preview (and also RTM), the property names in the groupInfo function changed:
multiSize -> enableCellSpanning
slotWidth -> cellWidth
slotHeight -> cellHeight
Try that and see if you get better results. If you don't announce cell spanning in this way, then the GridLayout takes the first item's size as that for all the items.
Chapter 5 of my ebook from Microsoft Press (RTM preview coming soon) will cover all the details of this.
.Kraig