https://heppa.hippos.fi/embed/heila.js

1
2(function (w) {
3
4  function formatPrice(num) {
5    return !isNaN(num)
6      ? num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ' ').replace('.', ',') + ' €'
7      : undefined
8    ;
9  }
10
11  function renderGender(row) {
12    if (row.gender == 'O') {
13      return 'Ori';
14    } else if (row.gender == 'T') {
15      return 'Tamma';
16    } else {
17      return 'Ruuna';
18    }
19  }
20
21  // Private namespace for Api object
22  (function (w) {
23    /**
24     * Define api class
25     *
26     * @param {String} serverUrl Api url without trailing slash
27     */
28    function Api(serverUrl, params) {
29
30      // Define api endpoint root
31      this.baseUrl = serverUrl + '/jalostus_backend';
32
33      // Development endpoint
34      // this.baseUrl = 'http://localhost:8090/jalostus_backend';
35    }
36
37    Api.prototype.call = function (endpoint, filters, callback, err) {
38      // Create
39      var xhr = new XMLHttpRequest();
40
41      // Setup our listener to process completed requests
42      xhr.onload = function () {
43        // Check response status and execure callback function
44        if (xhr.status >= 200 && xhr.status < 300) {
45          callback(JSON.parse(xhr.responseText));
46        }
47      };
48
49      // Define error handler function.
50      xhr.onerror = err;
51
52      // Make api call
53      xhr.open('POST', this.baseUrl + endpoint);
54      xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
55      xhr.send(JSON.stringify(filters));
56    }
57
58    // Set Object constructor to global namespace
59    w.Api = Api;
60
61  }(window));
62
63  // Private namespace for Heila object
64  (function (w) {
65
66    /**
67     * Helper for rows
68     *
69     * @param {Array} rows
70     */
71    function Rows(rows) {
72      this.rows = rows;
73    }
74
75    /**
76     * Return full item count
77     */
78    Rows.prototype.len = function () {
79      return this.rows.length;
80    };
81
82    Rows.prototype.get = function () {
83      return this.rows
84    };
85
86    /**
87     * Create kuninkuusravit ranking to given html element
88     *
89     * @param {String} id HTML element id
90     */
91    function Heila(id, environment) {
92
93      // Initialize html element node.
94      this.element = document.getElementById(id);
95
96      // Define pagination object
97      this.pagination = {};
98
99      // initialize filters
100      this.filters = {sellTypes:[],leasingType:null,usages:[],species:[],breedCodes:[],genders:[],breedAssocs:[],ageMin:'',ageMax:'',priceMin:'',priceMax:'',searchWord:''}
101
102      // Store server url
103      this.serverUrl = 'https://' + (typeof environment === 'string' ? environment : 'heppa') + '.hippos.fi';
104
105      // Initialize api
106      this.api = new w.Api(this.serverUrl);
107
108      // Define container data coming from api
109      this.rows = null;
110    }
111
112    /**
113     * Validate app parameters
114     *
115     * @returns {Boolean}
116     */
117    Heila.prototype.validate = function () {
118      return this.element !== null;
119    }
120
121    /**
122     * Load and set our stylesheet to <head>
123     */
124    Heila.prototype.loadStylesheet = function () {
125      // Define filename to be loaded
126      var stylesheetFile = this.serverUrl + '/embed/heila.css';
127
128      // Development stylesheet
129      // var stylesheetFile = 'dist/heila.css';
130
131      // Create link html element
132      var link = document.createElement('link');
133      // Define link element attributes
134      link.href = stylesheetFile;
135      link.type = "text/css";
136      link.rel = "stylesheet";
137      link.media = "screen,print";
138      // Append element
139      document.getElementsByTagName('head')[0].appendChild(link);
140    }
141
142    /**
143     * Print object value in template string
144     *
145     * @param {String} str Template string
146     * @param {Object} obj Object with keys to to be replaced and values with replacement strings
147     */
148    Heila.prototype.printTemplate = function (str, obj) {
149      for (var field in obj) {
150        var rgx = new RegExp('\{#' + field + '#\}', 'g');
151        str = str.replace(rgx, obj[field]);
152      }
153
154      return str;
155    };
156
157    /**
158     * Render horse row
159     */
160    Heila.prototype.renderRow = function (row) {
161
162      var imgTemplate = '<figure class="hla__figure">' +
163        '<img class="hla__img" src="{#imageSrc#}" alt="{#name#}" />' +
164        '<figcaption class="hla__figcaption">{#name#}</figcaption>' +
165        '</figure>';
166
167      var rowTemplate = '<a target="_blank" href="https://heppa.hippos.fi/jalostus/horse/{#id#}/sale" class="hla__sale-row">' +
168          '{#imagehtml#}' +
169          '<div class="hla__sale-fields">' +
170            '{#fields#}' +
171          '</div>' +
172        '</a>'
173
174      return this.printTemplate(rowTemplate, {
175        imagehtml: this.printTemplate(imgTemplate, {
176          name: row.horseName,
177          imageSrc: row.coverImageId

178            ? 'https://heppa.hippos.fi/jalostus_backend/horseImage/' + row.coverImageId
179            : this.serverUrl + '/embed/img/horse-placeholder.png'
180        }),
181        id: row.horseIdStr,
182        fields: [
183          '<div class="hla__label-value"><label>Ikä</label><span>' + row.age + '</span></div>',
184          '<div class="hla__label-value"><label>Sukupuoli</label><span>' + renderGender(row) + '</span></div>',
185          '<div class="hla__label-value"><label>Isä</label><span>' + row.sireName + '</span></div>',
186          '<div class="hla__label-value"><label>Emä</label><span>' + row.damName + '</span></div>',
187          '<div class="hla__label-value"><label>Emänisä</label><span>' + row.damSireName + '</span></div>',
188        ].join('')
189      });
190    };
191
192    /**
193     * Convert rows into html
194     */
195    Heila.prototype.composeContent = function () {
196      var self = this;
197
198      if (this.rows instanceof Rows) {
199        var rows = this.rows.get();
200        if (rows.length > 0) {
201          var htmlStr = '';
202          for (var i = 0; i < rows.length; i++) {
203            htmlStr += this.renderRow.apply(self, [rows[i]]);
204          }
205
206          return htmlStr;
207        } else {
208          return '<p class="hla__empty-content">Ei myytäviä hevosia</p>';
209        }
210      } else if (this.rows instanceof Error) {
211        return '<p class="hla__empty-content">' + this.rows.message + '</p>';
212      } else {
213        return '<p class="hla__empty-content">Ladataan ilmoituksia...</p>';
214      }
215    };
216
217    /**
218     * Define render function
219     */
220    Heila.prototype.render = function () {
221      this.gpInitialized = false
222      this.element.innerHTML = this.composeContent();
223    };
224
225    /**
226     * Define render function
227     */
228    Heila.prototype.fetchContent = function () {
229      var self = this;
230      const { page, pageSize, sortColumn, sortOrder } = this.pagination;
231      this.api.call('/sell/list?page=' + this.pagination.page + '&resultsPerPage=' + pageSize + '&sortColumn=' + sortColumn + '&sortOrder=' + sortOrder + '', this.filters, function (responseJson) {
232        self.rows = new Rows(responseJson.data);
233        self.render();
234      }, function () {
235        self.rows = new Error('Virhe ladattaessa tietoja.');
236        self.render();
237      });
238    };
239
240    /**
241     * Define initialization function for Heila app
242     */
243    Heila.prototype.init = function (options) {
244
245      var opts = typeof options === 'object'
246        ? options
247        : { nostyles: false, filters: {} }
248      ;
249
250      this.element.className = 'hla__wrapper';
251
252      // Initialize pagination
253      this.pagination = {
254        page: 1,
255        pageSize: opts.pagination.pageSize || 10,
256        sortColumn: opts.pagination.sortColumn || 'horseName',
257        sortOrder: opts.pagination.sortOrder || 'asc'
258      };
259
260      // replace filters with given filters
261      for (var key in opts.filters) {
262        this.filters[key] = opts.filters[key];
263      }
264
265      // Validate app
266      if (!this.validate()) {
267        throw new Error('Invalid parameters! Check element id given in constructor.');
268      }
269
270      if (!opts.nostyles) {
271        // Load style sheet
272        this.loadStylesheet();
273      }
274
275      // Render content
276      this.render();
277      this.fetchContent();
278    }
279
280    // Set Object constructor to global namespace
281    w.Heila = Heila;
282  }(window));
283
284}(window));