translation system implemented

www/templates/login.html

@@ -1,23 +1,23 @@
 <ion-modal-view>
   <ion-header-bar>
-    <h1 class="title">Login</h1>
+    <h1 class="title">{{'Login' | translate}}</h1>
     <div class="buttons">
-      <button class="button button-dark" ng-click="closeLogin()">Close</button>
+      <button class="button button-dark" ng-click="closeLogin()">{{'Close' | translate}}</button>
     </div>
   </ion-header-bar>
   <ion-content>
     <form ng-submit="doLogin()">
       <div class="list">
         <label class="item item-input">
-          <span class="input-label">Username</span>
+          <span class="input-label">{{'Username' | translate}}</span>
           <input type="text" ng-model="loginData.username">
         </label>
         <label class="item item-input">
-          <span class="input-label">Password</span>
+          <span class="input-label">{{'Password' | translate}}</span>
           <input type="password" ng-model="loginData.password">
         </label>
         <label class="item">
-          <button class="button button-block button-positive" type="submit">Log in</button>
+          <button class="button button-block button-positive" type="submit">{{'Login' | translate}}</button>
         </label>
       </div>
     </form>

www/templates/menu.html

@@ -14,23 +14,23 @@
 
   <ion-side-menu side="left">
     <ion-header-bar class="bar-positive">
-      <h1 class="title">Menu</h1>
+      <h1 class="title">{{'Menu' | translate }}</h1>
     </ion-header-bar>
     <ion-content>
       <ion-list>
         <ion-item menu-close ng-click="signup()" ng-show="!storageusername">
-            Signup
+            {{'Signup' | translate }}
         </ion-item>
         <ion-item menu-close ng-click="login()" ng-show="!storageusername">
-          Login
+          {{'Login' | translate }}
         </ion-item>
         <ion-item menu-close href="#/app/travels">
             <img class='o-imgMenu' src="img/road.png" />
-          Travels
+          {{'Travels' | translate }}
         </ion-item>
         <ion-item menu-close href="#/app/users">
             <img class='o-imgMenu' src="img/users.png" />
-          Users
+          {{'Users' | translate }}
         </ion-item>
         <ion-item menu-close href="#/app/users/{{storageusername}}" ng-show="storageusername">
             <img class='o-imgMenu' ng-src="img/avatars/{{storageavatar}}.png" />
@@ -38,10 +38,10 @@
         </ion-item>
         <ion-item menu-close href="#/app/settings">
             <img class='o-imgMenu' src="img/settings.png" />
-          Settings
+          {{'Settings' | translate }}
         </ion-item>
         <ion-item menu-close ng-click="logout()" ng-show="storageusername">
-          Logout
+          {{'Logout' | translate }}
         </ion-item>
       </ion-list>
     </ion-content>

www/templates/newaskingpackage.html

@@ -1,53 +1,55 @@
-<ion-modal-view view-title="Travel">
+<ion-modal-view view-title="{{'Travel' | translate}}">
   <ion-content>
 
-    <h4>
+    <h4 class="padding">
         <img class='o-imgTitle' src="img/package.png" />
-        New Asking Package {{newtravel.title}}
+        {{'New_Asking_Package' | translate}} {{newtravel.title}}
     </h4>
     <form class="list">
         <label class="item item-input">
-            <span class="input-label"t>Title</span>
+            <span class="input-label"t>{{'Title' | translate}}</span>
             <input ng-model="newtravel.title" class="positive" type="text" placeholder="">
         </label>
 
         <label class="item item-input">
             <img class='o-imgMenu' src="img/localization.png" />
-            <span class="input-label">From</span>
+            <span class="input-label">{{'From' | translate}}</span>
             <input ng-model="newtravel.from" type="text" placeholder="">
         </label>
         <label class="item item-input">
             <img class='o-imgMenu' src="img/localization.png" />
-            <span class="input-label">To</span>
+            <span class="input-label">{{'To' | translate}}</span>
             <input ng-model="newtravel.to" type="text" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label">Date</span>
