Multiple Pdf Viewer Add Same Page Via Vue Pdf App Component - vue.js

I want to show two different pdf file (pdf and pdf2) on same page via one component.
When I try to like below, the second pdf file not shown in the page. Do you have any suggestion
<div id="app">
<vue-pdf-app style="height: 50vh;" :pdf="pdf" :config="config"></vue-pdf-app>
<vue-pdf-app style="height: 50vh;" :pdf="pdf2" :config="config"></vue-pdf-app>
</div>
And here is my javascript codes.
new Vue({
components: {
VuePdfApp: window["vue-pdf-app"]
},
data() {
return {
config: {
toolbar: {
toolbarViewerLeft: { findbar: false }
}
},
pdf: getPdf(),
pdf2: getPdf()
};
}
}).$mount("#app");
function getPdf() {
const pdf2 =" base 64 string pdf";
const pdf = "base 64 string pdf1 ";
return base64ToArrayBuffer(pdf);
}
function base64ToArrayBuffer(base64) {
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}
Here is my code on codepen
https://codepen.io/canbeywas/pen/yLMpEBg

You can fix this by slightly modifying your code like this:
new Vue({
components: {
VuePdfApp: window["vue-pdf-app"]
},
data() {
return {
config: {
toolbar: {
toolbarViewerLeft: { findbar: false }
}
},
pdf: getPdf(),
pdf2: getPdf2()
};
}
}).$mount("#app");
function getPdf() {
const pdf = "base 64 string pdf1 ";
return base64ToArrayBuffer(pdf);
}
function getPdf2() {
const pdf = "base 64 string pdf2 ";
return base64ToArrayBuffer(pdf);
}
function base64ToArrayBuffer(base64) {
var binary_string = window.atob(base64);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes.buffer;
}

Related

I cannot integrate js query file in vue

i would like to use a js query code that I found on codepen in my vue project, but im not sure How to integrate it .
I simply pasted the file in my created() of my vue component but it doesn seem to work out.. the code is supposing to run a visual animation when typing chinese caractere in the input form.
this is the codepen : https://codepen.io/simeydotme/pen/CFcke
var $input = $('input');
$input.on({
"focus": function(e) {
$(".input-container").addClass("active");
},
"blur": function(e) {
$(".input-container").removeClass("active");
}
});
var previous = null;
setInterval( function() {
if( previous !== $input.val()
|| "" === $input.val()) {
getGoodCharacters( $input );
previous = $input.val();
}
}, 500);
function getGoodCharacters( $this ) {
var output = $this.val().trim();
var letters = output.split("");
var url = "https://service.goodcharacters.com/images/han/$$$.gif";
$(".error-container, .help").removeClass("show");
$(".output-container").empty();
for( letter in letters ) {
var img = letters[letter] + "";
var newurl = url.replace("$$$",img);
loadCharacter( newurl , img );
}
}
function loadCharacter( url , letter ) {
var img = new Image();
var $output = $(".output-container");
var $a = $("<a/>");
var l = $("input").val().length;
var cwidth = "120px";
if( l > 7 ) { cwidth = "70px"; }
else if( l > 6 ) { cwidth = "90px"; }
else if( l > 5 ) { cwidth = "100px"; }
$(img).load(function(){
$a.attr({
"href": url,
"title": "Good Character Chinese Symbol: "+ letter + ""
}).css("width", cwidth ).append( $(this) ).appendTo($output);
$(".help").addClass("show");
}).attr({
src: url
}).error(function(){
$(".error-container").addClass("show");
});
}
var $try = $(".tryme a").on("click", function(e) {
e.preventDefault();
$input.val( $(this).text() );
});
I also imported the jquery module in my componant
import $ from "jquery";
here is the html that i added in the template
<div class="container input-container">
<input type="text" id="input" placeholder="中文" value="中文"/>
</div>
Thanks!

Create a div using vue.js

