The structure is like this:
Test.aspx:
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Test.aspx.cs" Inherits="PartTimeFrontendMockup.Test" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback"/>
<!-- Font Awesome Icons -->
<link rel="stylesheet" href="plugins/fontawesome-free/css/all.min.css"/>
<!-- Theme style -->
<link id="stileAdminLTE" runat="server" rel="stylesheet" href="dist/css/adminlte.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<div class="card card-warning">
<div class="card-header">
<h3 class="card-title">Selezione date Part-time</h3>
</div>
<!-- /.card-header -->
<!-- form start -->
<form class="form-horizontal">
<div class="card-body">
<div class="form-group row">
<div class="col-sm-4">
<!-- small card -->
<div class="small-box bg-success">
<div class="inner">
<h3><span id="spanPTPerc">0</span><sup style="font-size: 20px">%</sup></h3>
<p>Percentuale part-time</p>
</div>
<div class="icon">
<i class="fas fa-calculator"></i>
</div>
</div>
</div>
<div class="card bg-blue col-sm-8 form-inline">
<label for="inputdalle" class="col-sm-2 col-form-label">Dalle</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputdalle" placeholder="Dalle" value="6:30"/>
</div>
<label for="inputalle" class="col-sm-2 col-form-label">Alle</label>
<div class="col-sm-4">
<input type="email" class="form-control" id="inputalle" placeholder="Alle" value="12:30"/>
</div>
</div>
</div>
</div>
<!-- /.card-body -->
<div class="card-footer">
</div>
<!-- /.card-footer -->
</form>
</div>
<div id="PTCalendar"></div>
<!-- jQuery -->
<script src="plugins/jquery/jquery.min.js"></script>
<!-- Momentjs -->
<script src="plugins/moment/moment.min.js"></script>
<!-- Bootstrap 4 -->
<script src="plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- AdminLTE App -->
<script src="dist/js/adminlte.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-loading-overlay/2.1.7/loadingoverlay.min.js" integrity="sha512-hktawXAt9BdIaDoaO9DlLp6LYhbHMi5A36LcXQeHgVKUH6kJMOQsAtIw2kmQ9RERDpnSTlafajo6USh9JUXckw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/main.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/fullcalendar#5.7.2/locales-all.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/PTMockup.js"></script>
</body>
</html>
Test.aspx.cs:
using Newtonsoft.Json;
using Newtonsoft.Json.Linq;
using PartTimeBackend;
using System;
using System.Collections.Generic;
namespace PartTimeFrontendMockup
{
public partial class Test : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack) {
if (Request["Action"] == "GetPTPercentage") {
string ss = "";
JObject j = new JObject();
JArray eventi=(JArray) JsonConvert.DeserializeObject(Request["eventi"]);
PTEvent pte = new PTEvent();
List<DateTime> LDT = new List<DateTime>();
DateTime dtdalle = new DateTime();
DateTime dtalle = new DateTime();
foreach (JObject evt in eventi) {
JProperty dalle = evt.Property("start");
JProperty alle = evt.Property("end");
dtdalle = Convert.ToDateTime(dalle.First.Value<String>());
dtalle = Convert.ToDateTime(alle.First.Value<String>());
pte.AddDateFromMisto(dtdalle, dtalle);
}
double asd = pte.PTpercentage;
string perc = String.Format("{0:0.0}", asd) ;
Response.Clear();
string ret = "OK";
if (ret == "OK")
{
j.Add("Stato", "OK");
j.Add("perc", perc);
}
else
{
j.Add("Stato", "KO");
j.Add("Errore", ret);
}
Response.Write(JsonConvert.SerializeObject(j));
Response.End();
}
}
}
}
}
Finally, classes file:
using System;
using System.Collections.Generic;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using EWSoftware.PDI;
using System.Data.Common;
using PartTimeBackend.models;
using EWSoftware.PDI.Objects;
using EWSoftware.PDI.Properties;
using EWSoftware.PDI.Parser;
using EWSoftware.PDI.Binding;
using System.Web;
namespace PartTimeBackend
{
public class PTEvent
{
public DateTime StartDateTimePT { get; set; }
public DateTime EndDateTimePT { get; set; }
public TimeSpan totalWorkingTime;
public double PTpercentage;
public string PTperc;
public int totDates;
public VCalendar vc;
public List<DateDuration> DDL;
public List<DateTime> datesChecker;
public PTEvent()
{
this.vc = new VCalendar();
DDL = new List<DateDuration>();
totDates = 0;
PTpercentage = 0;
totalWorkingTime = new TimeSpan();
datesChecker = new List<DateTime>();
StartDateTimePT = DateTime.Today;
EndDateTimePT = DateTime.Today;
}
public void AddDateFromMisto(DateTime dtFrom, DateTime dtTo)
{
DateDuration dd = new DateDuration();
RRuleProperty rrp = new RRuleProperty();
VEvent nve = new VEvent();
dd.dalle = dtFrom;
dd.alle = dtTo;
nve.RecurDates.Add(dtFrom);
this.DDL.Add(dd);
GetPTPercentage();
}
private void CalculateTOTs()
{
var distinctItems = this.DDL.Distinct();
this.totDates = this.DDL.Distinct().Count();
}
public string GetPTDates()
{
string allDates = "";
foreach (var x in this.DDL)
{
allDates += "date: " + x.dalle + "\t duration: " + x.Duration + "\r\n";
}
return allDates;
}
public void GetPTPercentage()
{
CalculateTOTs();
var distinctItems = this.DDL.Distinct();
TimeSpan ts = new TimeSpan();
foreach (var xx in distinctItems)
{
ts += xx.Duration;
}
this.PTpercentage = ((ts.TotalHours) / 1872) * 100;
this.totalWorkingTime = ts;
}
}
public class DateDuration
{
public DateTime dalle;
public DateTime alle;
public TimeSpan Duration
{
get { return alle - dalle; }
}
}
}
The web oage should work like this:
Whenever a user clicks on a date, the date should be marked as an event, the <span id="spanPTPerc">0</span> content should hold percentage of the Part-Time.
My problem can be summed into two major issues:
How can I debug the whole process? That would help trace the change in values in the variables and edit the code accordingly.
Is there a problem in the passing of the event data to C#? I think the whole issue relies in the conversion between datetime and the JavaScript's moment.js
Update: whenever I try to printout the JArray variable "eventi", i it is always "[]" which should indicate an empty array .. that might be the problem.
Mockup.js
function popErrore(testo) {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: testo,
})
}
/* initialize the calendar
-----------------------------------------------------------------*/
//Date for the calendar events (dummy data)
var date = new Date()
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear()
var Calendar = FullCalendar.Calendar;
var Draggable = FullCalendar.Draggable;
var containerEl = document.getElementById('external-events');
var checkbox = document.getElementById('drop-remove');
var calendarEl = document.getElementById('PTCalendar');
// initialize the external events
// -----------------------------------------------------------------
var j = [];
var calendar = new Calendar(calendarEl, {
locale: 'it',
headerToolbar: {
left: 'prev,next',
center: 'title',
right: ''
},
eventOverlap:false,
themeSystem: 'bootstrap',
eventDidMount: function (info) {
if (info.event.display != 'background') {
$(info.el).popover({
animation: true,
delay: 300,
html: true,
content: info.event.extendedProps.description,
trigger: 'hover'
});
}
},
});
calendar.render();
/* AGGIUNTA EVENTI */
function addNew(info) {
var strdalle = $("#inputdalle").val();
var stralle = $("#inputalle").val();
var dalle = new moment(info.dateStr +" "+ strdalle, "YYYY-MM-DD hh:mm")
var alle = new moment(info.dateStr + " " + stralle, "YYYY-MM-DD hh:mm")
var myEvent = {
title: "Part Time dalle " +strdalle + " alle " +stralle,
start: dalle,
end: alle,
description:'Part Time',
display:'block',
backgroundColor: 'green',
allDay: false
};
calendar.addEvent(myEvent);
}
calendar.on('dateClick', function (info) {
addNew(info);
$.post('Test.aspx', // url
{
Action: 'GetPTPercentage',
eventi: JSON.stringify(calendar.getEvents()),
}, // data to be submit
function (data, status, jqXHR) {// success callback
var jObj = JSON.parse(data);
if (jObj.Stato == "OK") {
$("#spanPTPerc").text(jObj.perc);
} else {
popErrore(jObj.Errore);
}
})
});
Related
Hello I am trying to implement a timer in c sharp that counts seconds and display it on my html page. But when i pass the variable to javascript it is always 0. I have searched everywhere for an answer.
This is my code so far:
The timer object:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Timers;
/// <summary>
/// Summary description for Class1
/// </summary>
public class TimerEu
{
private Timer t;
private int time;
public TimerEu()
{
this.t = new Timer(1000);
this.time = 0;
t.Elapsed += new ElapsedEventHandler(RunEvent);
t.Interval = 1000;
t.Enabled = true;
}
public void RunEvent(object source, ElapsedEventArgs e)
{
this.time++;
Console.WriteLine(time);
}
public int getTime()
{
return this.time;
}
}
aspx.cs page:
public partial class _Default : System.Web.UI.Page
{
public String[] var=new String[10];
public TimerEu time;
public int testint;
protected void Page_Load(object sender, EventArgs e)
{
time = new TimerEu();
testint = 0;
Console.Write("hello"+time.getTime());
for (int i = 0; i < 10; i++)
var[i] =Operations.test.convertString();
}
public void plus()
{
this.testint++;
}
}
and the html/javascript part:
<form id="form1" runat="server">
<div>
<br></br>
<br></br>
<br></br>
<p id="demo" runat="server"></p>
<script>
var now=0;
var x= setInterval(function () {
//now++;
now = <%=time.getTime()%>
// now =<%=testint%>
// <%plus();%>
document.getElementById("demo").innerHTML = now;
},1000)
</script>
The problem is that the javascript dosen't seem to call the getTime function every sec, instead it only gets 0 as output. What am I doing wrong?
You have to understand important thing. This statement <%=time.getTime()%> is executed only once on the server side before rendered html page is sent to the browser. When it's executed, it will be replaced with 0 (the result of method call).
Browser will see only now = 0 and in this case, javascript code doesn't make any sense
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
var before_loadtime = new Date().getTime();
window.onload = Pageloadtime;
function Pageloadtime() {
var aftr_loadtime = new Date().getTime();
// Time calculating in seconds
pgloadtime = (aftr_loadtime - before_loadtime) / 1000
document.getElementById("loadtime").innerHTML = "Pgae load time is <font color='red'><b>" + pgloadtime + "</b></font> Seconds";
}
</script>
</head>
<body>
<h3 style="font-weight: bold; font-style: italic; font-size: large; color: #3333CC">Page load time in JavaScript</h3>
<div>
<span id="loadtime"></span>
</div>
</body>
</html>
I have an autocomplete search box that culled up the thumbnail of images stored in the database. The problem is that the .jpg extension shows up each times the image name appears in the autocomplete search box. Is there anyway I can modify these codes to prevent the .jpg extension from appearing? Below is my existing code using javascript and ashx.
Thank you in advance!
the aspx:
<script src="scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
<script src="scripts/jquery.autocomplete.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#<%=txtSearch.ClientID%>").autocomplete("Search.ashx", {
width: 200,
formatItem: function (data, i, n, value) {
return "<img style = 'width:50px;height:50px' src= 'Images/" + value.split(",")[1] + "'/> " + value.split(",")[0];
},
formatResult: function (data, value) {
return value.split(",")[0];
}
});
});
</script>
<style type="text/css">
.Gridview {
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
color: black;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
Search here:
<asp:TextBox ID="txtSearch" runat="server" />
<br />
</div>
<div>
<asp:FileUpload ID="fileuploadimages" runat="server" />
<br />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />
</div>
<div>
</div>
<asp:Label ID="lblResult" runat="server"></asp:Label>
</form>
</body>
</html>
the ashx:
public class Search : IHttpHandler
{
public void ProcessRequest(HttpContext context)
{
string searchText = context.Request.QueryString["q"];
string strcon = ConfigurationManager.ConnectionStrings["dbconnection"].ConnectionString;
SqlConnection connection = new SqlConnection(strcon);
connection.Open();
SqlCommand cmd = new SqlCommand("select ID,ImageName,ImagePath from ImagesPath where ImageName Like #Search + '%'", connection);
cmd.Parameters.AddWithValue("#Search", searchText);
StringBuilder sb = new StringBuilder();
using (SqlDataReader dr = cmd.ExecuteReader())
{
while (dr.Read())
{
sb.Append(string.Format("{0},{1}{2}", dr["ImageName"], dr["ImageName"], Environment.NewLine));
}
}
connection.Close();
context.Response.Write(sb.ToString());
}
public bool IsReusable
{
get
{
return false;
}
}
}
Do a search and replace, either in the ashx
dr["ImageName"].ToString().Replace(".jpg", "");
Or in the database
select ID, REPLACE(ImageName, '.jpg', '') AS ImageName, ImagePath from ImagesPath
Or if you have more than one extension, you can also do this
Path.GetFileNameWithoutExtension(dr["ImageName"].ToString())
This filters out the extension of every file, and the path should it be present:
string file = #"c:\folder\testFile.jpg";
string result = Path.GetFileNameWithoutExtension(file);
//result: testFile
Translated to your snippet it would look something like this.
while (dr.Read())
{
string file = Path.GetFileNameWithoutExtension(dr["ImageName"].ToString());
sb.Append(string.Format("{0},{1}{2}", file, file, Environment.NewLine));
}
I am playing with Augmented Reality using Wikitude SDK for Google GLASS and it works fine. The data are loaded as it is supposed and on marker click i am showing a sidebar on the android device, however i am facing an issue when i try to TAP a marker on google glass. Tapping marker on device works fine with Wikitude AR Android SDK but how can i do the same using Wikitude for Google Glass.
As it is said in documentation the onMarkerSelectedfn function is the function which fires when a marker is selected on cam and yes that is working fine in the android device. But it is not working on google glass. Is there any special thing that i should do to work on Google glass too?
Shortly, how can i show details of the marker, on marker tap event, in another LiveCard or ImmersiveCard on Google Glass using Wikitude Augmented Reality SDK for Google Glass? or How to implement Browsing POI Presenting Details in that way that will work also in Google Glass?
onMarkerSelected: function onMarkerSelectedFn(marker) is the function triggered when POI Marker is selected.
Some sources that i found here describes same what i want to achieve however till that time this feature was not available on the SDK (i dont know if still not available as in documentation was not written). However any idea will be appriciated
Here is the WIkitude Google Glass Documentation
Here is the js function:
// fired when user pressed maker in cam
onMarkerSelected: function onMarkerSelectedFn(marker) {
World.currentMarker = marker;
// update panel values
$("#poi-detail-title").html(marker.poiData.name);
$("#poi-detail-description").html(marker.poiData.address);
//var distanceToUserValue = (marker.distanceToUser > 999) ? ((marker.distanceToUser / 1000).toFixed(2) + " km") : (Math.round(marker.distanceToUser) + " m");
$("#poi-detail-distance").html(marker.poiData.distance+" m");
// show panel
$("#panel-poidetail").panel("open", 123);
$( ".ui-panel-dismiss" ).unbind("mousedown");
$("#panel-poidetail").on("panelbeforeclose", function(event, ui) {
World.currentMarker.setDeselected(World.currentMarker);
});
},
Here is the Activity that shows the Markers:
public class RealityActivity extends Activity {
private Context context;
private GestureDetector mGestureDetector;
private ArchitectView architectView;
private double lat = 0.0;
private double lng = 0.0;
public static final String WIKITUDE_SDK_KEY = "API_KEY";
public long lastCalibrationToastShownTimeMillis = System.currentTimeMillis();
public String url = "5_1/index.html";
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.reality);
getActionBar().hide();
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON);
context = this;
Bundle args = getIntent().getExtras();
if (args != null) {
lat = args.getDouble("lat");
lng = args.getDouble("lng");
}
architectView = (ArchitectView) findViewById(R.id.architectView);
final ArchitectView.ArchitectConfig config = new ArchitectView.ArchitectConfig(WIKITUDE_SDK_KEY);
architectView.onCreate(config);
architectView.registerSensorAccuracyChangeListener(sensorAccuracyChangeListener);
mGestureDetector = createGestureDetector();
}
#Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
architectView.onPostCreate();
try {
architectView.load(url);
activateArchitectView();
} catch (IOException e) {
Log.v("log", "Could not load architect: " + e.getMessage());
}
}
ArchitectView.SensorAccuracyChangeListener sensorAccuracyChangeListener = new ArchitectView.SensorAccuracyChangeListener() {
#Override
public void onCompassAccuracyChanged(int accuracy) {
/* UNRELIABLE = 0, LOW = 1, MEDIUM = 2, HIGH = 3 */
if (accuracy < SensorManager.SENSOR_STATUS_ACCURACY_MEDIUM && !isFinishing() && System.currentTimeMillis() - lastCalibrationToastShownTimeMillis > 5 * 1000) {
Log.v("log", "ArchitectView.SensorAccuracyChangeListener");
lastCalibrationToastShownTimeMillis = System.currentTimeMillis();
}
}
};
private void activateArchitectView() {
new Timer().schedule(new TimerTask() {
#Override
public void run() {
runOnUiThread(new Runnable() {
#Override
public void run() {
architectView.setLocation(lat, lng, 100);
String params = getPoiInformation().toString();
callJavaScript("World.loadPoisFromJsonData", new String[]{params});
}
});
}
}, 3000);
}
private void callJavaScript(final String methodName, final String[] arguments) {
final StringBuilder argumentsString = new StringBuilder("");
for (int i = 0; i < arguments.length; i++) {
argumentsString.append(arguments[i]);
if (i < arguments.length - 1) {
argumentsString.append(", ");
}
}
if (this.architectView != null) {
final String js = (methodName + "( " + argumentsString.toString() + " );");
Log.v("log", "YER: " + js);
this.architectView.callJavascript(js);
}
}
private JSONArray getPoiInformation() {
JSONArray pois = new JSONArray();
List<MyModel> sliced = new ArrayList<MyModel>(FindModel.model);
if (FindModel.model.size() > 10) {
sliced = FindModel.model.subList(0, 10);
}
for (MyModel model : sliced) {
HashMap<String, String> poi = new HashMap<String, String>();
poi.put("id", String.valueOf(model.id));
poi.put("name", model.name);
poi.put("address", model.address);
poi.put("distance", String.valueOf(((int) model.distance)));
poi.put("lat", String.valueOf(model.lat));
poi.put("lng", String.valueOf(model.lng));
pois.put(new JSONObject(poi));
}
return pois;
}
#Override
public void onLowMemory() {
super.onLowMemory();
if (architectView != null) {
architectView.onLowMemory();
}
}
#Override
protected void onResume() {
super.onResume();
if (architectView != null) {
architectView.onResume();
if (sensorAccuracyChangeListener != null) {
architectView.registerSensorAccuracyChangeListener(sensorAccuracyChangeListener);
}
}
}
#Override
protected void onPause() {
super.onPause();
if (architectView != null) {
architectView.onPause();
if (sensorAccuracyChangeListener != null) {
architectView.unregisterSensorAccuracyChangeListener(sensorAccuracyChangeListener);
}
}
}
#Override
protected void onDestroy() {
super.onDestroy();
if (architectView != null) {
architectView.onDestroy();
}
}
private GestureDetector createGestureDetector() {
GestureDetector gestureDetector = new GestureDetector(context);
//Create a base listener for generic gestures
gestureDetector.setBaseListener( new GestureDetector.BaseListener() {
#Override
public boolean onGesture(Gesture gesture) {
if (gesture == Gesture.TAP) {
// do something on tap
Toast.makeText(context, "TAP", Toast.LENGTH_SHORT).show();
return true;
} else if (gesture == Gesture.TWO_TAP) {
// do something on two finger tap
Toast.makeText(context, "TWO_TAP", Toast.LENGTH_SHORT).show();
return true;
} else if (gesture == Gesture.SWIPE_RIGHT) {
// do something on right (forward) swipe
Toast.makeText(context, "SWIPE_RIGHT", Toast.LENGTH_SHORT).show();
return true;
} else if (gesture == Gesture.SWIPE_LEFT) {
// do something on left (backwards) swipe
Toast.makeText(context, "SWIPE_LEFT", Toast.LENGTH_SHORT).show();
return true;
}
return false;
}
});
gestureDetector.setFingerListener(new GestureDetector.FingerListener() {
#Override
public void onFingerCountChanged(int previousCount, int currentCount) {
// do something on finger count changes
}
});
gestureDetector.setScrollListener(new GestureDetector.ScrollListener() {
#Override
public boolean onScroll(float displacement, float delta, float velocity) {
// do something on scrolling"
return false;
}
});
return gestureDetector;
}
/*
* Send generic motion events to the gesture detector
*/
#Override
public boolean onGenericMotionEvent(MotionEvent event) {
if (mGestureDetector != null) {
return mGestureDetector.onMotionEvent(event);
}
return false;
}
}
and here is the index.html page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type"
content="application/json; charset=utf-8">
<meta
content="width=device-width,initial-scale=1,maximum-scale=5,user-scalable=yes"
name="viewport">
<script src="architect://architect.js"></script>
<!-- positioning of poi-radar -->
<link rel="stylesheet" href="css/poi-radar.css" />
<!-- jquery mobile CSS -->
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
<!-- required to set background transparent & enable "click through" -->
<link rel="stylesheet"
href="jquery/jquery-mobile-transparent-ui-overlay.css" />
<!-- jquery JS files -->
<script type="text/javascript" src="jquery/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery/jquery.mobile-1.3.2.min.js"></script>
<!-- marker representation-->
<script src="js/marker.js"></script>
<!-- World logic-->
<script type="text/javascript" src="js/presentingPoiDetails.js"></script>
<!-- radar component -->
<script type="text/javascript" src="js/radar.js"></script>
<script>
$( document ).ready(function() {
//alert("onReady");
//console.log("onReady");
//AR.logger.activateDebugMode();
$("#log").css({ opacity: 0 });
$("#footer").css({ opacity: 0 });
$(document).click(function (e) {
//alert("click");
if(e){
console.log("onclick");
alert(e);
}
});
$('#log').click(function (e) {
if(e){
console.log("onclick");
var offset = $(this).offset();
var left = e.clientX - offset.left);
var top = e.clientY - offset.top);
alert(left+":"+top);
}
});
});
</script>
</head>
<body>
<div data-role="page" id="page1" style="background: none;">
<!-- the radar div - Wikitude SDK radar will be drawn into this div -->
<div class="radarContainer_left" id="radarContainer"></div>
<div id="log" style="float: right;">log data</div>
<!-- transparent footer-->
<div id="footer" data-role="footer" class="ui-bar" data-theme="f"
data-position="fixed" style="text-align: center;">
<!-- small status-button -->
<a style="text-align: right;" id="popupInfoButton" href="#popupInfo"
data-rel="popup" data-role="button" class="ui-icon-alt"
data-inline="true" data-transition="pop" data-icon="alert"
data-theme="e" data-iconpos="notext">Log</a> <br />
<!-- popup displayed when button clicked -->
<div data-role="popup" id="popupInfo" class="ui-content"
data-theme="e" style="max-width: 350px;">
<p style="text-align: right;" id="status-message">Trying to find
out where you are</p>
</div>
</div>
<div
id="panel-poidetail"
data-role="panel"
data-position="right"
data-display="overlay"
data-theme="a" >
<div data-role="header">
Close
<h1>Detay</h1>
Path
</div>
<div data-role="content">
<b>Cami<b>
<br/>
<span id="poi-detail-title">Test Name</span>
<br/>
<br/>
<b>Test Address</b>
<br/>
<span id="poi-detail-description">Test Desc</span>
<br/>
<br/>
<b>Test Distance</b>
<br/>
<span id="poi-detail-distance">240 m</span>
<br/>
<br/>
</div>
</div>
</div>
</body>
</html>
This is my page.
#model JNCloud.Web.UI.Models.AppointmentModel
#{
Layout = null;
}
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>UB-04-081A</title>
<link href="~/Content/agency_media.css" type="text/css" media="all" rel="stylesheet" />
<link href="~/Content/agency_style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="../../Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="~/Scripts/Common/js/jquery.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.hoverIntent.minified.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.naviDropDown.1.0.js"></script>
<script type="text/javascript" src="../../Scripts/jquery-mask.js"></script>
<script type="text/javascript" src="../../Scripts/telerik.all.min.js"></script>
<script type="text/javascript" src="../../Scripts/scriptbreaker-multiple-accordion-1.js"></script>
<script src="#Url.Content("~/Scripts/jquery.poshytip.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.poshytip.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/fullcalendar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/calendar/overlib.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/form.section.validator.js")" type="text/javascript"></script>
<script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
<!--local fallback for JQuery-->
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="~/Scripts/Common/js/qyb8ood.js"></script>
<script type="text/javascript">try { Typekit.load(); } catch (e) { }</script>
<script>window.jQuery || document.write('<script src="scripts/jquery164min.js">\x3C/script>')</script>
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var arr = new Array();
$(document).ready(function () {
SelectedScheduleEvents('#Model.PrintAgencyUserID', '#Model.PrintFiltervisittypeID', '#Model.PrintPatientID', '#Model.PrinttypeSchedule', '#Model.PrintDate');
});
function SelectedScheduleEvents(agencyuserid, FiltervisittypeID, PatientID, typeSchedule, date) {
console.log('manoj');
$("#calendar").empty();
$("#LocationId").attr('data-val-number', 'Patient Name does not Exists');
var cdate = date.replace('-', ' ');
var d = new Date(cdate);
var m;
var y;
if (isNaN(d.valueOf())) {
d = new Date();
m = d.getMonth();
y = d.getFullYear();
}
else {
m = d.getMonth();
y = d.getFullYear();
}
var calendar = $('#calendar').fullCalendar({
header: {
left: 'prev,next,today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
year: y,
month: m,
agenda: 'h:mm{ - h:mm}',
editable: false,
disableResizing: true,
selectable: true,
selectHelper: true,
select: function (start, end, allDay, Id) {
var Selectedtdate = start;
//alert('start'+start);
var todate = new Date();
//alert('todate'+todate.getMonth()+3);
//if (Selectedtdate > todate && Selectedtdate.getDate() != todate.getDate()) {
//if (Selectedtdate > todate.getMonth()+3 ) {
// alert('Please select less than 90 days later from todate.');
// return;
//}
AddEvent(start);
calendar.fullCalendar('unselect');
},
events: { url: '#Url.Action("SelectedScheduleEvents", "Schedule")' + '?AgencyUsersID=' + agencyuserid + '&FiltervisittypeID=' + 0 + '&PatientID=' + PatientID + '&typeSchedule=' + typeSchedule },
eventClick: function (calEvent, jsEvent, view) {
var eventTime = $.fullCalendar.formatDate(calEvent.start, "h:sstt");
var Id = calEvent.id;
var apptype = calEvent.appointmenttype;
var clinicianId = calEvent.clinicianId;
var startdate = calEvent.start;
var enddate = calEvent.end;
var comment = calEvent.comment;
var meetduration = calEvent.duration;
var backcolor = calEvent.backgroundColor;
var patientIds = calEvent.patientIds;
var locationid = calEvent.locationId;
var lname = calEvent.locationName;
var visittypeid = calEvent.VisitTypeID;
EditEvent(Id, calEvent.title, patientIds, clinicianId, startdate, enddate, eventTime, meetduration, comment, backcolor, apptype, locationid, lname, visittypeid);
},
eventMouseout: function (calEvent, domEvent) {
if (!$("#events-layer").hasClass('mouse_in')) {
$("#events-layer").remove();
}
}
});
$("#divLoading").hide();
$("#hdnCurrentDate").val(0);
}
</script>
</head>
<body style="padding: 0; font-family: Arial, Helvetica, sans-serif;">
<div style="display: none">#Html.TextBoxFor(x => x.SelectedPID)</div>
<div class="widget first">
<div>
<div id="calendar" style="width: 100%;">
</div>
</div>
</div>
#* End Confirm Assessment form *#
</body>
</html>
And in controller when I use this
return View(objappointmentmodel);
then it's look like this
And when in controller I use this
return new ViewAsPdf("PrintCalendar", objappointmentmodel)
{
PageSize = Rotativa.Options.Size.A4,
PageOrientation = Orientation.Portrait,
PageMargins = { Left = 0, Right = 0 }
};
then it's look like this. This isn't loading properly.
What should I do?
I have researched also about this. But I can't find a proper solution.
Please suggest me.
i got similiar problem-
the rotativa didnt manage to handle the font-family.
when i use ARIAL the PDF looks good.
try also to change path to js and css file to a full path.
good luck
I've been using Rototiva recently to make customer print outs on the fly and I've ran into issues regarding relative paths as opposed to fully qualified paths. My strategy was to create a partial view and view model for the parts of my page that required jquery and images (rendered using the #Html.Action() helper) and then make the pdf with two different action results in my controller:
public ActionResult CustPrintOut() {
// doing stuff
return View("CustPrintOut"); // return a view that renders your partials
}
public ActionResult printout() {
return new ActionAsPdf("CustPrintOut") {
FileName = "printout.pdf"
};
}
i am developing an application using angular js in which i have to populate the customer list using data in database for that i write a web method to get the data like
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static string getname()
{
SqlHelper sql = new SqlHelper();
DataTable dt = sql.ExecuteSelectCommand("select cust_F_name,cust_L_name from customer");
Dictionary<string, object> dict = new Dictionary<string, object>();
object[] arr = new object[dt.Rows.Count];
List<CustName> custName = new List<CustName>();
for (int i = 0; i <= dt.Rows.Count - 1; i++)
{
CustName c = new CustName();
c.cust_F_name = dt.Rows[i]["cust_F_name"].ToString();
custName.Add(c);
}
dict.Add("JsonCustomer", custName);
JavaScriptSerializer json = new JavaScriptSerializer();
return json.Serialize(dict);
//return "Rhsuhikesh";
}
}
public class CustName
{
public string cust_F_name { get; set; }
}
catch that Json data as
var DemoApp = angular.module('DemoApp', []);
DemoApp.factory('SimpleFactory', function ($http) {
return {
getCustomer: function () {
return $http.post('Home.aspx/getname', { name: "" });
}
};
});
DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
SimpleFactory.getCustomer().then(function (customer) {
$scope.Customer = customer.data;
}, function (error) {
// error handling
});
});
and view it as
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="DemoApp">
<head runat="server">
<title></title>
</head>
<body data-ng-controller="SimpleController">
<form id="form1" runat="server">
<div>
Name<input type="text" data-ng-model="Name" />{{ Name }}
<ul>
<li data-ng-repeat="customerName in Customer | filter:Name">{{ customerName }} </li>
</ul>
</div>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="Script/Home.js" type="text/javascript"></script>
</body>
</html>
and I am getting o/p as
but i want it as
data in json i have to access in name value pair but i am not understand how to do it please help me to out if it.
thanks in advance.
Since you get your results as JSON string you need to convert it to JavaScript object using angular.fromJson
For example:
DemoApp.controller('SimpleController', function ($scope, SimpleFactory) {
SimpleFactory.getCustomer().then(function (customerData) {
var customersRawObject = angular.fromJson(customerData);
}, function (error) {
// error handling
});})
Then you can do somthing like this:
$scope.customerA=customersRawObject.JsonCustomer[0];