+            <span class="input-label">{{'Date' | translate}}</span>
             <input ng-model="newtravel.date" type="date" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label">hour</span>
+            <span class="input-label">{{'Hour' | translate}}</span>
             <input ng-model="newtravel.date" type="time" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label"><i class="icon ion-iphone"></i> phone contact</span>
+            <span class="input-label"><i class="icon ion-iphone"></i> {{'Phone_contact' | translate}}</span>
             <input ng-model="newtravel.phone" type="number" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label">telegram user</span>
+            <span class="input-label">{{'Telegram_user' | translate}}</span>
             <input ng-model="newtravel.telegram" type="text" placeholder="">
         </label>
 
         <label class="item item-input item-floating-label">
-            <span class="input-label">Description</span>
+            <span class="input-label">{{'Description' | translate}}</span>
             <input ng-model="newtravel.description" type="text" placeholder="Description">
         </label>
-        <button ng-click="closeNewAskingPackage()" class="button button-assertive">
-           Cancel
-        </button>
-        <button ng-click="doNewAskingPackage()" class="button button-calm">
-           Create asking package
-        </button>
+        <p class="padding">
+          <button ng-click="closeNewAskingPackage()" class="button button-assertive">
+             {{'Cancel' | translate}}
+          </button>
+          <button ng-click="doNewAskingPackage()" class="button button-calm right">
+             {{'Create_asking_package' | translate}}
+          </button>
+        </p>
     </form>
 
   </ion-content>

www/templates/newaskingtravel.html

@@ -1,62 +1,63 @@
-<ion-modal-view view-title="Travel">
+<ion-modal-view view-title="{{'Travel' | translate}}">
   <ion-content>
 
-    <h4>
+    <h4 class="padding">
         <img class='o-imgTitle' src="img/asking.png" />
-        New Asking Travel {{newtravel.title}}
+        {{'New_Asking_Travel' | translate }} {{newtravel.title}}
     </h4>
     <form class="list">
         <label class="item item-input">
-            <span class="input-label"t>Title</span>
+            <span class="input-label"t>{{'Title' | translate }}</span>
             <input ng-model="newtravel.title" class="positive" type="text" placeholder="">
         </label>
 
         <label class="item item-input">
             <img class='o-imgMenu' src="img/localization.png" />
-            <span class="input-label">From</span>
+            <span class="input-label">{{'From' | translate }}</span>
             <input ng-model="newtravel.from" type="text" placeholder="">
         </label>
         <label class="item item-input">
             <img class='o-imgMenu' src="img/localization.png" />
-            <span class="input-label">To</span>
+            <span class="input-label">{{'To' | translate }}</span>
             <input ng-model="newtravel.to" type="text" placeholder="">
         </label>
 
         <label class="item item-input">
-            <span class="input-label">nº people</span>
+            <span class="input-label">{{'n_People' | translate }}</span>
             <input ng-model="newtravel.seats" type="number" placeholder="">
         </label>
-        <ion-toggle ng-model="newtravel.package" toggle-class="toggle-calm">
-            <img class='o-imgMenu' src="img/package.png" />
-            Need to carry package
-        </ion-toggle>
         <label class="item item-input">
-            <span class="input-label">Date</span>
+            <span class="input-label">{{'Date' | translate }}</span>
             <input ng-model="newtravel.date" type="date" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label">hour</span>
+            <span class="input-label">{{'Hour' | translate }}</span>
             <input ng-model="newtravel.date" type="time" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label"><i class="icon ion-iphone"></i> phone contact</span>
+            <span class="input-label"><i class="icon ion-iphone"></i> {{'Phone_contact' | translate }}</span>
             <input ng-model="newtravel.phone" type="number" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label">telegram user</span>
+            <span class="input-label">{{'Telegram_user' | translate }}</span>
             <input ng-model="newtravel.telegram" type="text" placeholder="">
         </label>
-
+        <ion-toggle ng-model="newtravel.package" toggle-class="toggle-calm">
+            <img class='o-imgMenu' src="img/package.png" />
+            {{'Need_to_carry_package' | translate }}
+        </ion-toggle>
         <label class="item item-input item-floating-label">
             <span class="input-label">Description</span>
             <input ng-model="newtravel.description" type="text" placeholder="Description">
         </label>
