attashe · December 6, 2015 15:18
diff --git a/event.html b/event.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title></title>




 <link rel="stylesheet" type="text/css" href="http://app.englishpatient.org/assets/css/semantic.min.css">

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

 <script src="http://www.parsecdn.com/js/parse-1.6.7.min.js"></script>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>

 <script src="https://ucarecdn.com/widget/2.5.5/uploadcare/uploadcare.full.min.js" charset="utf-8"></script>
 <script>
    UPLOADCARE_PUBLIC_KEY = 'dd345306a357718db01f';
 </script>

 <style>


 	.namePlaceholder{
 		font-weight: bold;
 	}

 	.descriptionPlaceholder{
 		font-style: italic;
 	}

 	.newEventPlaceholder{
 		padding: 10px;
 		border: 1px solid grey;
 	}

 	.inline.card{
 		display: inline-block;
 		margin-right: 10px;
 	}

 </style>

 </head>
 <body>

 <div style="width: 800px; margin: 0 auto; margin-top: 20px;">
 	

 	<h3 id="eventName"></h3>
 	<div class="ui segment" id="eventDescription" > </div>

 	<div class="ui stacked segment" >
 		<div id="photos">

 		</div>
 	</div>

 	<div class="ui stacked segment" >
 		<div class="ui form">
 			<div class="field">
 					<input id="url" placeholder="Ссылка на фотку" />
 			</div>
 			<button id="createButton" class="ui primary button" >
 			добавить фото
 			</button>
 			<input type="hidden" name="picture" role="uploadcare-uploader" />
 			<div id = "buttShow"></div>
 		</div>
 	</div>



 </div>


 <script type="text/javascript">

 function gup( name )
 {
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return null;
  else
    return results[1];
 }

 function initParse(){
 	Parse.initialize("yK4HcDpiuur0b7JutiNvM2QVrqlgI0nCe6n6kcEo", "AnCg59oXUeCQqyZrl54xiZBnrBApPUmZeyZJBI9k");
 }

 function getEventItemHtml(event){
 	var s = '<div class="eventItem ui message " ><span class="ui label" >' + moment(event.createdAt).format('LLL') + '</span><span class="namePlaceholder" >' + event.get('name') +'<span class="descriptionPlaceholder" > - <span>' + event.get('description') + '</span></div>';
 	return s;
 }

 function getButtShow(event){
 	var s = '<a class="ui primary basic" href="show.html?id=' + event + '" >посмотреть</a>';
 	return s
 }

 function drawButt(event){
 	var s = '';
 	s += getButtShow(event)
 	$('#buttShow').html(s);
 }

 function drawEvents(events){
 	var s = '';
 	for (var i in events){
 		var e = events[i];
 		s+= getEventItemHtml(e);
 	}
 	$('#events').html(s);
 }


 function initButton(){
 	$('#createButton').bind('click', function(){
 		var url = $('#url').val().trim();
 		var eventId = gup('id');
 		createPhoto(eventId, url, function(){
 			alert('new photo added');
 			window.location.reload();
 		})
 	});
 }

 function createPhoto(eventId, url, callback){
 	var Photo = Parse.Object.extend('Photo');
 	var p = new Photo();
 	p.set('eventId', eventId);
 	p.set('url', url)
 	p.save().then(function(savedPhoto){
 		callback(savedPhoto);
 	});
 }

 function loadEventPhotos(eventId, callback){
 	var q = new Parse.Query('Photo');
 	q.equalTo('eventId', eventId);
 	q.limit(1000);
 	q.addDescending('createdAt');
 	q.find(function(photos){
 		callback(photos);
 	});
 }

 function getPhotoHtml(p){
 	var s = '<div class="ui card inline" ><div class="image" ><img src="' + p.get('url') + '"></div><div class="extra content" <p>' + moment(p.createdAt).format('LLL') +  '</p></div></div>';
 	return s;
 }

 function drawPhotos(list){
 	var s = '';
 	for (var i in list){
 		s+= getPhotoHtml(list[i]);
 	}
 	$('#photos').html(s);
 }

 function loadEventById(eventId, callback){
 	var q = new Parse.Query('Event');
 	q.get(eventId, function(event){
 		drawEvent(event);
 		callback();
 	})
 }

 function drawEvent(e){
 	$('#eventName').html(e.get('name'));
 	$('#eventDescription').html(e.get('description'));
 }

 $(function(){
 	
 	var singleWidget = uploadcare.SingleWidget('[role=uploadcare-uploader]');
          console.log(singleWidget); // [widget1, widget2, multipleWidget1, ...]
          var widget = uploadcare.initialize();
          var abc = "2312";
          console.log(abc)
          singleWidget.onUploadComplete(function(info) {
              console.log(info);
            });

            // Same as above:
            singleWidget.onChange(function(file) {
              if (file) {
                file.done(function(info) {
                  console.log(info);
                });
              };
 });

 	var eventId = gup('id');

 	initParse();
 	initButton();
 	drawButt(eventId);


 	loadEventById(eventId, function(event){
 		loadEventPhotos(eventId, function(photos){
 			console.log('photos loaded');
 			drawPhotos(photos);
 		});
 	})

 })


 </script>

 </body>
 </html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>




	<link rel="stylesheet" type="text/css" href="http://app.englishpatient.org/assets/css/semantic.min.css">

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

	<script src="http://www.parsecdn.com/js/parse-1.6.7.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>

	<script src="https://ucarecdn.com/widget/2.5.5/uploadcare/uploadcare.full.min.js" charset="utf-8"></script>
	<script>
	UPLOADCARE_PUBLIC_KEY = 'dd345306a357718db01f';
	</script>

	<style>


	.namePlaceholder{
	font-weight: bold;
	}

	.descriptionPlaceholder{
	font-style: italic;
	}

	.newEventPlaceholder{
	padding: 10px;
	border: 1px solid grey;
	}

	.inline.card{
	display: inline-block;
	margin-right: 10px;
	}

	</style>

	</head>
	<body>

	<div style="width: 800px; margin: 0 auto; margin-top: 20px;">


	<h3 id="eventName"></h3>
	<div class="ui segment" id="eventDescription" > </div>

	<div class="ui stacked segment" >
	<div id="photos">

	</div>
	</div>

	<div class="ui stacked segment" >
	<div class="ui form">
	<div class="field">
	<input id="url" placeholder="Ссылка на фотку" />
	</div>
	<button id="createButton" class="ui primary button" >
	добавить фото
	</button>
	<input type="hidden" name="picture" role="uploadcare-uploader" />
	<div id = "buttShow"></div>
	</div>
	</div>



	</div>


	<script type="text/javascript">

	function gup( name )
	{
	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );
	if( results == null )
	return null;
	else
	return results[1];
	}

	function initParse(){
	Parse.initialize("yK4HcDpiuur0b7JutiNvM2QVrqlgI0nCe6n6kcEo", "AnCg59oXUeCQqyZrl54xiZBnrBApPUmZeyZJBI9k");
	}

	function getEventItemHtml(event){
	var s = '<div class="eventItem ui message " ><span class="ui label" >' + moment(event.createdAt).format('LLL') + '</span><span class="namePlaceholder" >' + event.get('name') +'<span class="descriptionPlaceholder" > - <span>' + event.get('description') + '</span></div>';
	return s;
	}

	function getButtShow(event){
	var s = '<a class="ui primary basic" href="show.html?id=' + event + '" >посмотреть</a>';
	return s
	}

	function drawButt(event){
	var s = '';
	s += getButtShow(event)
	$('#buttShow').html(s);
	}

	function drawEvents(events){
	var s = '';
	for (var i in events){
	var e = events[i];
	s+= getEventItemHtml(e);
	}
	$('#events').html(s);
	}


	function initButton(){
	$('#createButton').bind('click', function(){
	var url = $('#url').val().trim();
	var eventId = gup('id');
	createPhoto(eventId, url, function(){
	alert('new photo added');
	window.location.reload();
	})
	});
	}

	function createPhoto(eventId, url, callback){
	var Photo = Parse.Object.extend('Photo');
	var p = new Photo();
	p.set('eventId', eventId);
	p.set('url', url)
	p.save().then(function(savedPhoto){
	callback(savedPhoto);
	});
	}

	function loadEventPhotos(eventId, callback){
	var q = new Parse.Query('Photo');
	q.equalTo('eventId', eventId);
	q.limit(1000);
	q.addDescending('createdAt');
	q.find(function(photos){
	callback(photos);
	});
	}

	function getPhotoHtml(p){
	var s = '<div class="ui card inline" ><div class="image" ><img src="' + p.get('url') + '"></div><div class="extra content" <p>' + moment(p.createdAt).format('LLL') + '</p></div></div>';
	return s;
	}

	function drawPhotos(list){
	var s = '';
	for (var i in list){
	s+= getPhotoHtml(list[i]);
	}
	$('#photos').html(s);
	}

	function loadEventById(eventId, callback){
	var q = new Parse.Query('Event');
	q.get(eventId, function(event){
	drawEvent(event);
	callback();
	})
	}

	function drawEvent(e){
	$('#eventName').html(e.get('name'));
	$('#eventDescription').html(e.get('description'));
	}

	$(function(){

	var singleWidget = uploadcare.SingleWidget('[role=uploadcare-uploader]');
	console.log(singleWidget); // [widget1, widget2, multipleWidget1, ...]
	var widget = uploadcare.initialize();
	var abc = "2312";
	console.log(abc)
	singleWidget.onUploadComplete(function(info) {
	console.log(info);
	});

	// Same as above:
	singleWidget.onChange(function(file) {
	if (file) {
	file.done(function(info) {
	console.log(info);
	});
	};
	});

	var eventId = gup('id');

	initParse();
	initButton();
	drawButt(eventId);


	loadEventById(eventId, function(event){
	loadEventPhotos(eventId, function(photos){
	console.log('photos loaded');
	drawPhotos(photos);
	});
	})

	})


	</script>

	</body>
	</html>