add slack, github, and orcid (#2)

Author: dsschult

people_directory/people.py

@@ -11,7 +11,7 @@
 
 
 USER_DETAILS = ['firstName', 'lastName', 'email', 'username']
-USER_ATTRS = ['mobile']
+USER_ATTRS = ['mobile', 'slack', 'github', 'orcid']
 
 
 class People:
@@ -38,7 +38,7 @@ async def update(self):
             inst = insts[group_path]
             inst['group_path'] = group_path
 
-            if 'name' not in inst or 'cite' not in inst:
+            if 'name' not in inst or not inst.get('has_mou', False):
                 logging.info(f'bad inst: {group_path}')
                 del insts[group_path]
                 continue

people_directory/static/index.html

@@ -45,16 +45,30 @@ <h2>Navigation</h2>
     <div class="user header">
       <div class="name">Name</div>
       <div class="user-insts">Institution</div>
-      <div class="phone">Phone</div>
-      <div class="email">E-mail Address</div>
+      <div class="profiles">
+        <div class="github">GitHub</div>
+        <div class="orcid">ORCID</div>
+      </div>
+      <div class="contacts">
+        <div class="phone">Phone</div>
+        <div class="slack">Slack</div>
+        <div class="email">E-mail</div>
+      </div>
     </div>
     <vue-display class="user_list" v-bind:insts="insts" v-bind:users="users" v-bind:filtered_users="filtered_users" v-bind:filtered_insts="filtered_insts">
     {% for user in sorted(users.values(), key=lambda x: (x['lastName']+x['firstName']).lower()) %}
     <div class="user">
       <div class="name">{{ user['lastName'] }}, {{ user['firstName'] }}{% if 'IL' in user %} [IL]{% end %}</div>
       <div class="user-insts">{% for inst in user['institutions'] %}<span>{{ insts[inst]['name'] if inst in insts else '' }}</span>{% end %}</div>
-      <div class="phone">{{ user['mobile'] }}</div>
-      <div class="email">{{ user['email'] }}</div>
+      <div class="profiles">
+        <div class="github">{{ user['github'] }}</div>
+        <div class="orcid">{{ user['orcid'] }}</div>
+      </div>
+      <div class="contacts">
+        <div class="phone">{{ user['mobile'] }}</div>
+        <div class="slack">{{ user['slack'] }}</div>
+        <div class="email">{{ user['email'] }}</div>
+      </div>
     </div>
     {% end %}
     </vue-display>

people_directory/static/main.css

@@ -171,7 +171,7 @@ article .header {
 }
 
 article .user>div {
-    overflow-wrap: break-word;
+    overflow-wrap: anywhere;
     margin: 0;
     padding: 0;
     flex-grow: 0;
@@ -182,8 +182,8 @@ article .user .name {
     width: 14em;
 }
 article .user .user-insts {
+    margin-left: .5em;
     min-width: 14em;
-    margin: auto;
     flex-shrink: 1;
     flex-grow: 1;
 }
@@ -193,26 +193,36 @@ article .user .user-insts span {
 article .user .user-insts span:not(:last-child)::after {
     content: ",";
 }
-article .user .phone {
+article .user .profiles {
+    margin-left: .5em;
     width: 10em;
 }
-article .user .email {
+article .user .phone, article .user .github, article .user .slack, article .user .orcid, article .user .email {
+    display: inline-block;
+}
+article .user .github::after,
+article .user .slack::after,
+article .user .phone::after {
+    content: " | "
+}
+article .user .contacts {
     width: 18em;
+    margin-left: .5em;
     text-align: right;
 }
 @media all and (min-width: 1100px) {
-    article .user .phone {
+    article .user .profiles {
         width: 11em;
     }
-    article .user .email {
+    article .user .contacts {
         width: 22em;
     }
 }
 @media all and (min-width: 1200px) {
-    article .user .phone {
+    article .user .profiles {
         width: 12em;
     }
-    article .user .email {
+    article .user .contacts {
         width: 22em;
     }
 }

people_directory/static/main.js

@@ -63,14 +63,42 @@ Vue.component('vue-display', {
         return this.insts[group_path].name
       }
       return ''
+    },
+    profile_link: function(prefix, profile) {
+      if (profile == '') {
+        return ''
+      } else {
+        return '<a href="'+prefix+profile+'">'+profile+'</a>'
+      }
+    },
+    phone_link: function(phone) {
+      if (phone == '') {
+        return ''
+      } else {
+        return '<a href="tel:'+phone+'">'+phone+'</a>'
+      }
+    },
+    email_link: function(email) {
+      if (email == '') {
+        return ''
+      } else {
+        return '<a href="mailto:'+email+'">'+email+'</a>'
+      }
     }
   },
   template: `<div class="user_list">
 <div class="user" v-for="user in my_users" :key="user.username">
   <div class="name">{{ user.lastName }}, {{ user.firstName }}<span v-if="user.username in leads"> [IL]</span></div>
   <div class="user-insts"><span v-for="group_path in user.institutions">{{ inst_name(group_path) }}</span></div>
-  <div class="phone">{{ user.mobile }}</div>
-  <div class="email">{{ user.email }}</div>
+  <div class="profiles">
+    <div class="github" v-html="profile_link('https://github.com/', user.github)"></div>
+    <div class="orcid" v-html="profile_link('https://orcid.org/', user.orcid)"></div>
+  </div>
+  <div class="contacts">
+    <div class="phone" v-html="phone_link(user.mobile)"></div>
+    <div class="slack">{{ user.slack }}</div>
+    <div class="email" v-html="email_link(user.email)"></div>
+  </div>
 </div></div>`,
 })