-        <button ng-click="closeNewAskingTravel()" class="button button-assertive">
-           Cancel
-        </button>
-        <button ng-click="doNewAskingTravel()" class="button button-calm">
-           Create travel
-        </button>
+        <p class="padding">
+          <button ng-click="closeNewAskingTravel()" class="button button-assertive">
+             {{'Cancel' | translate }}
+          </button>
+          <button ng-click="doNewAskingTravel()" class="button button-calm">
+             {{'Create_asking_travel' | translate }}
+          </button>
+        </p>
     </form>
 
   </ion-content>

www/templates/newofferingtravel.html

@@ -1,65 +1,67 @@
-<ion-modal-view view-title="Travel">
+<ion-modal-view view-title="{{'Travel' | translate}}">
   <ion-content>
 
-    <h4>
+    <h4 class="padding">
         <img class='o-imgTitle' src="img/offering.png" />
-        New Travel {{newtravel.title}}
+        {{'New_Travel' | translate}} {{newtravel.title}}
     </h4>
     <form class="list">
         <label class="item item-input">
-            <span class="input-label"t>Title</span>
+            <span class="input-label"t>{{'Title' | translate}}</span>
             <input ng-model="newtravel.title" class="positive" type="text" placeholder="">
         </label>
 
         <label class="item item-input">
             <img class='o-imgMenu' src="img/localization.png" />
-            <span class="input-label">From</span>
+            <span class="input-label">{{'From' | translate}}</span>
             <input ng-model="newtravel.from" type="text" placeholder="">
         </label>
         <label class="item item-input">
             <img class='o-imgMenu' src="img/localization.png" />
-            <span class="input-label">To</span>
+            <span class="input-label">{{'To' | translate}}</span>
             <input ng-model="newtravel.to" type="text" placeholder="">
         </label>
 
         <label class="item item-input">
-            <span class="input-label">nºSeats</span>
+            <span class="input-label">{{'n_Seats' | translate}}</span>
             <input ng-model="newtravel.seats" type="number" placeholder="">
         </label>
-        <ion-toggle ng-model="newtravel.package" toggle-class="toggle-calm">
-            <img class='o-imgMenu' src="img/package.png" />
-            Can carry package
-        </ion-toggle>
         <label class="item item-input">
-            <span class="input-label">Date</span>
+            <span class="input-label">{{'Date' | translate}}</span>
             <input ng-model="newtravel.date" type="date" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label">hour</span>
+            <span class="input-label">{{'Hour' | translate}}</span>
             <input ng-model="newtravel.date" type="time" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label"><i class="icon ion-iphone"></i> phone contact</span>
+            <span class="input-label"><i class="icon ion-iphone"></i> {{'Phone_contact' | translate}}</span>
             <input ng-model="newtravel.phone" type="number" placeholder="">
         </label>
         <label class="item item-input">
-            <span class="input-label">telegram user</span>
+            <span class="input-label">{{'Telegram_user' | translate}}</span>
             <input ng-model="newtravel.telegram" type="text" placeholder="">
         </label>
+        <ion-toggle ng-model="newtravel.package" toggle-class="toggle-calm">
+            <img class='o-imgMenu' src="img/package.png" />
+            {{'Can_carry_package' | translate}}
+        </ion-toggle>
         <ion-toggle ng-model="newtravel.collectivized" toggle-class="toggle-calm">
-            Collectivized car
+            {{'Collectivized_car' | translate}}
         </ion-toggle>
 
         <label class="item item-input item-floating-label">
-            <span class="input-label">Description</span>
+            <span class="input-label">{{'Description' | translate}}</span>
             <input ng-model="newtravel.description" type="text" placeholder="Description">
         </label>
-        <button ng-click="closeNewOfferingTravel()" class="button button-assertive">
-           Cancel
-        </button>
-        <button ng-click="doNewOfferingTravel()" class="button button-calm">
-           Create travel
-        </button>
+        <p class="padding">
+          <button ng-click="closeNewOfferingTravel()" class="button button-assertive">
+             {{'Cancel' | translate}}
+          </button>
+          <button ng-click="doNewOfferingTravel()" class="button button-calm">
+             {{'Create_travel' | translate}}
+          </button>
+        </p>
     </form>
 
   </ion-content>

www/templates/settings.html

@@ -1,5 +1,14 @@
-<ion-view view-title="Settings">
+<ion-view view-title="{{'Settings' | translate}}">
   <ion-content>
-    <h1>Settings</h1>
+    <h1>{{'Settings' | translate}}</h1>
+    <label class="item item-input item-select">
+    <div class="input-label">
+      {{'Actual_language' | translate}}
+    </div>
+    <select ng-model="lang" ng-change="langChange(this.lang)">
+      <option value="english">english</option>
+      <option value="catala">català</option>
+    </select>
+  </label>
   </ion-content>
 </ion-view>

www/templates/signup.html

@@ -1,40 +1,40 @@
 <ion-modal-view>
   <ion-header-bar>
-    <h1 class="title">Signup</h1>
+    <h1 class="title">{{'Signup' | translate }}</h1>
     <div class="buttons">
-      <button class="button button-dark" ng-click="closeSignup()">Close</button>
+      <button class="button button-dark" ng-click="closeSignup()">{{'Close' | translate }}</button>
     </div>
   </ion-header-bar>
   <ion-content>
     <form ng-submit="doSignup()">
       <div class="list">
         <label class="item item-input">
-          <span class="input-label">Username</span>
+          <span class="input-label">{{'Username' | translate }}</span>
           <input type="text" ng-model="signupData.username">
         </label>
         <label class="item item-input">
-          <span class="input-label">Password</span>
+          <span class="input-label">{{'Password' | translate }}</span>
           <input type="password" ng-model="signupData.password">
         </label>
         <label class="item item-input">
-          <span class="input-label">Mail</span>
+          <span class="input-label">{{'Mail' | translate }}</span>
           <input type="email" ng-model="signupData.mail">
         </label>
         <label class="item item-input">
-          <span class="input-label">Phone</span>
+          <span class="input-label">{{'Phone' | translate }}</span>
           <input type="number" ng-model="signupData.phone">
         </label>
         <label class="item item-input">
-          <span class="input-label">Telegram</span>
+          <span class="input-label">{{'Telegram' | translate }}</span>
           <input type="text" ng-model="signupData.telegram">
         </label>
         <label class="item item-input">
-          <span class="input-label">Avatar</span>
+          <span class="input-label">{{'Avatar' | translate }}</span>
           <input type="text" ng-model="signupData.avatar">
         </label>
 
         <label class="item">
-          <button class="button button-block button-positive" type="submit">Sign up</button>
+          <button class="button button-block button-positive" type="submit">{{'Signup' | translate }}</button>
         </label>
       </div>
     </form>

www/templates/travel.html

@@ -1,10 +1,11 @@
-<ion-view view-title="Travel">
+<ion-view view-title="{{'Travel' | translate}}">
   <ion-content>
     <div class="item item-avatar">
         <img ng-src="img/{{travel.modality}}.png" />
         <div class="item-note o-text-right">
-            <a class="badge badge-calm" href="#/app/users/{{travel.owner}}">{{travel.owner}}</a>
-            <br>
+          <p>
+            <a class="o-badge-calm" href="#/app/users/{{travel.owner}}">{{travel.owner}}</a>
+          </p>
             <p ng-show="storageusername==travel.owner" class="text-right">
                 <a href="#" ng-click="deleteTravel()" class="button button-small button-assertive o-pull-right"><i class="icon ion-trash-a"></i></a>
             </p>
@@ -30,18 +31,18 @@
         </div>
         <div class='col o-text-right'>
           <p ng-show="travel.collectivized">
-            <span class="o-badgeCollectivized">Collectivized</span>
+            <span class="o-badgeCollectivized">{{'Collectivized' | translate}}</span>
           </p>
           <p ng-show="travel.package">
             <div class="o-mini-text">
