make the user setting page show all values for all modes

db/schema.v0.sql

@@ -290,12 +290,13 @@ CREATE TABLE IF NOT EXISTS `roster_user` (
 CREATE TABLE IF NOT EXISTS `contact_mode` (
   `id` int(11) NOT NULL AUTO_INCREMENT,
   `name` varchar(255) NOT NULL,
+  `label` varchar(255) NOT NULL,
   PRIMARY KEY (`id`)
 );
 -- -----------------------------------------------------
 -- Initialize contact modes
 -- -----------------------------------------------------
-INSERT INTO `contact_mode` (`name`)
+INSERT INTO `contact_mode` (`name`, `label`)
 VALUES ('email'), ('sms'), ('call'), ('slack');
 
 -- -----------------------------------------------------

src/oncall/api/v0/modes.py

@@ -7,9 +7,9 @@ def on_get(req, resp):
     Get all contact modes
     """
     connection = db.connect()
-    cursor = connection.cursor()
-    cursor.execute('SELECT `name` FROM `contact_mode`')
-    data = [row[0] for row in cursor]
+    cursor = connection.cursor(db.DictCursor)
+    cursor.execute('SELECT `name`, `label` FROM `contact_mode`')
+    data = cursor.fetchall()
     cursor.close()
     connection.close()
     resp.body = json_dumps(data)

src/oncall/ui/static/js/oncall.js

@@ -2009,6 +2009,7 @@ var oncall = {
     },
     init: function(){
       Handlebars.registerPartial('settings-subheader', this.data.settingsSubheaderTemplate);
+      oncall.getModes();
       this.getData();
     },
     events: function(){
@@ -2023,6 +2024,22 @@ var oncall = {
       }
     },
     renderPage: function(data){
+      $.when(
+        oncall.data.modesPromise
+      ).done(function() {
+        let contactModes = [];
+
+        for(let key in data.contacts)
+        {
+          let currentMode = oncall.data.modes.find(x => x.name === key);
+          contactModes.push({
+            key: currentMode.label,
+            value: data.contacts[key]
+          });
+        }
+        data.contactmodes = contactModes;
+        data.telmodes = ["Phone", "SMS Number"];
+      });
       var template = Handlebars.compile(this.data.pageSource),
            self = this;
       oncall.data.timezonesPromise.done(function() {

src/oncall/ui/templates/index.html

@@ -1159,46 +1159,27 @@
             </select>
           </td>
         </tr>
+        {{#each contactmodes}}
         <tr>
-          <td>Phone</td>
+          <td>{{key}}</td>
           <td>
             <span>
-            {{#if contacts.call}}
-              <a href="tel:{{contacts.call}}"> {{contacts.call}} </a>
-            {{else}}
-              {% endraw %}
-                {{missing_number_note|safe}}
-              {% raw %}
-            {{/if}}
-            </span>
-          </td>
-        </tr>
-        <tr>
-          <td>SMS Number</td>
-          <td>
-            <span>
-              {{#if contacts.sms}}
-                <a href="tel:{{contacts.sms}}"> {{contacts.sms}} </a>
+            {{#inArray key ../telmodes}}
+              {{#if value}}
+                <a href="tel:{{value}}"> {{value}} </a>
               {{else}}
                 {% endraw %}
                   {{missing_number_note|safe}}
                 {% raw %}
               {{/if}}
+            {{/inArray}}
+            {{^inArray key ../telmodes}}
+              {{value}}
+            {{/inArray}}
             </span>
           </td>
         </tr>
-        <tr>
-          <td>Email</td>
-          <td>
-            <span>{{contacts.email}}</span>
-          </td>
-        </tr>
-        <tr>
-          <td>Slack ID</td>
-          <td>
-            <span>{{contacts.slack}}</span>
-          </td>
-        </tr>
+        {{/each}}
       </table>
       <button type="submit" id="save-settings" class="btn btn-primary btn-sm pull-right"><span class="btn-text">Save Changes</span> <i class="loader loader-small"></i></button>
     </form>