vue.ejs 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221
  1. <script>
  2. var app = new Vue({
  3. el: '#vue-app',
  4. data: {
  5. api_host : "http://192.241.167.183",
  6. newsletter: {
  7. email : '',
  8. alert_class : 'alert-secondary',
  9. alert_text : "Subscribing to newsletter...",
  10. show_alert : false,
  11. show_form : true,
  12. show_spinner : true,
  13. show_alert_close : false,
  14. subscribing : false
  15. },
  16. contact: {
  17. message: {
  18. name: "",
  19. email: "",
  20. subject: "",
  21. message: "",
  22. send_status: ""
  23. },
  24. feedback: {
  25. name: "",
  26. email: "",
  27. subject: "",
  28. message: "",
  29. topic: "",
  30. game: "",
  31. send_status: ""
  32. },
  33. report: {
  34. name: "",
  35. email: "",
  36. subject: "",
  37. message: "",
  38. topic: "",
  39. game: "",
  40. platform: "",
  41. game_version: "",
  42. send_status: "",
  43. }
  44. }
  45. },
  46. methods: {
  47. subscribe_to_newsletter: function(){
  48. if(this.newsletter.email != '' && !this.newsletter.subscribing){
  49. var vm = this;
  50. this.newsletter.alert_class = 'alert-secondary';
  51. this.newsletter.alert_text = "Subscribing to newsletter...";
  52. this.newsletter.show_alert = true;
  53. this.newsletter.show_form = false;
  54. this.newsletter.show_spinner = true;
  55. this.newsletter.subscribing = true;
  56. vm.newsletter.show_alert_close = false;
  57. var payload = { email: this.newsletter.email }
  58. console.log("Subscribing to newsletter", payload);
  59. var req = new XMLHttpRequest();
  60. req.open('POST', `${this.api_host}/register`, true);
  61. req.setRequestHeader('Content-Type', 'application/json');
  62. var res = undefined;
  63. req.onreadystatechange = function() {
  64. if(res != undefined) return;
  65. if(req.responseText != undefined && req.responseText != "") {
  66. res = JSON.parse(req.responseText);
  67. } else return;
  68. //console.log(res);
  69. var tracking_data = {
  70. email : vm.newsletter.email,
  71. already_registered: res.already_registered,
  72. confirmed_subscription: res.confirmed_subscription,
  73. registration_attempts: res.registration_attempts
  74. }
  75. if(req.status == 200) {
  76. vm.newsletter.alert_class = 'alert-success';
  77. vm.newsletter.show_alert = true;
  78. vm.newsletter.show_form = false;
  79. vm.newsletter.show_spinner = false;
  80. vm.newsletter.show_alert_close = false;
  81. if(res.confirmed_subscription) {
  82. vm.newsletter.alert_text = `You are already subscribed in this list.`;
  83. } else if(res.already_registered) {
  84. vm.newsletter.alert_text = `You are already registered in this list. We have sent another confirmation email to "${vm.newsletter.email}" Please confirm your subscription by following instructions on the email.`;
  85. } else {
  86. vm.newsletter.alert_text = `Thanks for subscribing! We have sent a confirmation email to "${vm.newsletter.email}".`;
  87. }
  88. vm.mixpanelTrack("Newsletter Signup", tracking_data);
  89. } else {
  90. vm.newsletter.alert_class = 'alert-danger';
  91. vm.newsletter.show_alert = true;
  92. vm.newsletter.show_form = true;
  93. vm.newsletter.show_spinner = false;
  94. vm.newsletter.show_alert_close = true;
  95. if(req.status == 400) {
  96. vm.newsletter.alert_text = `The email address provided is not valid!`;
  97. vm.mixpanelTrack("Newsletter Invalid Email", tracking_data);
  98. }
  99. if(req.status == 500) {
  100. vm.newsletter.alert_text = `There was an error with the server. Please try again later.`;
  101. vm.mixpanelTrack("Newsletter Error", tracking_data);
  102. }
  103. }
  104. setTimeout(function(){
  105. vm.newsletter.subscribing = false;
  106. }, 1000);
  107. };
  108. req.send(JSON.stringify(payload));
  109. }
  110. },
  111. close_newsletter_alert: function() {
  112. this.newsletter.show_alert = false;
  113. },
  114. create_message_payload: function(data, category) {
  115. var payload = { };
  116. payload.category = category;
  117. if(data.name != undefined) payload.name = data.name;
  118. if(data.email != undefined) payload.email = data.email;
  119. if(data.subject != undefined) payload.subject = data.subject;
  120. if(data.message != undefined) payload.message = data.message;
  121. if(data.topic != undefined) payload.topic = data.topic;
  122. if(data.game != undefined) payload.game = data.game;
  123. if(data.platform != undefined) payload.platform = data.platform;
  124. if(data.game_version != undefined) payload.game_version = data.game_version;
  125. return payload;
  126. },
  127. send_contact_message: function() {
  128. console.log(`Sending Message`, this.contact.message);
  129. this.contact.message.send_status = "sending";
  130. var vm = this;
  131. var req = new XMLHttpRequest();
  132. req.open('POST', `${this.api_host}/receive`, true);
  133. req.setRequestHeader('Content-Type', 'application/json');
  134. req.onreadystatechange = function() {
  135. if(req.status == 200) {
  136. if(vm.contact.message.send_status != "success"){
  137. vm.contact.message.send_status = "success";
  138. vm.trackMessageSent("Contact message sent", payload);
  139. }
  140. } else {
  141. if(vm.contact.message.send_status != "error") {
  142. vm.contact.message.send_status = "error";
  143. vm.trackMessageSent("Send message error", payload);
  144. }
  145. }
  146. }
  147. var payload = this.create_message_payload(this.contact.message, "Message")
  148. req.send(JSON.stringify(payload));
  149. },
  150. send_feedback_message: function() {
  151. console.log(`Sending Feedback`, this.contact.feedback);
  152. this.contact.feedback.send_status = "sending";
  153. var vm = this;
  154. var req = new XMLHttpRequest();
  155. req.open('POST', `${this.api_host}/receive`, true);
  156. req.setRequestHeader('Content-Type', 'application/json');
  157. req.onreadystatechange = function() {
  158. if(req.status == 200) {
  159. if(vm.contact.feedback.send_status != "success"){
  160. vm.contact.feedback.send_status = "success";
  161. vm.trackMessageSent("Feedback message sent", payload);
  162. }
  163. } else {
  164. if(vm.contact.feedback.send_status != "error"){
  165. vm.contact.feedback.send_status = "error";
  166. vm.trackMessageSent("Send message error", payload);
  167. }
  168. }
  169. }
  170. var payload = this.create_message_payload(this.contact.feedback, "Feedback")
  171. req.send(JSON.stringify(payload));
  172. },
  173. send_report_message: function() {
  174. console.log(`Sending Report`, this.contact.report);
  175. this.contact.report.send_status = "sending";
  176. var vm = this;
  177. var req = new XMLHttpRequest();
  178. req.open('POST', `${this.api_host}/receive`, true);
  179. req.setRequestHeader('Content-Type', 'application/json');
  180. req.onreadystatechange = function() {
  181. if(req.status == 200) {
  182. if(vm.contact.report.send_status != "success"){
  183. vm.contact.report.send_status = "success";
  184. vm.trackMessageSent("Bug report sent", payload);
  185. }
  186. } else {
  187. if(vm.contact.report.send_status != "error"){
  188. vm.contact.report.send_status = "error";
  189. vm.trackMessageSent("Send message error", payload);
  190. }
  191. }
  192. }
  193. var payload = this.create_message_payload(this.contact.report, "Bug Report")
  194. req.send(JSON.stringify(payload));
  195. },
  196. mixpanelTrack: function(event_name, properties){
  197. if (location.hostname !== "localhost" && location.hostname !== "127.0.0.1"){
  198. mixpanel.track(event_name, properties);
  199. console.log(`Tracking: \'${event_name}\'`, properties)
  200. } else {
  201. //console.log('No tracking in ' + location.hostname);
  202. console.log(`Tracking: \'${event_name}\'`, properties)
  203. }
  204. },
  205. trackMessageSent: function(event_title, payload){
  206. delete payload["name"];
  207. delete payload["message"];
  208. delete payload["subject"];
  209. this.mixpanelTrack(event_title, payload);
  210. }
  211. },
  212. computed: { },
  213. mounted: function () {
  214. this.$nextTick(function () {
  215. })
  216. }
  217. })
  218. </script>