-                <div ng-show="travel.modality=='offering'">can carry package <img src="img/package.png" class="o-imgMenu" /></div>
-                <div ng-show="travel.modality=='asking'">need to carry package <img src="img/package.png" class="o-imgMenu" /></div>
+                <div ng-show="travel.modality=='offering'">{{'Can_carry_package' | translate}} <img src="img/package.png" class="o-imgMenu" /></div>
+                <div ng-show="travel.modality=='asking'">{{'Need_to_carry_package' | translate}} <img src="img/package.png" class="o-imgMenu" /></div>
             </div>
           </p>
 
             <p>
-                <div ng-show="travel.modality=='offering'">nº car seats: {{travel.seats}}</div>
-                <div ng-show="travel.modality=='asking'">nº people: {{travel.seats}}</div>
+                <div ng-show="travel.modality=='offering'">{{'n_Seats' | translate}}: {{travel.seats}}</div>
+                <div ng-show="travel.modality=='asking'">{{'n_People' | translate}}: {{travel.seats}}</div>
             </p>
         </div>
       </div>
@@ -49,37 +50,37 @@
 
 
         <div ng-show="storageusername">
-            <p class='text-right' ng-show="storageusername!==travel.owner">
+            <p class='text-right' ng-show="storageusername!=travel.owner">
               <div ng-show="arrayObjectIndexOf(joins, storageusername, 'joinedUsername')==-1">
-                <a ng-show="travel.modality=='offering'" ng-click="joinTravel()" href="#" class="button button-calm o-pull-right">Ask to join</a>
-                <a ng-show="travel.modality=='asking'" ng-click="joinTravel()" href="#" class="button button-calm o-pull-right">Offer car</a>
-                <a ng-show="travel.modality=='package'" ng-click="joinTravel()" href="#" class="button button-calm o-pull-right">Offer car</a>
+                <a ng-show="travel.modality=='offering'" ng-click="joinTravel()" href="#" class="button button-calm o-pull-right">{{'Ask_to_join' | translate}}</a>
+                <a ng-show="travel.modality=='asking'" ng-click="joinTravel()" href="#" class="button button-calm o-pull-right">{{'Offer_car' | translate}}</a>
+                <a ng-show="travel.modality=='package'" ng-click="joinTravel()" href="#" class="button button-calm o-pull-right">{{'Offer_car' | translate}}</a>
               </div>
 
               <div ng-show="arrayObjectIndexOf(joins, storageusername, 'joinedUsername')!=-1">
-                <a ng-show="travel.modality=='offering'" ng-click="unjoinTravel()" href="#" class="button button-assertive o-pull-right">Unjoin</a>
-                <a ng-show="travel.modality=='asking'" ng-click="unjoinTravel()" href="#" class="button button-assertive o-pull-right">Unoffer car</a>
-                <a ng-show="travel.modality=='package'" ng-click="unjoinTravel()" href="#" class="button button-assertive o-pull-right">Unoffer car</a>
+                <a ng-show="travel.modality=='offering'" ng-click="unjoinTravel()" href="#" class="button button-assertive o-pull-right">{{'Unjoin' | translate}}</a>
+                <a ng-show="travel.modality=='asking'" ng-click="unjoinTravel()" href="#" class="button button-assertive o-pull-right">{{'Unoffer_car' | translate}}</a>
+                <a ng-show="travel.modality=='package'" ng-click="unjoinTravel()" href="#" class="button button-assertive o-pull-right">{{'Unoffer_car' | translate}}</a>
               </div>
             </p>
         </div>
     </div>
     <div class="item item-body" ng-show="joins[0]">
-        Joined users:<br>
+        {{'Joined_users' | translate}}:<br>
         <a ng-repeat="join in joins" ng-href="#/app/users/{{join.joinedUsername}}" class="button button-small button-dark">
             <img ng-src="img/avatars/{{join.joinedAvatar}}.png" class="o-img-joined" />{{join.joinedUsername}}<br>
         </a>
     </div>
     <div class="item item-body">
         <div ng-show="comments[0]">
