Skip to content

Instantly share code, notes, and snippets.

@ikiw

ikiw/userCrushList.js

Created July 17, 2015 14:34
Show Gist options
  • Save ikiw/c7a41d2dc7882ebde5de to your computer and use it in GitHub Desktop.
Save ikiw/c7a41d2dc7882ebde5de to your computer and use it in GitHub Desktop.
Download ZIP
Ui5 User crush list UI
Raw
userCrushList.js
<!DOCTYPE html>
<html><head>
<meta http-equiv='X-UA-Compatible' content='IE=edge' />
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<title>Task Execution UI</title>
<style type="text/css">
.ownerText { margin-left: 0.5em }
.pageTopPadding { margin-top: 16px }
</style>
<script id='sap-ui-bootstrap' type='text/javascript'
src='/sapui5/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.ui.commons,sap.m,sap.ui.unified'></script>
<script>
sap.ui.core.Control.extend("my.GoogleMap", {
metadata : {
properties : { // setter and getter are created behind the scenes, incl. data binding and type validation
latitude: "float",
longitude: "float",
address : "string"
}
},
init: function(){
this._html = new sap.ui.core.HTML({content:"<div style='height:100%;width:100%;' id='" + this.getId()+"-map'></div>"});
},
renderer : function(oRm, oControl) {
oRm.write("<div style='height:400px;width:400px;margin:18px;' ");
oRm.writeControlData(oControl); // writes the Control ID and enables event handling - important!
oRm.write(">");
oRm.renderControl(oControl._html);
oRm.write("</div>");
},
onAfterRendering : function() {
if (!this.initialized) { // after the first rendering initialize the map
this.initialized = true;
geocoder = new google.maps.Geocoder();
var options = {
zoom:12,
//center: new google.maps.LatLng(this.getLatitude(),this.getLongitude()),
mapTypeId: "roadmap"
};
var _map = new google.maps.Map(jQuery.sap.domById(this.getId()+"-map"),options);
geocoder.geocode( { 'address': this.getAddress()}, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
_map.setCenter(results[0].geometry.location);
var marker = new google.maps.Marker({
map: _map,
position: results[0].geometry.location
});
} else {
alert('Geocode was not successful for the following reason: ' + status);
}
});
} else { // after subsequent rerenderings, the map needs to get the current values set
_map.setCenter(new google.maps.LatLng(this.getLatitude(),this.getLongitude()));
}
}
});
// PART 2: instantiate Control and place it onto the page
</script>
<script>
// ------------------- TOGGLE FUNCTION ------------------------------
var toggleCompact = function() {
console.log(shell.hasStyleClass("sapUiSizeCompact"));
if(!shell.hasStyleClass("sapUiSizeCompact")){
shell.addStyleClass("sapUiSizeCompact");
toggleCompactModeButton.setIcon("sap-icon://sys-monitor");
toggleCompactModeButton.setText("cozy mode");
} else {
shell.removeStyleClass("sapUiSizeCompact");
toggleCompactModeButton.setIcon("sap-icon://ipad");
toggleCompactModeButton.setText("compact mode");
}
};
// ------------------- FORMATTER ------------------------------
var formatter = {
formatPriorityValue: function(status){
console.log(status);
switch(status){
case "Low":
return 1;
break;
case "Medium":
return 2;
break;
case "High":
return 3;
break
default:
return 4;
break;
}
}
};
// ------------------- SHELL ------------------------------
var shell = new sap.ui.unified.Shell({
icon: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAaCAYAAAD1wA/qAAAABGdBTUEAALGPC/xhBQAAAAlwSFlzAAAOwgAADsIBFShKgAAAABl0RVh0U29mdHdhcmUAQWRvYmUgSW1hZ2VSZWFkeXHJZTwAAAXxSURBVFhH3VZpUJVVGD7GNNmPfpRW0w9r0qlpbMYZp2mxqalJ+1E5ZdOUZUqDpBmFuQEuuGKWK4KKggiyuF5MWQTZ1wsqeK/KFS6C7Miq4EVBNp+ec5e4H3AvqMiMfTPP8N3vPOc97/Mu50WI/80T3QTxOOPMLYh4wwrxWIuIYhKimsJMRXWiDkrUm35HmGFcN3/rx+27d6R+0x+jf7UBvZ1xtAZC4hgRWgWxrwxiLxFQDuFPyHd/4mAlxJFqE8/Cl78lT+6xIKgC4riZo+LfcLNNa47lXe4NJv+QlV2LP3b/kn+4KlDZ3iE0JOFTjCdDyjEjpQHrL7fA/2orfPUGrNA244vkerxwlA7tLoHYT6cPUVQo9wSVYTr5szKbMDOjEXOymvD6KTofUAoRZlp/UVVtWs9sNHIkfjC/f5xQh3ERMhjk+xabbIYTcq8tSE5IeVD/O0qK2K7HrOQ6lBs6Yeu509GD6PI7mPQPBfnxUN8iTFBV9qPrbnYwKFchDtC5HUWYnlhn06Zc6Oq+h4zr7ZgRX0u+HiLwGrPPvcE2cODawYEv2i35hllJtXYPs16ceFxmjwdu0mGT9uaA+8aryNlRCLGtANNia4Zse5G6AWLLFYph5vtiP78FFIXanBbP7C0y9D3pHj/k1bUhr74dBmbC8izK5kHrL7LEKMSnANfvdA3opFceb5MNlyD+zsfU6CoFhwlA9e0utFrZtSa8GsaMbNOx54qU2KMPtzvypsdWKIQ0tXfjKT9Gc40GwluHMf56OCbVILiwGWJPASOdTyc1+Ciy3GakK1s7Wa7krdVgamSFgidFPL1Pj7E7dfg6phI37nYr1j3PMVjreLY8a7cFuiODzm3HhEqFkNbOHnwVzdJYdwHC/SzEivMUlQexUWsSsYup98zFIX2z3ZJ5T8XIuqox7WSZgmcUuZXZkvZ/U2NltrKHQmXA5BqFCh+e551/bFARkjD5cHG/0pInX6pvw+q0GkwKYnbW5kIsp6jtdOBPDUb7XEZHd2/JaRvasFXTqHA4MP8GxPx0TIu4pvheYeBl4EVHPXIgfknHxrP1ivXwAgrxPMfyYglv16qGJMJIck9FYmWr3eieKWnBJ2GsWfdsiD8y4RSnLJfdFOGwVauw0drRzWzmYHKIXvG9lqU1bq8OE7Zp8TPt3GYFWD9r1Ly9lqrZ9JoTQxdhFjJ6w3nEFbcMeru4xHKAzU1GqrKt4BjD2TIvBbrGdoWN1wKv4Fnvi/3sWmez7+J4P5aTR/bJ+xNhFiI8shjtLMyOKEZa2S27guZElaKprfe2amGzCk9m6vNIOEYqy2hz9nW8tFOZKXvGPZI4aF3TI+9fhEXIBta/WwabL4WCMvGmrxarzpShpPnuoFmqutWBT0ML8IG3Bl4Z1Qp+yc12zIy4iu578kK3/RSyx5xOcIi6Jkc/mAiLkNVqjPaimN+TIX5NYpkkQnwTTcMpKBuCGHtOxhU3o7m9N4Py3SWmFAtOFsM5sgRTAllKnuyJBYmnH1yEWchEXw2qGdktjOjbPhqM9crBmNVZ+HD/ZTTaGHqDpsqK0NXTmxEZGDoNMfs0b60EU/Dc0+MeToTcPS/ecPhSg/LGYQ8YrPrAltOyZJTjDOi0X0XGgDkwSGJZKsSqTCIj4eFF0MIbO3IHnCNDifimtEq8Qoc+O5iP748W4l3fC3h58zkY+kxra1syww6eFLCY/eiRljQsIqSR5z3TDS4qPdSlzTZ9P3WxHkG5/f+xZBAgvj0F4RzHaznWhO8iEZGvHI7Whtu6euCwMh1iYULKsIkwGlqUaBBz2Ngu8ZjwVw6+ZHSXxJTA7XQJnClwsg+ddYrFEx5peN9Pgyl7Lhjxzi5O56WMqhtLhEPVCA9iYSKeW5f1H8/Ct/x9yzcPo9xT04ZXhOXWkk4sZtPNZ2R/ioH4McoEKdCZUV5Gh13ZmE5sUAvm8n0p90jn3aQgM5an8RqPV3KV+zKGX4S0uIzOjBSWJGU9GhHSqozqSGBJcvajEzFSGVmcmCwERj1KIf8CV1QrccFgXV8AAAAASUVORK5CYII="
});
shell.placeAt('content');
shell.addHeadItem(new sap.ui.unified.ShellHeadItem({icon:"sap-icon://home"}));
shell.addStyleClass("sapUiSizeCompact");
// Header
var userActionSheet = new sap.m.ActionSheet({
placement: sap.m.PlacementType.Bottom
});
var toggleCompactModeButton = new sap.m.Button({
icon:"sap-icon://ipad",
text:"cozy mode",
press:function(){toggleCompact()}
});
userActionSheet.addButton(toggleCompactModeButton);
var helpButton = new sap.m.Button({
icon: "sap-icon://travel-request",
text: "Get Help"
});
userActionSheet.addButton(helpButton);
var logoffButton = new sap.m.Button({
icon: "sap-icon://log",
text: "Logoff"
});
userActionSheet.addButton(logoffButton);
var user = new sap.ui.unified.ShellHeadUserItem({
username: "Richard",
image: "https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/demokit/explored/img/Man_01.png",
press: function() {
if (!userActionSheet.isOpen()) {
userActionSheet.openBy(user);
}
else {
userActionSheet.close();
}
}
});
shell.setUser(user);
var app = new sap.m.App();
shell.addContent(app);
//---------------------Task Execution UI--------------------------
//---------Data
var jsonData = { "Task" : {
"Subject" : "??????",
"Description" : "I must be 13 at that time. She was the class topper, a sweet, sincere yet funny girl. We, the nature's beings, have this innate tendency to be glory-hunters, making us seek not just the smartest/prettiest/strongest of the options available around us, but also someone who seems to fall around us in those parameters. I somehow managed to get the second rank almost always. Needless to say, I had fallen for her. There used to be this sweet green envy within me for her as she would always dress up spick and span, would answer all questions asked in class and was timely on the homework. I still remember her handwriting. She was a bit plump and had this lovely fluid laughter everyone adored.I remember my friends teasing me on how I would get all nervous and red-cheeked while speaking to her.", "Status" : "In Progress",
"DueDate": new Date(),
"Priority" : "Medium",
"Participants" : [{"Name": "Mike"}, {"Name": "Krish"}],
"ChangedOn" : "3 hours ago",
"Owner" : {"Name" : "Unknown", "Avatar":"https://sapui5.netweaver.ondemand.com/sdk/test-resources/sap/ui/demokit/explored/img/Woman_11.png" },
"Comments": [{"Author" : "Mike", "Text" : "Let me know, if you need help", "Date": "Just now"},
]
}};
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData(jsonData);
app.setModel(oModel);
app.bindElement("/Task");
function buildEditPanel() {
var page = new sap.m.Page({
enableScrolling: false,
showNavButton: true,
title: "Tell us about your crush!"
});
//--------- Left side
var subjectSection = new sap.ui.layout.VerticalLayout({width: "100%"});
subjectSection.addContent(new sap.m.Label({text: "Name of your crush" }));
subjectSection.addContent(new sap.m.TextArea({value: "{Subject}", editable: true, rows: 1, cols: 500}));
var descriptionSection = new sap.ui.layout.VerticalLayout({width: "100%"});
descriptionSection.addContent(new sap.m.Label({text: "What's your Story ?" }));
descriptionSection.addContent(new sap.m.TextArea({value: "{Description}", editable: true, rows: 10, cols: 500}));
var taskOverviewLayout = new sap.ui.layout.Grid({
defaultSpan: "L12 M12 S12",
vSpacing: 0.5,
content: [
subjectSection,
descriptionSection,
],
layoutData: new sap.ui.layout.SplitterLayoutData({
size: "210px",
resizable: false
}),
hSpacing: 0
});
taskOverviewLayout.addStyleClass("pageTopPadding");
var feedBar = new sap.m.Toolbar({design: sap.m.ToolbarDesign.Solid});
var image = new sap.m.Image({src: '{Owner/Avatar}', height: '40px'});
var feedInput = new sap.m.Input({placeholder:"Add Comment", editable: true});
var postButton = new sap.m.Button({icon: 'sap-icon://feeder-arrow', enabled: false});
feedBar.addContent(image);
feedBar.addContent(feedInput);
feedBar.addContent(postButton);
var feedList = new sap.m.List({
backgroundDesign: sap.m.BackgroundDesign.Translucent,
headerToolbar: feedBar
});
feedList.bindAggregation("items", {
path:"Comments",
template: new sap.m.FeedListItem({
sender: "{Author}",
timestamp: "{Date}",
text: "{Text}"
})
});
var leftSide = new sap.ui.layout.VerticalLayout({
content: [ taskOverviewLayout, feedList ],
//orientation: sap.ui.core.Orientation.Vertical,
layoutData: new sap.ui.layout.GridData({span: "L8 M6 S12"})
});
//--------Task Details
var ownerAndDate = new sap.ui.layout.VerticalLayout({
content: [new sap.m.Label({text: "{Subject}", design: sap.m.LabelDesign.Bold}),
new sap.m.Label({text: "{ChangedOn}"})
]});
var ownerHeader = new sap.ui.layout.HorizontalLayout({content: [new sap.m.Image({src: "{Owner/Avatar}"}), ownerAndDate]});
ownerAndDate.addStyleClass("ownerText");
ownerHeader.addStyleClass("pageTopPadding");
var detailsForm = new sap.ui.layout.form.SimpleForm({
maxContainerCols: 2,
layout: sap.ui.layout.form.SimpleFormLayout.ResponsiveGridLayout,
editable: true,
labelSpanL: 4,
labelSpanM: 4,
//labelSpanS: 4,
emptySpanL: 0,
emptySpanM: 0,
emptySpanS: 0,
content: [
new sap.m.Label({text: "Status"}),
new sap.m.Text({text: "In Progress"}),
new sap.m.Label({text: "First Met at ?"}),
new sap.m.Input({value: "Pune"}),
new sap.m.Label({text: "Date Range"}),
new sap.m.DatePicker()
]
});
var statusLayout = new sap.ui.layout.VerticalLayout({width: "100%"});
statusLayout.addContent(detailsForm);
var taskStatusList = new sap.m.List({backgroundDesign: sap.m.BackgroundDesign.Translucent});
var statusText = new sap.m.ObjectStatus({
text: "In Progress"
});
taskStatusList.addItem(
new sap.m.InputListItem({
label: "Status",
content: [statusText]
})
);
var taskDetailsList = new sap.m.List({backgroundDesign: sap.m.BackgroundDesign.Solid});
var priorityIndicator = new sap.m.RatingIndicator({
iconSelected: "sap-icon://warning",
iconUnselected: "sap-icon://warning",
iconHovered: "sap-icon://warning",
value: 2,
maxValue: 4,
tooltip: "{Priority}",
change: function(oEvent){
var source = oEvent.oSource;
var newValue = source.getValue();
source.setValue((newValue == 0 ? 1 : newValue));
}
});
var dueDatePicker = new sap.m.DateRangeSelection({
delimiterDRS1 : "@"
});
//Participants
var participantInput = new sap.m.Input({placeholder:"Add friends"});
var participantButton = new sap.m.Button({icon: 'sap-icon://add-contact'});
var participantsBar = new sap.m.Toolbar({
content: [ participantInput, participantButton],
design: sap.m.ToolbarDesign.Solid
});
var participantList = new sap.m.List({
headerToolbar: participantsBar,
mode: sap.m.ListMode.Delete,
backgroundDesign: sap.m.BackgroundDesign.Solid
});
var participantNameAndDetails = new sap.ui.layout.VerticalLayout({
content: [new sap.m.Link({text: "{Name}", design: sap.m.LabelDesign.Bold}),
new sap.m.Label({text: "{Email}"})
]});
var participantTemplate = new sap.m.CustomListItem({content: [new sap.m.Image({src: "/sapui5/resources/sap/ui/ux3/themes/sap_bluecrystal/img/feed/person_placeholder_48.png"}), participantNameAndDetails]});
participantList.bindAggregation("items", {
path:"Participants",
template: participantTemplate
});
// Structuring the page
var rightSide = new sap.ui.layout.Grid({
content: [
ownerHeader,
statusLayout,
participantList
],
vSpacing: 0.5,
defaultSpan: "L12 M12 S12",
width: '100%',
layoutData: new sap.ui.layout.GridData({span: "L4 M6 S12"})
});
rightSide.addStyleClass("pagePadding");
var mainGrid = new sap.ui.layout.Grid({
content: [ leftSide, rightSide ]
});
page.addContent(mainGrid);
// Footer
var footer = new sap.m.Toolbar();
footer.addContent(new sap.m.ToolbarSpacer());
var saveButton = new sap.m.Button({
text:"Save",
press:function(){
app.to(displayPanel, "flip");
}});
footer.addContent(saveButton);
var discardButton = new sap.m.Button({
text: "Cancel",
press:function(){
app.to(displayPanel, "flip");
}});
footer.addContent(discardButton);
page.setFooter(footer);
return page;
}
//var displayPanel = buildDisplayPanel();
var editPanel = buildEditPanel();
//app.addPage(displayPanel);
app.addPage(editPanel);
</script>
</head>
<body class='sapUiBody'>
<div id='content'></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment