New modal dialog for item expiry

2 files changed, 56 insertions, 3 deletions

diff --git a/view/tpl/jot-header.tpl b/view/tpl/jot-header.tpl
index 1ceca04c6..09d035979 100755
--- a/view/tpl/jot-header.tpl
+++ b/view/tpl/jot-header.tpl
@@ -194,10 +194,17 @@ function enableOnUser(){
 	}
 
 	function jotGetExpiry() {
-		reply = prompt("{{$expirewhen}}", $('#jot-expire').val());
-		if(reply && reply.length) {
+		//reply = prompt("{{$expirewhen}}", $('#jot-expire').val());
+		$('#expiryModal').modal();
+		$('#expiry-modal-OKButton').on('click', function() {
+    	reply=$('#expiration-date').val();
+    	if(reply && reply.length) {
 			$('#jot-expire').val(reply);
+			$('#expiryModal').modal('hide');
 		}
+})
+		
+		
 	}
 
 	function jotShare(id) {
@@ -299,3 +306,16 @@ function enableOnUser(){
 
 </script>
 
+<!-- 
+<script>
+$( document ).on( "click", ".wall-item-delete-link", function(e) {
+	var link = $(this).attr("href"); // "get" the intended link in a var
+    e.preventDefault();
+  	bootbox.confirm("<h4>Delete item?</h4>", function(result) {
+    				if (result) {
+      				document.location.href = link;}
+      				});
+    });
+</script>
+ -->
+
diff --git a/view/tpl/jot.tpl b/view/tpl/jot.tpl
index ef91f45be..72553f944 100755
--- a/view/tpl/jot.tpl
+++ b/view/tpl/jot.tpl
@@ -90,9 +90,42 @@
 			{{$jotnets}}
 		</div>
 	</div>
+<!-- Modal for item expiry-->
+<div class="modal fade" id="expiryModal" tabindex="-1" role="dialog" aria-labelledby="expiryModalLabel" aria-hidden="true">
+  <div class="modal-dialog">
+    <div class="modal-content">
+      <div class="modal-header">
+        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+        <h4 class="modal-title" id="expiryModalLabel">{{$expires}}</h4>
+      </div>
+     <!--  <div class="modal-body"> -->
+            <div class="modal-body form-group" style="width:90%">
+                <div class="input-group input-group-sm date" id="datetimepicker1">
+                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
+                    </span>
+                    <input id="expiration-date" type='text' class="form-control" data-format="YYYY-MM-DD HH:mm" size="20"/>
+                </div>
+            </div>
+      <!-- </div> -->
+      <div class="modal-footer">
+        <button type="button" class="btn btn-default" data-dismiss="modal">{{$expiryModalCANCEL}}</button>
+        <button id="expiry-modal-OKButton" type="button" class="btn btn-primary">{{$expiryModalOK}}</button>
+      </div>
+    </div><!-- /.modal-content -->
+  </div><!-- /.modal-dialog -->
+</div><!-- /.modal -->
+<script type="text/javascript">
+  $(function() {
+    $('#datetimepicker1').datetimepicker({
+      language: 'us'
+    });
+  });
+</script>
+</div>
+
+
 
 
-</div>
 
 <div id="profile-jot-end"></div>
 </form>