xref: /openbmc/webui-vue/src/main.js (revision 5ea16782) 
1import Vue from 'vue';
2import App from './App.vue';
3import router from './router';
4import store from './store';
5import {
6  AlertPlugin,
7  BadgePlugin,
8  ButtonPlugin,
9  BVConfigPlugin,
10  CardPlugin,
11  CollapsePlugin,
12  DropdownPlugin,
13  FormPlugin,
14  FormCheckboxPlugin,
15  FormDatepickerPlugin,
16  FormFilePlugin,
17  FormGroupPlugin,
18  FormInputPlugin,
19  FormRadioPlugin,
20  FormSelectPlugin,
21  FormTagsPlugin,
22  InputGroupPlugin,
23  LayoutPlugin,
24  LinkPlugin,
25  ListGroupPlugin,
26  ModalPlugin,
27  NavbarPlugin,
28  NavPlugin,
29  PaginationPlugin,
30  ProgressPlugin,
31  TablePlugin,
32  ToastPlugin,
33  TooltipPlugin
34} from 'bootstrap-vue';
35import Vuelidate from 'vuelidate';
36import i18n from './i18n';
37import { format } from 'date-fns-tz';
38
39// Filters
40Vue.filter('shortTimeZone', function(value) {
41  const longTZ = value
42    .toString()
43    .match(/\((.*)\)/)
44    .pop();
45  const regexNotUpper = /[*a-z ]/g;
46  return longTZ.replace(regexNotUpper, '');
47});
48
49Vue.filter('formatDate', function(value) {
50  const isUtcDisplay = store.getters['global/isUtcDisplay'];
51
52  if (value instanceof Date) {
53    if (isUtcDisplay) {
54      return value.toISOString().substring(0, 10);
55    }
56    const pattern = `yyyy-MM-dd`;
57    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
58    return format(value, pattern, { timezone });
59  }
60});
61
62Vue.filter('formatTime', function(value) {
63  const isUtcDisplay = store.getters['global/isUtcDisplay'];
64
65  if (value instanceof Date) {
66    if (isUtcDisplay) {
67      let timeOptions = {
68        timeZone: 'UTC',
69        hour12: false
70      };
71      return `${value.toLocaleTimeString('default', timeOptions)} UTC`;
72    }
73    const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
74    const shortTz = Vue.filter('shortTimeZone')(value);
75    const pattern = `HH:mm:ss ('${shortTz}' O)`;
76    return format(value, pattern, { timezone }).replace('GMT', 'UTC');
77  }
78});
79
80// Plugins
81Vue.use(AlertPlugin);
82Vue.use(BadgePlugin);
83Vue.use(ButtonPlugin);
84Vue.use(BVConfigPlugin, {
85  BFormText: { textVariant: 'secondary' },
86  BTable: {
87    headVariant: 'light',
88    footVariant: 'light'
89  },
90  BFormTags: {
91    tagVariant: 'primary',
92    addButtonVariant: 'link-primary'
93  },
94  BBadge: {
95    variant: 'primary'
96  }
97});
98Vue.use(CardPlugin);
99Vue.use(CollapsePlugin);
100Vue.use(DropdownPlugin);
101Vue.use(FormPlugin);
102Vue.use(FormCheckboxPlugin);
103Vue.use(FormDatepickerPlugin);
104Vue.use(FormFilePlugin);
105Vue.use(FormGroupPlugin);
106Vue.use(FormInputPlugin);
107Vue.use(FormRadioPlugin);
108Vue.use(FormSelectPlugin);
109Vue.use(FormTagsPlugin);
110Vue.use(InputGroupPlugin);
111Vue.use(LayoutPlugin);
112Vue.use(LayoutPlugin);
113Vue.use(LinkPlugin);
114Vue.use(ListGroupPlugin);
115Vue.use(ModalPlugin);
116Vue.use(NavbarPlugin);
117Vue.use(NavPlugin);
118Vue.use(PaginationPlugin);
119Vue.use(ProgressPlugin);
120Vue.use(TablePlugin);
121Vue.use(ToastPlugin);
122Vue.use(TooltipPlugin);
123Vue.use(Vuelidate);
124
125new Vue({
126  router,
127  store,
128  i18n,
129  render: h => h(App)
130}).$mount('#app');
131