https://jsfiddle.net/50wL7mdz/69934/
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods:{
randomize: function(){
var arr = [];
for (var i = 0; i < message; i++){
arr[i] = i;
}
document.getElementById("result").innerHTML = arr;
}
}
})
There is a code suuposed to create and to print an array from 1 to n into HTML.
Anyway it never happens as it is said variable message is not defined.
How do I fix the problem?
Use this.message to get something from data.
Complete code:
var app = new Vue({
el: '#app',
data: {
message: ''
},
methods:{
randomize: function(){
var arr = [];
for (var i = 0; i < this.message; i++){
arr[i] = i;
}
document.getElementById("result").innerHTML = arr;
}
}
})

getting the error while copying feature ""Requested type name "feature" is unknown.""

This is code what I wrote for this...
Feature Deep Copy
rally.PortfolioItemDeepCopy = function (rallyDataSource, config) {
var portfolioitemBuffer = [];
var firstPortfolioItem = null;
var firstStory = null;
var finishedCallback;
var that = this;
//dojo.connect(obj, event, context, method, dontFix);
this._fireEvent = function(eventName, eventArgs) {
if (config && config.eventListeners[eventName] && dojo.isFunction(config.eventListeners[eventName])) {
config.eventListeners[eventName](that, eventArgs);
}
};
// removes private and read only fields to keep from pushing them up.
this.filterObject = function (object) {
return object;
};
this._addObject = function(object, typeName, callback) {
var item = dojo.clone(object);
item = this.filterObject(item);
function errorFunctionWrapper(error) {
if (dojo.isArray(error.Errors)) {
var errorMessage = error.Errors.pop();
if (errorMessage.indexOf("Not authorized to create:") >= 0) {
errorMessage = "Unable to create an object. This can happen due to a child or task being in a project you do not have write permissions to.";
}
rally.sdk.ui.AppHeader.showMessage("error", errorMessage, 10000);
}
else if(dojo.isObject(error)&&error.message){
rally.sdk.ui.AppHeader.showMessage("error", error.message, 10000);
error = [error.message];
}
if (dojo.isFunction(config.onError)) {
config.onError(error);
}
}
rallyDataSource.create(typeName, item, callback, errorFunctionWrapper);
};
this._copyAllFromBuffer = function() {
if (portfolioitemBuffer.length > 0) {
var portfolioitem = portfolioitemBuffer.pop();
that._copyPortfolioItem(portfolioitem.ref, portfolioitem.parent, that._copyAllFromBuffer);
}
else {
if (finishedCallback) {
finishedCallback(firstPortfolioItem);
}
}
};
this._addPortfolioItemsToBuffer = function(portfolioitemArray, parentRef) {
dojo.forEach(portfolioitemArray, function (portfolioitem) {
portfolioitemBuffer.push({
ref: portfolioitem._ref,
parent: parentRef
});
});
};
this._copyPortfolioItem = function(ref, parentRef, callback) {
rallyDataSource.getRallyObject(ref, function (foundObject) {
var type = "feature"
that._fireEvent("portfolioitemPreAdd", {portfolioitem:foundObject});
if (parentRef) {
foundObject.Parent = parentRef;
}
else {
foundObject.Name = "(Copy of) " + foundObject.Name;
}
that._addObject(foundObject, type, function (portfolioitemRef) {
if (!firstPortfolioItem) {
firstPortfolioItem = portfolioitemRef;
}
that._fireEvent("portfolioitemPostAdd", {});
that._addPortfolioItemsToBuffer(foundObject.Children, portfolioitemRef);
that._copyStoriesToPortfolioItem(foundObject.Stories, portfolioitemRef, callback);
that._copyTasksToStory(foundObject.Tasks, portfolioitemRef, callback);
}, null);
});
};
this._copyTasksToStory = function(tasks, storyRef, callback) {
//Copy the array
var localTasks = tasks.slice(0);
if (localTasks.length > 0) {
var task = localTasks.pop();
that._copyTask(task._ref, storyRef, function () {
that._copyTasksToStory(localTasks, storyRef, callback);
});
}
else {
callback();
}
};
this._copyStoriesToPortfolioItem = function(stories, portfolioitemRef, callback) {
//Copy the array
var localStories = stories.slice(0);
if (localStories.length > 0) {
var task = localStories.pop();
that._copyStory(story._ref, portfolioitemRef, function () {
that._copyStoriesToPortfolioItem(localStories, portfolioitemRef, callback);
});
}
else {
callback();
}
};
this._copyStory = function(ref, portfolioitemRef, callback) {
rallyDataSource.getRallyObject(ref, function (foundObject) {
var type = "hierarchicalrequirement";
foundObject.WorkProduct = portfolioitemRef;
that._fireEvent("storyPreAdd", {story:foundObject});
that._addObject(foundObject, type, function (ref, warnings) {
if (callback) {
that._fireEvent("storyPostAdd", [ref]);
callback();
}
}, null);
});
};
this._copyTask = function(ref, storyRef, callback) {
alert('helooooddddddddddddd task', ref);
rallyDataSource.getRallyObject(ref, function (foundObject) {
var type = "task";
foundObject.WorkProduct = storyRef;
that._fireEvent("taskPreAdd", {task:foundObject});
that._addObject(foundObject, type, function (ref, warnings) {
if (callback) {
that._fireEvent("taskPostAdd", [ref]);
callback();
}
}, null);
});
};
this.copyPortfolioItem = function (ref, callback) {
alert('hello');
that._copyPortfolioItem(ref, undefined, that._copyAllFromBuffer);
finishedCallback = callback;
};
};
</script>
<style type="text/css">
/* Add app styles here */
</style>
<script type="text/javascript">
rally.addOnLoad(function() {
var selectedValue = null;
var tasksAdded = 0;
var storiesAdded = 0;
var portfolioitemAdded = 0;
var searchPortfolioItem;
var searchStories;
var goButton, chooseButton;
var chooser;
var waiter;
var dataSource = new rally.sdk.data.RallyDataSource('__WORKSPACE_OID__',
'__PROJECT_OID__',
'__PROJECT_SCOPING_UP__',
'__PROJECT_SCOPING_DOWN__');
function taskPostAdd(object, args) {
tasksAdded = tasksAdded + 1;
displayTasksAdded(tasksAdded);
}
function taskPreAdd(object, args) {
dojo.byId("currentInfo").innerHTML = "Adding Task " + args.task.FormattedID + " - " + args.task.Name;
}
function storyPreAdd(object, args) {
dojo.byId("currentInfo").innerHTML = "Adding User Story " + args.story.FormattedID + " - " + args.story.Name;
}
function storyPostAdd(object, args) {
storiesAdded = storiesAdded + 1;
displayStoriesAdded(storiesAdded);
}
function displayStoriesAdded(count) {
dojo.byId("storyResult").innerHTML = "Stories added: " + count;
}
function portfolioitemPreAdd(object, args) {
dojo.byId("currentInfo").innerHTML = "Adding PortfolioItem " + args.story.FormattedID + " - " ;
}
function portfolioitemPostAdd(object, args) {
portfolioitemsAdded = portfolioitemsAdded + 1;
displayPortfolioItemsAdded(portfolioitemsAdded);
}
function displayPortfolioItemsAdded(count) {
dojo.byId("portfolioitemResult").innerHTML = "PortfolioItems added: " + count;
}
function displayTasksAdded(count) {
dojo.byId("taskResult").innerHTML = "Tasks added: " + tasksAdded;
}
function portfolioitemCopied(portfolioitem) {
dojo.byId("currentInfo").innerHTML = "Copy complete: ";
var link = new rally.sdk.ui.basic.Link({
item: portfolioitem,
text: portfolioitem._refObjectName
});
link.display('currentInfo');
goButton.setEnabled(true);
chooseButton.setEnabled(true);
if(waiter) {
waiter.hide();
waiter = null;
}
}
function buttonPressed() {
if (selectedValue) {
var config = {
eventListeners:{
portfolioitemPreAdd:portfolioitemPreAdd,
portfolioitemPostAdd:portfolioitemPostAdd,
storyPreAdd:storyPreAdd,
storyPostAdd:storyPostAdd,
taskPreAdd:taskPreAdd,
taskPostAdd:taskPostAdd
}
};
portfolioitemsAdded = 0;
displayPortfolioItemsAdded(portfolioitemsAdded);
tasksAdded = 0;
displayTasksAdded(tasksAdded);
storiesAdded = 0;
displayStoriesAdded(storiesAdded);
dojo.byId("currentInfo").innerHTML = "";
var copy = new rally.PortfolioItemDeepCopy(dataSource, config);
goButton.setEnabled(false);
chooseButton.setEnabled(false);
waiter = new rally.sdk.ui.basic.Wait({});
waiter.display('wait');
copy.copyPortfolioItem(rally.sdk.util.Ref.getRelativeRef(selectedValue), portfolioitemCopied);
}
}
function onChooserClose(chooser, args) {
if (args.selectedItem) {
selectedValue = args.selectedItem;
goButton.setEnabled(true);
dojo.byId('portfolioitemBox').innerHTML = args.selectedItem.FormattedID + ' - ' + args.selectedItem.Name;
}
}
function showChooser() {
var chooserConfig = {
fetch:"FormattedID,Name,Description",
type: "PortfolioItem",
title: "Feature Chooser"
};
chooser = new rally.sdk.ui.Chooser(chooserConfig, dataSource);
chooser.addEventListener('onClose', onChooserClose);
chooser.display();
}
rally.addOnLoad(function () {
goButton = new rally.sdk.ui.basic.Button({
text: "Copy",
enabled: false
});
goButton.addEventListener('onClick', buttonPressed);
goButton.display('goButton');
chooseButton = new rally.sdk.ui.basic.Button({
text: "Choose"
});
chooseButton.addEventListener('onClick', showChooser);
chooseButton.display('chooseButton');
showChooser();
rally.sdk.ui.AppHeader.setHelpTopic("252");
});
});
</script>
</head>
<body>
<div id="container">
<div style="float:left">
<span id="chooseButton"></span>
<span id="portfolioitemBox" style="line-height:18px;vertical-align:middle">[No feature selected]</span>
<span id="goButton"></span>
</div>
<div id="wait" style="float:left; height: 16px; width: 24px;"></div>
<div style="margin-left:5px;padding-top:10px;clear:both">
<div id="currentInfo" style="height:16px"></div>
<div id="portfolioitemResult" style="margin-top:10px"></div>
<div id="storyResult"></div>
<div id="taskResult"></div>
</div>
</div>
</body>
</html>
In WS API there is no object "feature". Please try either portfolioitem/feature or portfolioitem and then filter out by _type, e.g.
if(results.pi[i]._type == "PortfolioItem/Feature"){ //...
as shown here.
Since you are using a legacy AppSDK1 I assume you are setting a version to 1.43 as mentioned in this post.

MVC 4 with Google Charts API

I have a chart using Google Charts API, I can display information directly from my view but I want to send the information from the controller, so far I have tried to send the information as Json, The problem is that the chart is being displayed but its all gray and doesnt really shown any information, it just says Other. is there anything I am missing? my controller is
Controller:
public JsonResult GetDataAssets()
{
List<object> data = new List<object>();
data.Add(new[] { "Task", "Hours per Day"});
data.Add(new[] { "Introduction", "100" });
data.Add(new[] { "Basic 1", "75" });
data.Add(new[] { "PHP", "24" });
return Json(data);
}
and in my view I have this
View:
<script type="text/javascript">
function drawVisualization() {
$.post('GetDataAssets', {}, function (d) {
var data = google.visualization.arrayToDataTable(d);
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, { title: "Top Videos", pieHole: 0.4 });
}
)
};
google.setOnLoadCallback(drawVisualization);
</script>
<div id="visualization" style="width: 600px; height: 400px; margin: auto"></div>
Well, I had to rethink the way to do it, instead of sending the JSON I'm sending it to then build the chart information, Here is what I did:
Controller:
public class PieChart
{
public string Name;
public decimal valor;
}
public ActionResult GetData()
{
return Json(CreateDataList(), JsonRequestBehavior.AllowGet);
}
public IEnumerable<PieChart> CreateDataList()
{
List<PieChart> data = new List<PieChart>();
PieChart r = new PieChart() { Name = "Introduction", valor = 20 };
PieChart r1 = new PieChart() { Name = "Basic 1", valor = 24 };
PieChart r2 = new PieChart() { Name = "PHP", valor = 74 };
data.Add(r);
data.Add(r1);
data.Add(r2);
return data;
}
And on the View
<script type="text/javascript">
function drawVisualization() {
$.get('GetData', {}, function (data) {
var tdata = new google.visualization.DataTable();
tdata.addColumn('string', 'Year');
tdata.addColumn('number', 'Hours');
for (var i = 0; i < data.length; i++) {
tdata.addRow([data[i].Name, data[i].valor]);
}
// Create and draw the visualization.
new google.visualization.PieChart(document.getElementById('visualization')).
draw(tdata, { title: "Top Videos", pieHole: 0.4 });
})
};
google.setOnLoadCallback(drawVisualization);
</script>

