The next generation of the Teknik Services. Written in ASP.NET.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

NewVault.cshtml 12KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. @model Teknik.Areas.Vault.ViewModels.NewVaultViewModel
  2. @using Teknik.Utilities
  3. @using Teknik.Areas.Vault.ViewModels
  4. @Styles.Render("~/Content/vault")
  5. <script type="text/javascript">
  6. var validateItemURL = '@Url.SubRouteUrl("vault", "Vault.Action", new { action = "ValidateItem" })';
  7. var createVaultURL = '@Url.SubRouteUrl("vault", "Vault.Action", new { action = "CreateVault" })';
  8. var itemCount = @Model.items.Count();
  9. </script>
  10. <div class="container">
  11. @if (Model.Error)
  12. {
  13. <div class="row">
  14. <div class="col-sm-10 col-sm-offset-1 text-center">
  15. <div class="alert alert-danger" role="alert">@Model.ErrorMessage</div>
  16. </div>
  17. </div>
  18. }
  19. <div class="modal fade" id="newItem" tabindex="-1" role="dialog" aria-labelledby="newItemLabel" aria-hidden="true">
  20. <div class="modal-dialog">
  21. <div class="modal-content">
  22. <form class="form" action="##" method="post" id="addItem" enctype="multipart/form-data">
  23. <div class="modal-header">
  24. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cancel</span></button>
  25. <h4 class="modal-title" id="newItemLabel">Add an Item</h4>
  26. </div>
  27. <div class="modal-body">
  28. <div class="row" id="item_error" style="display: none;">
  29. <div class="col-sm-10 col-sm-offset-1 text-center">
  30. <div class="alert alert-danger" role="alert" id="item_error_msg"></div>
  31. </div>
  32. </div>
  33. <div class="row">
  34. <div class="form-group col-sm-12">
  35. <label for="item_title"><h4>Title</h4></label>
  36. <input class="form-control" name="item_title" id="item_title" placeholder="Descriptive Title" title="enter a title for the item." type="text" />
  37. </div>
  38. </div>
  39. <div class="row">
  40. <div class="form-group col-sm-12">
  41. <label for="item_description"><h4>Description</h4></label>
  42. <textarea class="form-control wmd-input" name="item_description" id="item_description" placeholder="Optional" title="enter what the item is about." rows="5"></textarea>
  43. </div>
  44. </div>
  45. <div class="row">
  46. <div class="form-group col-sm-12">
  47. <label for="item_type"><h4>Type</h4></label>
  48. <select class="form-control" name="item_type" id="item_type">
  49. <option>Upload</option>
  50. <option>Paste</option>
  51. </select>
  52. </div>
  53. </div>
  54. <div class="row">
  55. <div class="form-group col-sm-12">
  56. <label for="item_url"><h4>URL Id</h4></label>
  57. <input class="form-control" name="item_url" id="item_url" placeholder="XXXXX" title="enter the url id for the item" type="text" />
  58. </div>
  59. </div>
  60. </div>
  61. <div class="modal-footer">
  62. <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  63. <button type="button" class="btn btn-primary" id="new_item_submit">Add</button>
  64. </div>
  65. </form>
  66. </div>
  67. </div>
  68. </div>
  69. <div class="modal fade" id="editItem" tabindex="-1" role="dialog" aria-labelledby="editItemLabel" aria-hidden="true">
  70. <div class="modal-dialog">
  71. <div class="modal-content">
  72. <form class="form" action="##" method="post" id="editItemForm" enctype="multipart/form-data">
  73. <input type="hidden" value="" id="item_id"/>
  74. <div class="modal-header">
  75. <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Cancel</span></button>
  76. <h4 class="modal-title" id="editItemLabel">Edit Item</h4>
  77. </div>
  78. <div class="modal-body">
  79. <div class="row" id="item_error" style="display: none;">
  80. <div class="col-sm-10 col-sm-offset-1 text-center">
  81. <div class="alert alert-danger" role="alert" id="item_error_msg"></div>
  82. </div>
  83. </div>
  84. <div class="row">
  85. <div class="form-group col-sm-12">
  86. <label for="item_title"><h4>Title</h4></label>
  87. <input class="form-control" name="item_title" id="item_title" placeholder="Descriptive Title" title="enter a title for the item." type="text" />
  88. </div>
  89. </div>
  90. <div class="row">
  91. <div class="form-group col-sm-12">
  92. <label for="item_description"><h4>Description</h4></label>
  93. <textarea class="form-control wmd-input" name="item_description" id="item_description" placeholder="Optional" title="enter what the item is about." rows="5"></textarea>
  94. </div>
  95. </div>
  96. </div>
  97. <div class="modal-footer">
  98. <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
  99. <button type="button" class="btn btn-primary" id="edit_item_submit">Save</button>
  100. </div>
  101. </form>
  102. </div>
  103. </div>
  104. </div>
  105. <div class="row">
  106. <div class="col-sm-10 col-sm-offset-1 text-center">
  107. <h2>Create a New Vault</h2>
  108. </div>
  109. </div>
  110. <form class="form" action="@Url.SubRouteUrl("vault", "Vault.Action", new { action = "CreateVault" })" method="post" id="newVaultForm">
  111. <div class="row">
  112. <div class="form-group col-sm-10 col-sm-offset-1">
  113. <label for="title"><h4>Title</h4></label>
  114. <input class="form-control" name="title" id="title" placeholder="Collection of items" title="enter a title for your vault." type="text" />
  115. </div>
  116. </div>
  117. <div class="row">
  118. <div class="form-group col-sm-10 col-sm-offset-1">
  119. <label for="article"><h4>Description</h4></label>
  120. <textarea class="form-control" name="description" id="description" placeholder="This is a cool collection of uploads and pastes" title="enter the description for this vault" rows="5"></textarea>
  121. </div>
  122. </div>
  123. <div class="row">
  124. <div class="form-group col-sm-8 col-sm-offset-2">
  125. <button type="button" class="btn btn-primary pull-right" id="add-item" data-toggle="modal" data-target="#newItem">Add Item</button>
  126. </div>
  127. <div class="form-group col-sm-2">
  128. <button type="submit" class="btn btn-primary pull-right" id="submit">Save Vault</button>
  129. </div>
  130. </div>
  131. <br />
  132. <div class="container" id="vault-items">
  133. @if (Model.items.Any())
  134. {
  135. int index = 0;
  136. foreach (NewVaultItemViewModel item in Model.items)
  137. {
  138. <div class="row vault-item" id="vault-item-@index">
  139. <div class="col-sm-8 col-sm-offset-2">
  140. <div class="panel panel-default">
  141. <div class="panel-heading">
  142. <div class="row">
  143. <div class="col-sm-8 text-left">
  144. <h4><b id="item-title">@item.title</b></h4>
  145. </div>
  146. <div class="col-sm-4">
  147. <div class="btn-group pull-right" role="group">
  148. <button type="button" class="btn btn-default" id="edit-item" data-toggle="modal" data-target="#editItem">Edit</button>
  149. <button type="button" class="btn btn-danger" id="remove-item">Remove</button>
  150. </div>
  151. </div>
  152. </div>
  153. </div>
  154. <div class="panel-body">
  155. <div class="row">
  156. <div class="col-sm-10 col-sm-offset-1 text-left">
  157. <dl class="dl-horizontal">
  158. <dt>Type</dt>
  159. <dd id="item-type">@item.type</dd>
  160. <dt>Url</dt>
  161. <dd id="item-url">@item.url</dd>
  162. </dl>
  163. </div>
  164. </div>
  165. </div>
  166. <div class="panel-footer" @((string.IsNullOrEmpty(item.description)) ? "style=\"display: none\"" : string.Empty)>
  167. <p id="item-description">@item.description</p>
  168. </div>
  169. </div>
  170. </div>
  171. </div>
  172. }
  173. }
  174. </div>
  175. </form>
  176. </div>
  177. <div id="templates" style="display: none">
  178. <div class="row" id="item-template">
  179. <div class="col-sm-8 col-sm-offset-2">
  180. <div class="panel panel-default">
  181. <div class="panel-heading">
  182. <div class="row">
  183. <div class="col-sm-8 text-left">
  184. <h4><b id="item-title"></b></h4>
  185. </div>
  186. <div class="col-sm-4">
  187. <div class="btn-group pull-right" role="group">
  188. <button type="button" class="btn btn-default" id="edit-item" data-toggle="modal" data-target="#editItem">Edit</button>
  189. <button type="button" class="btn btn-danger" id="remove-item">Remove</button>
  190. </div>
  191. </div>
  192. </div>
  193. </div>
  194. <div class="panel-body">
  195. <div class="row">
  196. <div class="col-sm-10 col-sm-offset-1 text-left">
  197. <dl class="dl-horizontal">
  198. <dt>Type</dt>
  199. <dd id="item-type"></dd>
  200. <dt>Url</dt>
  201. <dd id="item-url"></dd>
  202. </dl>
  203. </div>
  204. </div>
  205. </div>
  206. <div class="panel-footer">
  207. <p id="item-description"></p>
  208. </div>
  209. </div>
  210. </div>
  211. </div>
  212. </div>
  213. @Scripts.Render("~/bundles/vault")