Add a button to wipe all messages

css/style.css

@@ -235,15 +235,25 @@
 	width: auto;
 }
 
-#app-settings-content .new-button {
+#app-settings-content .new-button, #app-settings-content .crit-button {
-	width: 32px;
+	height: 34px;
+	vertical-align: middle;
 	background-size: 16px;
 	background-position: center;
 	background-repeat: no-repeat;
-	height: 34px;
-	vertical-align: middle;
 }
 
+#app-settings-content .new-button {
+	width: 32px;
+}
+
+#app-settings-content .crit-button {
+	width: 200px;
+	background-color: #822C19;
+	padding: 0 2em;
+}
+
+
 #app-settings-content input[type="checkbox"] {
 	vertical-align: middle;
 	cursor: pointer;

js/devel/contactlist.js

@@ -18,12 +18,18 @@ var ContactList = new Vue({
 		lastTotalUnreadCount: 0
 	},
 	created: function () {
-		this.contacts = [];
+		this.reset();
 		this.fetch();
 		this.checkNewMessages();
 		setInterval(this.checkNewMessages, 10000);
 	},
 	methods: {
+		reset: function () {
+			this.contacts = [];
+			this.lastRetrievedMessageDate = 0;
+			this.totalUnreadMessages = 0;
+			this.lastTotalUnreadCount = 0;
+		},
 		fetch: function () {
 			var self = this;
 			// Now bind the events when we click on the phone number

js/devel/settings.js

@@ -70,6 +70,12 @@ var SmsSettings = new Vue({
 					'country': self.country
 				}
 			);
+		},
+		wipeAllMessages: function () {
+			$.post(Sms.generateURL('/front-api/v1/delete/all'), {}, function () {
+				ContactList.reset();
+				Conversation.clear();
+			});
 		}
 	}
 });

templates/main.php

@@ -72,6 +72,9 @@ use \OCA\OcSms\Lib\CountryCodes;
 					<option value="0"><?php p($l->t('Disable'));?></option>
 				</select>
 			</div>
+            <div>
+                <button class="crit-button primary" v-on:click="wipeAllMessages();">Reset all messages</button>
+            </div>
 		</div> <!-- app-settings-content -->
 	</div>
 	<div id="app-conversation">