-            Comments:<br>
+            {{'Comments' | translate}}:<br>
             <a ng-repeat="comment in comments" ng-href="#/app/users/{{comment.commentUsername}}" class="item">
                 <h3><img ng-src="img/avatars/{{comment.commentAvatar}}.png" class="o-img-joined" />{{comment.commentUsername}}</h3>
                 <p>{{comment.comment}}</p>
             </a>
         </div>
         <div ng-show="storageusername">
-          <a ng-click="showNewComment()" ng-show="!doingNewComment" class="button button-small button-calm right">New comment</a>
+          <a ng-click="showNewComment()" ng-show="!doingNewComment" class="button button-small button-calm right">{{'New_comment' | translate}}</a>
         </div>
         <form class="list" ng-show="doingNewComment">
             <label class="item item-input item-floating-label">
@@ -87,10 +88,10 @@
             </label>
 
             <button ng-click="closeNewComment()" class="button button-small button-assertive">
-               Cancel
+               {{'Cancel' | translate}}
             </button>
             <button ng-click="doNewComment()" class="button button-small button-calm">
-               Post comment
+               {{'Post_comment' | translate}}
             </button>
         </form>
     </div>

www/templates/travels.html

@@ -1,7 +1,7 @@
-<ion-view view-title="Travels">
+<ion-view view-title="{{'Travels' | translate}}">
   <ion-content>
       <ion-refresher
-        pulling-text="Pull to refresh..."
+        pulling-text="{{'Pull_to_refresh' | translate}}..."
         on-refresh="doRefresh()">
       </ion-refresher>
     <div class="list">
@@ -13,14 +13,14 @@
             </div>
             <label class="item item-input">
                 <i class="icon ion-search placeholder-icon"></i>
-                <input type="search" placeholder="search..." ng-model="search">
+                <input type="search" placeholder="{{'search' | translate}}..." ng-model="search">
             </label>
         </div>
 
         <div class="card" ng-show="!travels">
           <div class="item item-text-wrap">
-            No data in memory.<br>
-            Pull from top to refresh
+            {{'No_data_in_memory' | translate}}<br>
+            {{'Pull_from_top_to_refresh' | translate}}
           </div>
         </div>
         <a ng-repeat="travel in travels | orderBy: 'date' | filter: search" class="item item-avatar" href="#/app/travels/{{travel._id}}">

www/templates/user.html

@@ -1,4 +1,4 @@
-<ion-view view-title="User {{user.username}}">
+<ion-view view-title="{{'User' | translate}} {{user.username}}">
   <ion-content>
     <div class="item item-avatar">
         <img ng-src="img/avatars/{{user.avatar}}.png" />
@@ -12,8 +12,8 @@
         </p>
     </div>
     <div class="item item-body">
-        history of {{user.username}}:
-        <div class="positive">{{travels.length}} publications</div>
+        {{'history_of' | translate}} {{user.username}}:
+        <div class="positive">{{travels.length}} {{'publications' | translate}}</div>
 
         <a ng-repeat="travel in travels | orderBy: 'date'" class="item item-avatar" href="#/app/travels/{{travel._id}}">
           <img ng-src="img/{{travel.modality}}.png">
@@ -24,8 +24,8 @@
           </h2>
 
           <div class="item-note">
-              <p class="" ng-show="travel.modality=='offering'">nºseats: {{travel.seats}}</p>
-              <p class="" ng-show="travel.modality=='asking'">nºpeople: {{travel.seats}}</p>
+              <p class="" ng-show="travel.modality=='offering'">{{'n_Seats' | translate}}: {{travel.seats}}</p>
+              <p class="" ng-show="travel.modality=='asking'">{{'n_People' | translate}}: {{travel.seats}}</p>
           </div>
           <p>
               {{travel.description}}

www/templates/users.html

@@ -1,4 +1,4 @@
-<ion-view view-title="Users">
+<ion-view view-title="{{'Users' | translate}}">
   <ion-content>
       <ion-refresher
         pulling-text="Pull to refresh..."