How to redirect to file picker

I am a freshman on skydrive. then I want to use file picker in html, and copy the demo code from Interactive Live SDK. but the running result, the open window is not direct to file picker page, just direct to my setting redirect_uri page. so what's wrong with my demo page? thanks
<script src="http://js.live.net/v5.0/wl.js" type="text/javascript"></script>
<script type="text/JavaScript">
<!--
/////////////////////////////
WL.init({ client_id: '$my appID', redirect_uri: 'http://www.learnyouwant.com' });
WL.ui({
name: "skydrivepicker",
element: "downloadFile_div",
mode: "open",
select: "multi",
onselected: onDownloadFileCompleted,
onerror: onDownloadFileError
});
WL.login({ "scope": "wl.skydrive wl.signin" }).then(
function(response) {
openFromSkyDrive();
},
function(response) {
log("Failed to authenticate.");
}
);
function openFromSkyDrive() {
WL.fileDialog({
mode: 'open',
select: 'single'
}).then(
function(response) {
log("The following file is being downloaded:");
log("");
var files = response.data.files;
for (var i = 0; i < files.length; i++) {
var file = files[i];
log(file.name);
WL.download({ "path": file.id + "/content" });
}
},
function(errorResponse) {
log("WL.fileDialog errorResponse = " + JSON.stringify(errorResponse));
}
);
}
function log(message) {
var child = document.createTextNode(message);
var parent = document.getElementById('JsOutputDiv') || document.body;
parent.appendChild(child);
parent.appendChild(document.createElement("br"));
}
function onDownloadFileCompleted(response) {
var msg = "";
// For each folder selected...
if (response.data.folders.length > 0) {
for (folder = 0; folder < response.data.folders.length; folder++) {
// Use folder IDs to iterate through child folders and files as needed.
msg += "\n" + response.data.folders[folder].id;
}
}
// For each file selected...
if (response.data.files.length > 0) {
for (file = 0; file < response.data.files.length; file++) {
// Use file IDs to iterate through files as needed.
msg += "\n" + response.data.files[file].id;
}
}
log(msg);
};
function onDownloadFileError(responseFailed) {
log(responseFailed.error.message);
}
//-->
</script>
I found the reason. the redirect_uri must same with the filling in the app registeration.